Revize 863ca316

Re #8159 - new, fixed buttons, CSS improvements, refactoring

website/public/css/style.css

@@ -1 @@
-@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap");
 html, body {
   position: relative;
@@ -768 +767 @@
   }
 }
 
-.player .next, .player .prev, .player .play, .player .pause, .player .lock-date {
+.player .next-btn, .player .prev-btn, .player .animate-btn, .player .lock-btn {
   display: inline-block;
   width: 42px;
   height: 42px;
@@ -782 +781 @@
   cursor: pointer;
 }
 
-.player .next:hover, .player .prev:hover, .player .play:hover, .player .pause:hover, .player .lock-date:hover {
+.player .next-btn:hover, .player .prev-btn:hover, .player .animate-btn:hover, .player .lock-btn:hover {
   opacity: 1;
 }
 
-.player .next:after, .player .prev:after, .player .play:after, .player .pause:after, .player .lock-date:after {
+.player .next-btn:after, .player .prev-btn:after, .player .animate-btn:after, .player .lock-btn:after {
   content: "";
   display: inline-block;
   width: 7px;
@@ -796 +795 @@
   left: calc(50% - 4px);
 }
 
-.player .play, .player .pause {
+.player .animate-btn {
   width: 57px;
   height: 57px;
   opacity: 1;
 }
 
 @media (max-width: 991.98px) {
-  .player .play, .player .pause {
+  .player .animate-btn {
     order: 3;
   }
 }
 
-.player .play:hover, .player .pause:hover {
+.player .animate-btn:hover {
   opacity: .7;
 }
 
-.player .play:after, .player .pause:after {
+.player .animate-btn:after {
   width: 10px;
   height: 16px;
   top: calc(50% - 8px);
 }
 
-.player .play:after {
-  left: calc(50% - 2px);
+.player .animate-btn.play:after {
+  left: calc(50% - 3px);
   background: url("../img/btn-play.svg") no-repeat;
 }
 
-.player .pause:after {
-  left: calc(50% - 4px);
+.player .animate-btn.pause:after {
+  left: calc(50% - 5px);
   background: url("../img/btn-pause.png") no-repeat;
 }
 
 @media (max-width: 991.98px) {
-  .player .next {
+  .player .next-btn {
     order: 3;
   }
 }
 
 @media (max-width: 575.98px) {
-  .player .next {
+  .player .next-btn {
     margin-right: 0;
   }
 }
 
-.player .next:after {
+.player .next-btn:after {
   background: url("../img/btn-next.svg") no-repeat;
 }
 
 @media (max-width: 991.98px) {
-  .player .prev {
+  .player .prev-btn {
     order: 2;
   }
 }
 
-.player .prev:after {
+.player .prev-btn:after {
   background: url("../img/btn-prev.svg") no-repeat;
 }
 
-.player .datetime {
+.player .timeline-wrapper {
   display: flex;
 }
 
 @media (max-width: 390px) {
-  .player .datetime {
+  .player .timeline-wrapper {
     display: block;
     text-align: center;
     margin-right: 10px;
@@ -884 +883 @@
   }
 }
 
-.player .date span {
-  padding: 3px 6px 4px 12px;
+.player .date:hover .lock-btn:after {
+  background-position: 0 0;
 }
 
 .player .date.lock {
   background: #0b155a;
 }
 
-.player .date.lock .lock-date {
-  border: 0px;
+.player .date.lock:hover .lock-btn:after {
+  background-position: -8px 0;
+}
+
+.player .date.lock .lock-btn {
+  border: 0;
   box-shadow: none;
 }
 
-.player .date.lock .lock-date:after {
+.player .date.lock .lock-btn:after {
   background-position: 0 0;
 }
 
-.player .date.lock .lock-date:hover:after {
-  background-position: -8px 0;
+.player .date span {
+  padding: 3px 6px 4px 12px;
 }
 
-.player .date .lock-date {
+.player .date .lock-btn {
   width: 26px;
   height: 26px;
   margin-right: 2px;
   opacity: 1;
   border: 1px solid #ffffff;
-  /* box-shadow: 0 0 0 2px $secondary-bg-color; */
 }
 
-.player .date .lock-date:after {
-  background-position: -8px 0;
-}
-
-.player .date .lock-date:hover {
-  /* box-shadow: 0 0 0 2px rgba(11, 21, 90, .2); */
-  background: rgba(11, 21, 90, 0.2);
-}
-
-.player .date .lock-date:hover:after {
-  background-position: 0 0;
-}
-
-.player .date .lock-date:after {
+.player .date .lock-btn:after {
   content: '';
   display: inline-block;
   width: 8px;
@@ -936 +925 @@
   background-size: cover;
 }
 
+.player .date .lock-btn:hover:after {
+  background-position: 0 0;
+}
+
 .player .timeline {
   display: flex;
   height: 30px;
@@ -1212 +1205 @@
   margin-bottom: auto;
 }
 
-header.map .nav-item:nth-child(3), header.map .nav-item:last-child {
+header.map .nav-item:nth-child(3) {
   border: 0;
 }
 
-header.map .nav-item .btn-secondary {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  outline: none;
-  border-radius: 50px;
-  height: 40px;
-  width: 40px;
-  margin-left: 10px;
-  transition: all 0.2s ease-out;
-  color: #0048A9;
-  background: white;
-  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
-  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
+header.map .nav-item:last-child {
+  margin-top: 0;
+  margin-bottom: 0;
+  border-left: 1px solid #1C6CC0;
+  background: #0057be;
 }
 
 @media (max-width: 991.98px) {
-  header.map .nav-item .btn-secondary {
-    width: 100%;
-    border-radius: .25rem;
-    margin-left: 0px;
-    margin-top: 10px;
-    margin-bottom: -10px;
+  header.map .nav-item:last-child {
+    margin: 10px 5px 0 5px;
+    border: 0;
   }
 }
 
-header.map .nav-item .btn-secondary:after {
-  padding-bottom: 4px;
-  content: '↺';
-  font-weight: 400;
-  font-size: 30px;
-  transform: rotateZ(0);
-  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+header.map .nav-item:last-child:hover {
+  background: #004fb3;
 }
 
-header.map .nav-item .btn-secondary:hover {
-  color: #0048A9;
-  background: white !important;
-  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
-  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
-  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
+header.map .nav-item .btn-secondary {
+  display: inline-block;
+  outline: none;
+  padding: 0 30px;
+  background: url("../img/btn-refresh.svg") no-repeat center center;
 }
 
-header.map .nav-item .btn-secondary:hover:after {
-  transform: rotateZ(-90deg);
-  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+header.map .nav-item .btn-secondary:hover {
+  background: url("../img/btn-refresh.svg") no-repeat center center !important;
 }
 
-header.map .nav-item .btn-secondary:active, header.map .nav-item .btn-secondary:focus {
-  background: #f0f0f0 !important;
-  color: #0048A9 !important;
+@media (max-width: 991.98px) {
+  header.map .nav-item .btn-secondary {
+    width: 100%;
+    padding: 20px;
+  }
 }
 
 header.map .nav-item input:hover {

website/public/css/style.scss

@@ -734 +734 @@
     bottom: -30px;
   }
 
-  .next, .prev, .play, .pause, .lock-date {
+  .next-btn, .prev-btn, .animate-btn, .lock-btn {
     display: inline-block;
     width: 42px;
     height: 42px;
@@ -762 +762 @@
     }
   }
 
-  .play, .pause {
+  .animate-btn {
     width: 57px;
     height: 57px;
     opacity: 1;
@@ -780 +780 @@
       height: 16px;
       top: calc(50% - 8px);
     }
-  }
-
-  .play:after {
-    left: calc(50% - 2px);
-    background: url($images-dir + 'btn-play.svg') no-repeat;
-  }
 
-  .pause:after {
-    left: calc(50% - 4px);
-    background: url($images-dir + 'btn-pause.png') no-repeat;
+    &.play:after {
+      left: calc(50% - 3px);
+      background: url($images-dir + 'btn-play.svg') no-repeat;
+    }
+  
+    &.pause:after {
+      left: calc(50% - 5px);
+      background: url($images-dir + 'btn-pause.png') no-repeat;
+    }
   }
 
-  .next {
+  .next-btn {
     @include media-breakpoint-down(md) {
       order: 3;
     }
@@ -806 +806 @@
     }
   }
 
-  .prev {
+  .prev-btn {
     @include media-breakpoint-down(md) {
       order: 2;
     }
@@ -816 +816 @@
     }
   }
 
-  .datetime {
+  .timeline-wrapper {
     display: flex;
     
     @media (max-width: 390px) {
@@ -836 +836 @@
     border-radius: 15px;
     cursor: pointer;
     background: rgba(11, 21, 90, .7);
-    //box-shadow: 0 0 0 2px rgba(11, 21, 90, .7);
-    //border: 1px solid transparent;
+    
     @media (max-width: 390px) {
       margin-right: 0;
     }
 
-    span {
-      padding: 3px 6px 4px 12px;
+    &:hover .lock-btn:after {
+      background-position: 0 0;
     }
+
     &.lock {
       background: rgba(11, 21, 90, 1);
-      //border-color: $primary-text-color;
-      //box-shadow: 0 0 0 2px $secondary-bg-color;
-      .lock-date {
-        border: 0px;
+
+      &:hover .lock-btn:after {
+        background-position: -8px 0;
+      }
+      
+      .lock-btn {
+        border: 0;
         box-shadow: none;
+
         &:after {
           background-position: 0 0;
         }
-
-        &:hover:after {
-          background-position: -8px 0;
-        }
       }
     }
-    .lock-date {
+
+    span {
+      padding: 3px 6px 4px 12px;
+    }
+
+    .lock-btn {
       width: 26px;
       height: 26px;
       margin-right: 2px;
       opacity: 1;
       border: 1px solid $primary-text-color;
-      /* box-shadow: 0 0 0 2px $secondary-bg-color; */
-      &:after{
-        background-position: -8px 0;
-      }
-      &:hover {
-        /* box-shadow: 0 0 0 2px rgba(11, 21, 90, .2); */
-        background: rgba(11, 21, 90, .2);
-
-        &:after {
-          background-position: 0 0;
-        }
-      }
 
       &:after {
         content: '';
@@ -888 +881 @@
         background: url($images-dir + 'btn-lock.svg') no-repeat -8px 0;
         background-size: cover;
       }
+
+      &:hover:after {
+        background-position: 0 0;
+      }
     }
   }
 
@@ -1118 +1115 @@
   margin-top: auto;
   margin-bottom: auto;
 
-  &:nth-child(3), &:last-child{
+  &:nth-child(3) {
     border: 0;
   }
 
-  .btn-secondary {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    outline: none;
-    border-radius: 50px;
-    height: 40px;
-    width: 40px;
-    margin-left: 10px;
-    transition: all 0.2s ease-out;
-    color: $primary-bg-color;
-    background: rgba(255, 255, 255, 1);
-    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
-    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
-    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
+  &:last-child {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-left: 1px solid #1C6CC0;
+    background: #0057be;
 
     @include media-breakpoint-down(md) {
-      width: 100%;
-      border-radius: .25rem;
-      margin-left: 0px;
-      margin-top: 10px;
-      margin-bottom: -10px;
+      margin: 10px 5px 0 5px;
+      border: 0;
     }
 
-    &:after {
-      padding-bottom: 4px;
-      content: '↺';
-      font-weight: 400;
-      font-size: 30px;
-      transform: rotateZ(0);
-      transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+    &:hover {
+      background: $primary-bg-color-darker;
     }
+  }
 
-    &:hover {
-      color: $primary-bg-color;
-      background: rgba(255, 255, 255, 1) !important;
-      -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
-      -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
-      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
+  // TLAČÍTKO PRO ODESLÁNÍ FORMULÁŘE PRO ZMĚNU PARAMETRŮ HEATMAPY
+  .btn-secondary {
+    display: inline-block;
+    outline: none;
+    padding: 0 30px;
+    background: url($images-dir + 'btn-refresh.svg') no-repeat center center;
 
-      &:after {
-        transform: rotateZ(-90deg);
-        transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
-      }
+    &:hover {
+      background: url($images-dir + 'btn-refresh.svg') no-repeat center center !important;
     }
 
-    &:active, &:focus {
-      background: rgba(240, 240, 240, 1) !important;
-      color: $primary-bg-color !important;
+    @include media-breakpoint-down(md) {
+      width: 100%;
+      padding: 20px;
     }
   }
 

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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 11" fill="#fff"><path d="M7.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 .8 0 1.5.5 1.8 1.3h1.4C14.8 1.2 13.6 0 12.1 0h-.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/public/img/btn-refresh.svg

@@ +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.117" height="20"><path d="M9.436 2.928l1.3-1.3a.95.95 0 0 0 0-1.345.95.95 0 0 0-.672-.279.95.95 0 0 0-.672.279L6.407 3.267c-.012.012-.02.026-.03.038a1.28 1.28 0 0 0-.063.077l-.028.035c-.008.012-.014.028-.022.04s-.03.053-.043.08a.92.92 0 0 0-.035.086.87.87 0 0 0-.026.087c-.008.03-.014.06-.018.092s-.007.06-.008.088v.047c0 .016 0 .036.005.054s0 .03 0 .047.006.025.008.037l.02.1.025.084a.9.9 0 0 0 .036.085.94.94 0 0 0 .045.086l.048.07a.96.96 0 0 0 .067.082c.008.01.014.02.023.028L9.4 7.6a.95.95 0 0 0 1.634-.405.95.95 0 0 0-.293-.939L9.314 4.83c3.555.406 6.152 3.55 5.88 7.118s-3.315 6.282-6.89 6.146S1.9 15.018 1.902 11.44a.95.95 0 0 0-.95-.907.95.95 0 0 0-.95.907 8.56 8.56 0 0 0 17.098.585 8.56 8.56 0 0 0-7.662-9.099z" fill="#fff"/></svg>

website/public/js/zcu-heatmap.js

@@ -51 +51 @@
   if (time !== null) {
     currentTime = time
   } else {
-    $('#dropdown-time input[type="radio"]:checked').each(function () {
-      currentTime = parseInt($(this).val())
-    })
+    currentTime = parseInt($('#dropdown-time input[type="radio"]:checked').val())
   }
 }
 
@@ -63 +61 @@
   } else {
     currentDate = new Date($('#date').val())
   }
-  $('#player-date span').html(`${currentDate.getDate()}. ${currentDate.getMonth() + 1}. ${currentDate.getFullYear()}`)
+
   $('#date').val(currentDateToString())
+  $('#player-date span').html(`${currentDate.getDate()}. ${currentDate.getMonth() + 1}. ${currentDate.getFullYear()}`)
+
   data = []
 }
 const currentDayToString = () => {
@@ -368 +368 @@
   isAnimationRunning = !isAnimationRunning
 
   if (isAnimationRunning) {
-    $('#play-pause').attr('class', 'pause')
+    $('#animate-btn').removeClass('play').addClass('pause')
     timer = setInterval(function () { next() }, 800)
   } else {
     clearTimeout(timer)
-    $('#play-pause').attr('class', 'play')
+    $('#animate-btn').removeClass('pause').addClass('play')
   }
 }
 
@@ -424 +424 @@
 }
 
 function setTimeline () {
-  $('#timeline').text(currentTime + ':00')
-  $('#timeline').attr('class', 'time hour-' + currentTime)
+  $('#player-time').text(currentTime + ':00')
+  $('#player-time').attr('class', 'time hour-' + currentTime)
 }
+
 const onChangeHour = (hour) => {
   changeHour(hour)
   drawHeatmap(data[currentTime])
 }
+
 const changeHour = (hour) => {
   changeCurrentTime(hour)
   updateHeaderControls()

website/templates/heatmap.html.twig

@@ -100 +100 @@
   </header>
 
   <div class="map-locations">
-    <a class="menu" data-toggle="collapse" href="#mapLocations" role="button" aria-expanded="false" aria-controls="mapLocations">
+    <a href="#mapLocations" class="menu" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="mapLocations">
       <span class="desktop">Prohlédněte si jednotlivé oblasti</span>
       <span class="mobile">Jednotlivé oblasti</span>
       <div class="circle"></div>
@@ -111 +111 @@
   </div>
 
   <div class="player">
-    <div class="prev" onclick="previous()"></div>
-    <div class="play" id="play-pause" onclick="changeAnimationState()"></div>
-    <div class="next" onclick="next()"></div>
+    <div class="prev-btn" onclick="previous()"></div>
+    <div class="animate-btn play" id="animate-btn" onclick="changeAnimationState()"></div>
+    <div class="next-btn" onclick="next()"></div>
 
-    <div class="datetime">
+    <div class="timeline-wrapper" title="Animovat pouze v rámci jednoho dne">
       {% if form.vars.value.date %}
       <div class="date" id="player-date" onclick="toggleDayLock()">
         <span>{{ form.vars.value.date|date('j. n. Y') }}</span>
-        <div class="lock-date"></div>
+        <div class="lock-btn"></div>
       </div>
       {% endif %}
 
       <div class="timeline">
-        <div class="time hour-0" id="timeline">0:00</div>
+        <div class="time hour-0" id="player-time">0:00</div>
 
         {% for i in 0..23 %}
         <div class="hour" title="{{ i }}:00" onclick="onChangeHour('{{ i }}')"></div>
         {% endfor %}
+
         <div class="end-dot"></div>
       </div>
     </div>