improve timeline ui

CaussesCevennes · Jul 31, 2020 · b2a2ffc · b2a2ffc
1 parent 2db7b20
commit b2a2ffc
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 24 deletions.
diff --git a/src/opp.css b/src/opp.css
@@ -2,14 +2,14 @@ html, body { width:100%; height:100%; margin:0; padding:0; font-size:100%; font-
 #head {position:relative; width:100%; height:5%; overflow:hidden; color:black; background:white;}
     #title {position:absolute; top:25%; left:1%; width:75%; letter-spacing:0.5em; font-size:2vmin;}
     #logo {position:absolute; height:100%; top:5%; right:0;}
-#container {position:relative; width:100%; height:95%; display:flex; flex-direction:row; overflow:hidden;}
-    #map {position:relative; width:35%; height:100%; flex:0 0 auto;}
-    #photosWrapper {position:relative; height:100%; flex:1 1 auto; display:flex; flex-direction:column;}
+#container {position:relative; width:100%; height:95%; display:flex; flex-direction:row;}
+    #map {position:relative; width:35%; height:100%; flex:0 0 auto; max-width:80%; min-width: 0;}
+    #photosWrapper {position:relative; width:40%; height:100%; flex:1 1 auto; display:flex; flex-direction:column; min-width: 0;}
       #photos {position:relative; height:100%; flex:1 1 auto;}
           #photo1 {width:100%; height:100%; }
           #photo2 {width:100%; height:50%; display:none;}
       #timeline {width:100%; height:20%; display:none; flex:1 1 auto;}
-    #sidePanel {width:25%; height:100%; flex:0 0 auto;}
+    #sidePanel {width:25%; height:100%; flex:0 0 auto; max-width:40%; min-width: 5%;}
     #toolbar {width:38px; height:100%; flex:0 0 auto;}
 
 * {
@@ -384,8 +384,8 @@ hr{
 
 #thumbs{
   display: flex;
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
   align-items: center;
   overflow-x: scroll;
   padding-top: 10px;
@@ -398,9 +398,20 @@ hr{
   background: center no-repeat;
   background-size: cover;
   height: 100%;
-  margin-left: 5px;
-  margin-right: 5px;
+  margin: 0 2px 0 2px;
   position: relative;
+  border:4px solid white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.photoThumb:hover{
+  border:4px dashed #2ca089BF;
+}
+
+.photoThumb.activeLink{
+  cursor: default;
 }
 
 .photoThumb.active{
@@ -415,6 +426,29 @@ hr{
   color: white;
 }
 
+.photoThumb:hover .thumbLink.activeLink{
+  visibility: visible;
+  opacity: 0.75;
+}
+
+.thumbLink{
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s, opacity 0.1s linear;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 2em;
+  color: white;
+  background-color: #2ca089ff;
+  flex: 0 0 40px;
+  height : 40px;
+  border-radius: 50%;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 40px;
+  margin: 5px;
+}
+
 .thumbMark1, .thumbMark2 {
   position:absolute;
   font-weight: bold;
@@ -824,3 +858,35 @@ li:hover, li.selected, tr:hover, tr.selected  {
   -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
   transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
 }
+
+
+/* Pop */
+@-webkit-keyframes hvr-pop {
+  50% {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+}
+@keyframes hvr-pop {
+  50% {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+}
+.hvr-pop {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
+  -webkit-animation-name: hvr-pop;
+  animation-name: hvr-pop;
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-timing-function: linear;
+  animation-timing-function: linear;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
diff --git a/src/opp.js b/src/opp.js
@@ -699,30 +699,25 @@ function OPP(providers, theme) {
         $("<div id="+ dk +" class='photoThumb'></div>")
         .css('background-image', 'url(' + thumbUrl + ')')
         .append(
-          $("<div class='thumbDate'></div>")
-          .text(dk)
+          $("<div class='thumbDate'></div>").text(dk),
+          $("<div id='thumbLink1' class='thumbLink hvr-pop' title='Remplacer la vue 1'></div>").text('1'),
+          $("<div id='thumbLink2' class='thumbLink hvr-pop' title='Remplacer la vue 2'></div>").text('2')
         )
       );
     });
   }
 
 
-  var thumbSelect = function(date) {
-
+  var thumbSelect = function(date, target) {
     if (self.viewMode == 'SINGLE'){
       dropDownDateSelect('#dropDownDate1', date);
     } else {
-      //if (date < $('#dropDownDate2').val()) {
-      let targetDate = new Date(date);
-      let currentDate1 = new Date($('#dropDownDate1').val());
-      let currentDate2 = new Date($('#dropDownDate2').val());
-      if (Math.abs(targetDate - currentDate1) < Math.abs(targetDate - currentDate2)) {
+      if (target == 'thumbLink1') {
         dropDownDateSelect('#dropDownDate1', date);
-      } else {
+      } else if (target == 'thumbLink2') {
         dropDownDateSelect('#dropDownDate2', date);
       }
     }
-
   }
 
   /* Parse url parameters and update app state according to them. */
@@ -1176,17 +1171,15 @@ function OPP(providers, theme) {
     $(`#${d1}.photoThumb`)
     .toggleClass('active')
     .append(
-      $("<div class='thumbMark1'></div>")
-      .text("1")
+      $("<div class='thumbMark1'></div>").text("1")
     );
     if (self.viewMode != 'SINGLE') {
       thumb2 = $(`#${d2}.photoThumb`);
       if (d1 != d2) {
         thumb2.toggleClass('active');
       }
       thumb2.append(
-        $("<div class='thumbMark2'></div>")
-        .text("2")
+        $("<div class='thumbMark2'></div>").text("2")
       );
     }
 
@@ -1520,7 +1513,22 @@ function OPP(providers, theme) {
       toggleTimeline();
     });
     $("#timeline").on('click', '.photoThumb', function () {
-      thumbSelect($(this).attr('id'));
+      if (self.viewMode == 'SINGLE'){
+        thumbSelect($(this).attr('id'));
+      } else {
+        $(this).addClass('activeLink');
+        $(this).children('.thumbLink').addClass('activeLink');
+      }
+    });
+    $("#timeline").on('mouseleave', '.photoThumb', function () {
+      $(this).removeClass('activeLink');
+      $(this).children('.thumbLink').removeClass('activeLink');
+    });
+    $("#timeline").on('click', '.thumbLink', function (e) {
+      thumbSelect($(this).parent().attr('id'), $(this).attr('id'));
+      $(this).parent().removeClass('activeLink');
+      $('.thumbLink').removeClass('activeLink');
+      e.stopPropagation();
     });
     $("#thumbNext").click(function(){
       //$("#thumbs").scrollLeft($("#thumbs").scrollLeft() + 500);