commit 4e003182e79744d918d1ce4b235e298fda7a140b
Author: Martin Sebela <msebela@zcu.cz>
Date:   Tue May 26 01:43:28 2020 +0200

    Re #8079 - finishing frontend
    - new date label next to timeline
    - changed intro images to images with real data
    - locations box has maximum height with scrollbar
    - new texts on intro pages (map points)
    - CSS changes and repairs

diff --git a/modules/crawler/DatasetConfigs/JIS.yaml b/modules/crawler/DatasetConfigs/JIS.yaml
index 813e17f..ee23600 100644
--- a/modules/crawler/DatasetConfigs/JIS.yaml
+++ b/modules/crawler/DatasetConfigs/JIS.yaml
@@ -1,5 +1,5 @@
 # jmeno datasetu, pod kterym bude zobrazen v aplikaci
-display-name: Snímače JIS
+display-name: Snímače JIS karet
 # jednoslovný název datasetu, pod kterym bude reprezentovana v architektuře
 dataset-name: JIS
 # root slozka, ktera obsahuje odkazy na dataset
@@ -193,4 +193,4 @@ devices:
   - Parkoviste-vyjezd:
       x: 49.7231533
       y: 13.3518328
-      
\ No newline at end of file
+      
diff --git a/website/public/css/style.css b/website/public/css/style.css
index 00c4616..52ceabd 100644
--- a/website/public/css/style.css
+++ b/website/public/css/style.css
@@ -296,14 +296,13 @@ hr {
 }
 
 .swiper-slide {
-  z-index: -1000;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .swiper-slide.slide-bg-1 {
-  background: url("../img/bg-1.jpg") no-repeat bottom center;
+  background: url("../img/bg-1.jpg") no-repeat top center;
   background-size: cover;
 }
 
@@ -317,18 +316,18 @@ hr {
   background-size: cover;
 }
 
+.swiper-slide.slide-bg-3 .slide-text {
+  width: 100%;
+}
+
 @media (max-width: 767.98px) {
-  .swiper-slide.slide-bg-3 .container {
+  .swiper-slide .container {
     max-width: 100%;
     height: 100%;
     overflow-y: scroll;
   }
 }
 
-.swiper-slide.slide-bg-3 .slide-text {
-  width: 100%;
-}
-
 .slide-text {
   width: 600px;
   padding-bottom: 160px;
@@ -573,7 +572,7 @@ hr {
   border: 2px solid #fff;
 }
 
-@media (max-width: 767.98px) {
+@media not all and (min-width: 1900px) and (max-width: 2100px) {
   .map-point {
     display: none;
   }
@@ -598,7 +597,7 @@ hr {
 
 .map-point:hover .desc {
   display: block;
-  width: 210px;
+  width: 220px;
   padding: 10px 20px;
   z-index: 0;
   opacity: 0.75;
@@ -637,18 +636,18 @@ hr {
 }
 
 .map-point.point-1 {
-  bottom: 12%;
-  right: -75%;
+  top: 455px;
+  right: 32.5%;
 }
 
 .map-point.point-2 {
-  top: 21%;
-  right: -92%;
+  top: 235px;
+  right: 18%;
 }
 
 .map-point.point-3 {
-  top: 22%;
-  right: -92%;
+  bottom: 430px;
+  right: 20.8%;
 }
 
 #heatmap {
@@ -684,6 +683,7 @@ hr {
 @media (max-width: 575.98px) {
   .map-locations {
     max-width: 240px;
+    max-height: 70%;
     top: 80px;
     right: 10px;
   }
@@ -736,6 +736,8 @@ hr {
 
 @media (max-width: 575.98px) {
   .map-locations .locations ul {
+    max-height: 244px;
+    overflow-y: scroll;
     font-size: 13.5px;
   }
 }
@@ -833,6 +835,12 @@ hr {
   }
 }
 
+@media (max-width: 575.98px) {
+  .player .next {
+    margin-right: 0;
+  }
+}
+
 .player .next:after {
   background: url("../img/btn-next.svg") no-repeat;
 }
@@ -847,6 +855,38 @@ hr {
   background: url("../img/btn-prev.svg") no-repeat;
 }
 
+.player .datetime {
+  display: flex;
+}
+
+@media (max-width: 390px) {
+  .player .datetime {
+    display: block;
+    text-align: center;
+    margin-right: 10px;
+  }
+}
+
+.player .date {
+  font-size: 15px;
+  padding: 3px 12px 4px 12px;
+  margin-right: 10px;
+  text-align: center;
+  border-radius: 15px;
+  cursor: pointer;
+  background: #0B155A;
+}
+
+@media (max-width: 390px) {
+  .player .date {
+    margin-right: 0;
+  }
+}
+
+.player .date:hover {
+  opacity: .7;
+}
+
 .player .timeline {
   display: flex;
   height: 30px;
@@ -865,6 +905,13 @@ hr {
   }
 }
 
+@media (max-width: 390px) {
+  .player .timeline {
+    display: inline-block;
+    margin: 4px 0 0 0;
+  }
+}
+
 @media (max-width: 991.98px) {
   .player .timeline .hour {
     display: none;
diff --git a/website/public/css/style.scss b/website/public/css/style.scss
index 0230052..9e79676 100755
--- a/website/public/css/style.scss
+++ b/website/public/css/style.scss
@@ -274,13 +274,12 @@ hr {
 }
 
 .swiper-slide {
-  z-index: -1000;
   display: flex;
   justify-content: center;
   align-items: center;
 
   &.slide-bg-1 {
-    background: url($images-dir + 'bg-1.jpg') no-repeat bottom center;
+    background: url($images-dir + 'bg-1.jpg') no-repeat top center;
     background-size: cover;
   }
 
@@ -293,18 +292,18 @@ hr {
     background: url($images-dir + 'bg-3.jpg') no-repeat bottom center;
     background-size: cover;
 
-    @include media-breakpoint-down(sm) {
-      .container {
-        max-width: 100%;
-        height: 100%;
-        overflow-y: scroll;
-      }
-    }
-
     .slide-text {
       width: 100%;
     }
   }
+
+  @include media-breakpoint-down(sm) {
+    .container {
+      max-width: 100%;
+      height: 100%;
+      overflow-y: scroll;
+    }
+  }
 }
 
 // TEXT VE SLIDU
@@ -534,7 +533,7 @@ hr {
   cursor: pointer;
   border: 2px solid #fff;
 
-  @include media-breakpoint-down(sm) {
+  @media not all and (min-width: 1900px) and (max-width: 2100px) {
     display: none;
   }
 
@@ -558,7 +557,7 @@ hr {
 
     .desc {
       display: block;
-      width: 210px;
+      width: 220px;
       padding: 10px 20px;
       z-index: 0;
       opacity: 0.75;
@@ -598,18 +597,18 @@ hr {
   }
 
   &.point-1 {
-    bottom: 12%;
-    right: -75%;
+    top: 455px;
+    right: 32.5%;
   }
 
   &.point-2 {
-    top: 21%;
-    right: -92%;
+    top: 235px;
+    right: 18%;
   }
 
   &.point-3 {
-    top: 22%;
-    right: -92%;
+    bottom: 430px;
+    right: 20.8%;
   }
 }
 
@@ -646,6 +645,7 @@ hr {
 
   @include media-breakpoint-down(xs) {
     max-width: 240px;
+    max-height: 70%;
     top: 80px;
     right: 10px;
   }
@@ -694,6 +694,8 @@ hr {
       list-style-image: url($images-dir + 'li-bullet.svg');
 
       @include media-breakpoint-down(xs) {
+        max-height: 244px;
+        overflow-y: scroll;
         font-size: 13.5px;
       }
     }
@@ -789,6 +791,10 @@ hr {
       order: 3;
     }
 
+    @include media-breakpoint-down(xs) {
+      margin-right: 0;
+    }
+
     &:after {
       background: url($images-dir + 'btn-next.svg') no-repeat;
     }
@@ -804,6 +810,34 @@ hr {
     }
   }
 
+  .datetime {
+    display: flex;
+    
+    @media (max-width: 390px) {
+      display: block;
+      text-align: center;
+      margin-right: 10px;
+    }
+  }
+
+  .date {
+    font-size: 15px;
+    padding: 3px 12px 4px 12px;
+    margin-right: 10px;
+    text-align: center;
+    border-radius: 15px;
+    cursor: pointer;
+    background: #0B155A;
+
+    @media (max-width: 390px) {
+      margin-right: 0;
+    }
+
+    &:hover {
+      opacity: .7;
+    }
+  }
+
   .timeline {
     display: flex;
     height: 30px;
@@ -819,6 +853,11 @@ hr {
       margin-right: 20px;
     }
 
+    @media (max-width: 390px) {
+      display: inline-block;
+      margin: 4px 0 0 0;
+    }
+
     .hour {
       @include media-breakpoint-down(md) {
         display: none;
diff --git a/website/public/img/bg-1.jpg b/website/public/img/bg-1.jpg
index 978c6bf..28c2b24 100644
Binary files a/website/public/img/bg-1.jpg and b/website/public/img/bg-1.jpg differ
diff --git a/website/public/img/bg-2.jpg b/website/public/img/bg-2.jpg
index 2d5692f..a9fabfd 100644
Binary files a/website/public/img/bg-2.jpg and b/website/public/img/bg-2.jpg differ
diff --git a/website/public/js/zcu-heatmap.js b/website/public/js/zcu-heatmap.js
index f931bc5..9fe0dd5 100644
--- a/website/public/js/zcu-heatmap.js
+++ b/website/public/js/zcu-heatmap.js
@@ -377,4 +377,12 @@ function initLocationsMenu() {
   else {
     $(locationsWrapper).addClass(locationsDisplayClass);
   }
+}
+
+function openDatepicker() {
+  if ($(window).width() <= 990) {
+    $('.navbar-collapse').collapse();
+  }
+
+  $('#date').datepicker('show')
 }
\ No newline at end of file
diff --git a/website/templates/heatmap.html.twig b/website/templates/heatmap.html.twig
index 95d8ad0..d962924 100644
--- a/website/templates/heatmap.html.twig
+++ b/website/templates/heatmap.html.twig
@@ -116,6 +116,9 @@
     <div class="play" id="play-pause" onclick="changeAnimationState()"></div>
     <div class="next" onclick="next()"></div>
 
+    <div class="datetime">
+    <div class="date" onclick="openDatepicker()">{{ app.request.get('data_set')['date']|date('j. n. Y') }}</div>
+
     <div class="timeline">
       <div class="time hour-0" id="timeline">0:00</div>
 
@@ -145,6 +148,7 @@
       <div class="hour"></div>
       <div class="end-dot"></div>
     </div>
+    </div>
   </div>
 
   <div id="heatmap"></div>
diff --git a/website/templates/index.html.twig b/website/templates/index.html.twig
index 6b8ad02..9040222 100644
--- a/website/templates/index.html.twig
+++ b/website/templates/index.html.twig
@@ -18,7 +18,7 @@
     </div>
 
     <nav class="navbar navbar-expand-lg">
-      <a href="{{ path('heatmap') }}" class="navbar-brand shifted">
+      <a href="/heatmap/?data_set[date]=2019-04-11&amp;data_set[time]=9&amp;data_set[type]=JIS" class="navbar-brand shifted">
         <h1>Heatmap.ZČU</h1>
       </a>
 
@@ -63,22 +63,22 @@
             <hr>
             <p>Zobrazte si heatmapu života univerzity hodinu po hodině během jednoho dne. Od ranního probouzení, kdy studenti a&nbsp;zaměstnanci přicházejí do laboratoří, přes polední špičku v&nbsp;menze až do samotného večera, kdy končí poslední z&nbsp;přednášek a&nbsp;cvičení.</p>
             <a href="/heatmap/?data_set[date]=2019-04-11&amp;data_set[time]=9&amp;data_set[type]=JIS" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>
+          </div>
+        </div>
 
-            <div class="map-point point-1">
-              <div class="desc">
-                <div class="circle"></div>
-                <strong>Menza</strong>
-                <p>Polední špička v menze.</p>
-              </div>
-            </div>
+        <div class="map-point point-1">
+          <div class="desc">
+            <div class="circle"></div>
+            <strong>Bufet</strong>
+            <p>Dopolední špička v&nbsp;bufetu před otevřením menzy.</p>
+          </div>
+        </div>
 
-            <div class="map-point point-2">
-              <div class="desc">
-                <div class="circle"></div>
-                <strong>Knihovna</strong>
-                <p>Množství lidí v knihovně ukazuje, že se jedná o&nbsp;jedno z nejpopulárnějších míst na univerzitě.</p>
-              </div>
-            </div>
+        <div class="map-point point-2">
+          <div class="desc">
+            <div class="circle"></div>
+            <strong>Příjezdy</strong>
+            <p>Využití parkoviště u&nbsp;FAV v&nbsp;dopoledních hodinách.</p>
           </div>
         </div>
 
@@ -93,14 +93,14 @@
             <hr>
             <p>Heatmapa vám také dává možnost prozkoumávat data vlastním způsobem &ndash; stačí jen zvolit konkrétní datum a&nbsp;čas, pro které chcete data zobrazit. Můžete tak objevit i&nbsp;různé anomálie, například narazit na noční návštěvníky kampusu nebo odhalit návraty na studentské koleje v&nbsp;brzkých ranních hodinách&hellip;</p>
             <a href="/heatmap/?data_set[date]=2019-04-11&amp;data_set[time]=9&amp;data_set[type]=JIS" class="btn btn-primary" role="button">Vyzkoušet heatmapu</a>
+          </div>
+        </div>
 
-            <div class="map-point point-3">
-              <div class="desc">
-                <div class="circle"></div>
-                <strong>Podivný pohyb studentů</strong>
-                <p>Po středečním večeru bylo zaznamenáno relativně hodně vstupů na kolej kolem 4:00 ráno.</p>
-              </div>
-            </div>
+        <div class="map-point point-3">
+          <div class="desc">
+            <div class="circle"></div>
+            <strong>Nezvyklá aktivita</strong>
+            <p>Po středečním večeru bylo zaznamenáno větší množství vstupů na kolej kolem 3:00 ráno.</p>
           </div>
         </div>
 
