Update geospace

EvenTime.html

@@ -16,6 +16,7 @@
 	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
 
 	<link href="css/pages.css" rel="stylesheet">
+	<link href="css/evenTime.css" rel="stylesheet">
 
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
@@ -111,7 +112,7 @@
 											<div id="map" style="height:400px; width:100%;"></div>
 										</div>
 
-										<div class="col-4">
+										<div id="containerRight" class="col-4">
 											<div class="row">
 												<div class="col" id="timeline" style="height:400px; width:auto; overflow: auto;"></div>  
 											</div>
@@ -122,12 +123,16 @@
 									</div>
 
 									<div class="row">
-										<button id="backToDate" class="backToDate btn btn-default">Back to Date</button>
+										<!--<button id="backToDate" class="backToDate btn btn-default">Back to Date</button>-->
 										<button id="backToAnni" class="backToAnni btn btn-default">Back to Anni</button>
 										
 									</div>
 									<div class="row"> 
-										<div class="col" id="anni" style="height:600px; width:auto; overflow: auto;"></div> 
+										<div id="list_dates" class="col">
+											<ul id="anni">
+
+											</ul>
+										</div> 
 									</div>
 
 								</div>

css/evenTime.css

@@ -0,0 +1,95 @@
+#containerRight {
+  padding:10px;
+}
+
+#list_dates {
+  height:100px;
+  overflow-x: auto;
+  margin: 0;
+  border-top: 1px dashed #289ecb;
+}
+
+#list_dates ul {
+  list-style:none;
+    padding:0;
+    margin:0;
+}
+
+#list_dates li div {
+  width: 50px;
+    height: 50px;
+    margin: auto;
+    background: #289ecb;
+    color: #fff;
+    padding-top: 15px;
+    border-radius: 1000px;
+    transition: 0.6s ease;
+    margin-top: 15px;
+}
+
+#list_dates li div:hover {
+  background-color: #fff;
+  color: #289ecb;
+  border: 1px solid #289ecb;
+}
+
+#list_dates .date div {
+  padding-top: 18px;
+}
+
+
+#list_dates ul li:before {
+  content: "";
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  left: 50%;
+  margin-left: -2px;
+  background: #289ecb;
+  border-radius: 1000px;
+}
+
+.event {
+  padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 14px;
+}
+
+.event_days:hover {
+  -ms-transform: scale(1.5);  
+  -webkit-transform: scale(1.5);  
+  transform: scale(1.5); 
+}
+
+.event_days {
+    width: 70px;
+    height: 70px;
+    position: absolute;
+    float: left;
+    cursor: pointer;
+    margin-right: 1rem;
+    text-align: center;
+    transition: all .4s ease;
+}
+
+.year {
+  font-size: 14px;
+}
+
+.date {
+  font-size: 8px;
+}
+
+.yearSeed {
+  text-align: center;
+}
+
+.dateSeed {
+  text-align: center;
+  font-weight:600;
+}
+
+.eventSeed {
+  text-align: justify;
+  font-size: 12px;
+}

js/geospace.js

@@ -361,11 +361,14 @@ function manageYears(anni) {
   var Anni = "";
 
   anni.sort();
+
+  var left = 10;
   
   for (i in anni) {
     var anno = anni[i];
     if (anno.length == 4) {
-      Anni += '<div id="'+ anno + '" class="year">' + anno + '</div>';
+      Anni += '<li id="'+ anno + '" class="year event_days" style="left:' + left + 'px"><div>' + anno + '</div></li>';
+      left = left + 80;
     }
   }
 
@@ -382,12 +385,14 @@ function manageDates(date) {
   let evDates = {};
 
   var Date = "";
+  var left = 30;
 
   for (i in date) {
     if (!uniqueDates.includes(date[i])) {
       uniqueDates.push(date[i]);
       var data = date[i];
-      Date += '<div id="'+ data + '" class="date">' + data + '</div>';
+      Date += '<li id="'+ data + '" class="date event_days" style="left:' + left + 'px"><div>' + data + '</div></li>';
+      left = left + 100;
     }
     for (j in eventi) {
       if (date[i] == eventi[j]['data']) {
@@ -434,8 +439,12 @@ function manageEvents(events) {
         simpleDate = "";
     }
 
+    var object_button = '<button type="button" id="' + uri_soggetto + 
+				'" class="object btn btn-default" alt="oggetto" title="' + soggetto + 
+				'"><i class="fa fa-book"></i></button>';
+
     Eventi = '<div data-point="' + coordinates + '" class="row event">' + 
-    '<div class="col-1"></div><div class="col">' + ev + ' di ' + soggetto + '</div></div>';
+    '<div class="col-2">' + object_button + '</div><div class="col eventSeed">' + soggetto + '</div></div>';
   
     $('#timeline').append(Eventi);
   }
@@ -445,7 +454,7 @@ function manageEvents(events) {
 
 function createYearSeed(year) {
 
-  var Anno = "<div id='" + year + "'><h2>" + year + "</h2></div>";
+  var Anno = "<div class='yearSeed' id='" + year + "'><h2>" + year + "</h2></div>";
 
   $('#timeline').append(Anno);
 }
@@ -456,7 +465,7 @@ function cleanMap() {
 
 function createDateSeed(date) {
 
-  var Data = "<div class='row' id='" + date + "'><div class='col'>" + date + "</div>";
+  var Data = "<div class='row' id='" + date + "'><div class='col dateSeed'>" + date + "</div>";
 
   $('#timeline').append(Data);
 }