Fix grafica results.html

css/evenTime.css

@@ -1,22 +1,19 @@
-#containerRight {
-  padding:10px;
-}
-
 #list_dates {
-  height:100px;
-  overflow-x: auto;
-  margin: 0;
-  border-top: 1px solid #b61924;
+    height: 100px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: 0;
+    border-top: 1px solid #b61924;
 }
 
 #list_dates ul {
-  list-style:none;
-    padding:0;
-    margin:0;
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
 #list_dates li div {
-  width: 50px;
+    width: 50px;
     height: 50px;
     margin: auto;
     background: #b61924;
@@ -28,37 +25,36 @@
 }
 
 #list_dates li div:hover {
-  background-color: #fff;
-  color: #b61924;
-  border: 1px solid #b61924;
+    background-color: #fff;
+    color: #b61924;
+    border: 1px solid #b61924;
 }
 
 #list_dates .date div {
-  padding-top: 18px;
+    padding-top: 18px;
 }
 
-
 #list_dates ul li:before {
-  content: "";
-  width: 4px;
-  height: 4px;
-  position: absolute;
-  left: 50%;
-  margin-left: -2px;
-  background: #b61924;
-  border-radius: 1000px;
+    content: "";
+    width: 4px;
+    height: 4px;
+    position: absolute;
+    left: 50%;
+    margin-left: -2px;
+    background: #b61924;
+    border-radius: 1000px;
 }
 
 .event {
-  padding-top: 15px;
+    padding-top: 15px;
     padding-bottom: 15px;
-    font-size: 14px;
+    font-size: 15px;
 }
 
 .event_days:hover {
-  -ms-transform: scale(1.5);  
-  -webkit-transform: scale(1.5);  
-  transform: scale(1.5); 
+    -ms-transform: scale(1.5);
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
 }
 
 .event_days {
@@ -69,31 +65,30 @@
     cursor: pointer;
     margin-right: 1rem;
     text-align: center;
-    transition: all .4s ease;
+    transition: all 0.4s ease;
 }
 
 .year {
-  font-size: 14px;
+    font-size: 14px;
 }
 
 .date {
-  font-size: 8px;
+    font-size: 8px;
 }
 
 .yearSeed {
-  text-align: center;
-  color: #b61924;
+    text-align: center;
+    color: #b61924;
 }
 
 .dateSeed {
-  text-align: center;
-  font-weight:600;
+    text-align: center;
+    font-weight: 600;
 }
 
 .eventSeed {
-  text-align: justify;
-  font-size: 12px;
-  margin: 10px 0px 10px 20px;
+    text-align: justify;
+    margin: 10px 15px 10px 20px;
 }
 
 #backToAnni {
@@ -105,41 +100,40 @@
 }
 
 #backToAnni:hover {
-  background-color: #b61924;
-  color: #fff;
-  border: 1px solid #b61924;
+    background-color: #b61924;
+    color: #fff;
+    border: 1px solid #b61924;
 }
 
 #lemma_buttons {
-  margin-bottom: 30px;
+    margin-bottom: 30px;
     margin-top: -5px;
 }
 
-#lemma_buttons button:not(:last-child) {
-  margin-right: 20px;
-}
 #lemma_buttons button {
-  color: #30383f;
-  font-size: 15px;
-  position:relative;
-  width:12%;
+    color: #30383f;
+    font-size: 15px;
 }
 
 #lemma_buttons button .fa {
-  position:absolute;
-  line-height: 24px;
-  top:50%;
-  margin-top: -12px; /* Half of line height to keep left middle postion of container */
-  left: 10px;
+    margin-right: 5px;
 }
 
 .geo-text {
-  font-size: 12px;
-  font-style: revert;
-  margin-bottom: 2px;
+    font-size: 14px;
+    margin: 6px 0;
+    padding-right: 0;
+}
+
+.geo-text i {
+    margin-left: 3px;
+}
+
+.geo-text:hover {
+    text-decoration: underline;
 }
 
 .highlight {
-  background-color: yellow;
-  font-weight: bold;
-}
+    background-color: yellow;
+    font-weight: bold;
+}

css/timeline.css

@@ -292,20 +292,11 @@ body{
     margin-bottom: 20px;
 }
 
-#lemma_buttons button:not(:last-child) {
-    margin-right: 20px;
-}
 #lemma_buttons button {
     color: #30383f;
     font-size: 15px;
-    position:relative;
-    width:12%;
 }
   
 #lemma_buttons button .fa {
-    position:absolute;
-    line-height: 24px;
-    top:50%;
-    margin-top: -12px; /* Half of line height to keep left middle postion of container */
-    left: 10px;
+    margin-right: 5px;
 }

js/geospace.js

@@ -680,12 +680,12 @@ function manageEvents(events) {
     }
     
     var object_button = '<button type="button" id="' + uri_soggetto + 
-				'" class="object btn btn-default" alt="oggetto" title="' + soggetto + 
-				'"><p class="geo-text">Vedi scheda oggetto <i class="fa fa-book"></i></p></button>';
+				'" class="object btn btn-default geo-text" alt="oggetto" title="' + soggetto + 
+				'">Vedi scheda oggetto <i class="fa fa-book"></i></button>';
 
-    Eventi = '<div class="row event"> \
-    <div class="col eventSeed"><div data-point="' + coordinates + '" style="cursor:zoom-in;" class="row event_title">' + soggetto + '</div><div class="row justify-content-end">' + object_button +'</div> \
-    <div class="row">' + testo + '</div></div></div>';
+    Eventi = '<div class="event"> \
+    <div class="eventSeed"><div data-point="' + coordinates + '" style="cursor:zoom-in;" class="event_title">' + soggetto + '</div><div class="d-flex justify-content-end">' + object_button +'</div> \
+    <div>' + testo + '</div></div></div>';
     //<div class="col-2"><div class="row">' + object_button + '</div></div></div>';
   
     $('#timeline').append(Eventi);
@@ -707,7 +707,7 @@ function cleanMap() {
 
 function createDateSeed(date) {
 
-  var Data = "<div class='row' id='" + date + "'><div class='col dateSeed'>" + date + "</div>";
+  var Data = "<div id='" + date + "'><div class='dateSeed'>" + date + "</div>";
 
   $('#timeline').append(Data);
 }

results.html

@@ -120,18 +120,13 @@
 								<div class="col-12" id="geo_info">
 									<div class="row no-gutters">
 
-										<div class="col" id="events_map">
+										<div class="col-lg mb-3 mb-lg-0" id="events_map">
 											<div id="map" style="height:400px; width:100%;"></div>
 										</div>
 
-										<div id="containerRight" class="col-5">
-											<div class="row">
-												<div class="col" id="timeline" style="height:400px; width:auto; overflow: auto;"></div>  
-											</div>
-
-
+										<div id="containerRight" class="col-lg-5">
+											<div id="timeline" style="height:400px; width:auto; overflow: auto;"></div>  
 										</div>
-
 									</div>
 
 									<div class="row">