Revize b7a21811

Re #8161 - new timeline button due animation per day(s)

website/public/css/style.css

@@ -768 +768 @@
   }
 }
 
-.player .next, .player .prev, .player .play, .player .pause {
+.player .next, .player .prev, .player .play, .player .pause, .player .lock-date {
   display: inline-block;
   width: 42px;
   height: 42px;
@@ -782 +782 @@
   cursor: pointer;
 }
 
-.player .next:hover, .player .prev:hover, .player .play:hover, .player .pause:hover {
+.player .next:hover, .player .prev:hover, .player .play:hover, .player .pause:hover, .player .lock-date:hover {
   opacity: 1;
 }
 
-.player .next:after, .player .prev:after, .player .play:after, .player .pause:after {
+.player .next:after, .player .prev:after, .player .play:after, .player .pause:after, .player .lock-date:after {
   content: "";
   display: inline-block;
   width: 7px;
@@ -867 +867 @@
 }
 
 .player .date {
+  display: flex;
+  align-items: center;
+  align-content: center;
   font-size: 15px;
-  padding: 3px 12px 4px 12px;
   margin-right: 10px;
   text-align: center;
   border-radius: 15px;
   cursor: pointer;
-  background: #0b155a;
+  background: rgba(11, 21, 90, 0.7);
 }
 
 @media (max-width: 390px) {
@@ -882 +884 @@
   }
 }
 
-.player .date:hover {
-  opacity: .7;
+.player .date span {
+  padding: 3px 6px 4px 12px;
+}
+
+.player .date .lock-date {
+  width: 26px;
+  height: 26px;
+  margin-right: 2px;
+  opacity: 1;
+  border: 1px solid #ffffff;
+  box-shadow: 0 0 0 2px #0b155a;
+}
+
+.player .date .lock-date:hover {
+  box-shadow: 0 0 0 2px rgba(11, 21, 90, 0.2);
+  background: rgba(11, 21, 90, 0.2);
+}
+
+.player .date .lock-date:hover:after {
+  background-position: -8px 0;
+}
+
+.player .date .lock-date:after {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 11px;
+  background: url("../img/btn-lock.svg") no-repeat 0 0;
+  background-size: cover;
+}
+
+.player .date .lock-date.unlock:after {
+  background-position: -8px 0;
+}
+
+.player .date .lock-date.unlock:hover:after {
+  background-position: 0 0;
 }
 
 .player .timeline {

website/public/css/style.scss

@@ -734 +734 @@
     bottom: -30px;
   }
 
-  .next, .prev, .play, .pause {
+  .next, .prev, .play, .pause, .lock-date {
     display: inline-block;
     width: 42px;
     height: 42px;
@@ -827 +827 @@
   }
 
   .date {
+    display: flex;
+    align-items: center;
+    align-content: center;
     font-size: 15px;
-    padding: 3px 12px 4px 12px;
     margin-right: 10px;
     text-align: center;
     border-radius: 15px;
     cursor: pointer;
-    background: $secondary-bg-color;
+    background: rgba(11, 21, 90, .7);
 
     @media (max-width: 390px) {
       margin-right: 0;
     }
 
-    &:hover {
-      opacity: .7;
+    span {
+      padding: 3px 6px 4px 12px;
+    }
+
+    .lock-date {
+      width: 26px;
+      height: 26px;
+      margin-right: 2px;
+      opacity: 1;
+      border: 1px solid $primary-text-color;
+      box-shadow: 0 0 0 2px $secondary-bg-color;
+
+      &:hover {
+        box-shadow: 0 0 0 2px rgba(11, 21, 90, .2);
+        background: rgba(11, 21, 90, .2);
+
+        &:after {
+          background-position: -8px 0;
+        }
+      }
+
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 8px;
+        height: 11px;
+        background: url($images-dir + 'btn-lock.svg') no-repeat 0 0;
+        background-size: cover;
+      }
+
+      &.unlock {
+        &:after {
+          background-position: -8px 0;
+        }
+
+        &:hover:after {
+          background-position: 0 0;
+        }
+      }
     }
   }
 

website/public/img/btn-lock.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 11" fill="#fff"><path d="M-287.4 196.5h-9.5v-44.4C-296.9 70-362 1.4-443.5 0h-8.9C-533.8 1.4-599 70-599 152.1v44.4h-9.5c-14.6 0-26.5 15.1-26.5 33.7v222.6c0 18.6 11.9 33.8 26.5 33.8h321c14.6 0 26.5-15.2 26.5-33.8V230.2c.1-18.6-11.8-33.7-26.4-33.7zm-72 0h0-177v-44.4c0-48.9 39.7-89.3 88.5-89.3s88.5 40.4 88.5 89.3v44.4zm79.9 738.5h-247.9l-9.4-34.9c-12.7-47.2 15.3-96.6 62.4-109.2s96 16.1 108.6 63.4l8.7 32.7 61-14-9.4-34.9c-21.2-79.3-101.9-128.7-181-109-2.2.5-6.5 1.7-8.6 2.3-78.3 22.5-123.5 105.6-102.2 184.9l5 18.7h-8.4c-14.6 0-26.5 15.1-26.5 33.7v222.6c0 18.6 11.9 33.8 26.5 33.8h321c14.6 0 26.5-15.2 26.5-33.8V968.7c.3-18.6-11.7-33.7-26.3-33.7zM7.4 4.5h-.2v-1C7.2 1.7 5.8.2 4.1.2h-.2C2.2.2.8 1.7.8 3.5v1H.6c-.3 0-.6.3-.6.7V10c0 .4.3.7.6.7h6.9c.2.1.5-.3.5-.7V5.2c0-.4-.3-.7-.6-.7zm-1.5 0h0-3.8v-1A1.97 1.97 0 0 1 4 1.6a1.97 1.97 0 0 1 1.9 1.9v1z"/><path d="M15.4 4.6h-5.3V3.3c0-1.1.8-2 1.9-2 1 0 1.9.9 1.9 2h1.3c0-1.8-1.4-3.3-3.1-3.3h-.2c-1.7 0-3.1 1.5-3.1 3.3v1.3h-.2c-.3 0-.6.4-.6.8v4.9c0 .4.3.7.6.7h6.9c.3 0 .6-.3.6-.7V5.4c-.1-.4-.4-.8-.7-.8z"/></svg>

website/templates/heatmap.html.twig

@@ -116 +116 @@
     <div class="next" onclick="next()"></div>
 
     <div class="datetime">
-    
       {% if form.vars.value.date %}
-      <div class="date" id="player-date" onclick="openDatepicker()">{{ form.vars.value.date|date('j. n. Y') }}</div>
+      <div class="date" id="player-date">
+        <span onclick="openDatepicker()">{{ form.vars.value.date|date('j. n. Y') }}</span>
+        <div class="lock-date"></div>
+      </div>
       {% endif %}
 
       <div class="timeline">
@@ -164 +166 @@
 {% endblock %}
 
 {% block style %}
-<style type="text/css">
+<style>
 {% for dataset_name, dataset_color in dataset_colors %}
     .custom-control-input-{{ dataset_name }}:focus~.custom-control-label::before {
       border-color: {{ dataset_color }} !important;