Revize 4e003182

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

modules/crawler/DatasetConfigs/JIS.yaml

@@ -1 +1 @@
 # 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 +193 @@
   - Parkoviste-vyjezd:
       x: 49.7231533
       y: 13.3518328
-      
+      

website/public/css/style.css

@@ -296 +296 @@
 }
 
 .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 +316 @@
   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 +572 @@
   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 +597 @@
 
 .map-point:hover .desc {
   display: block;
-  width: 210px;
+  width: 220px;
   padding: 10px 20px;
   z-index: 0;
   opacity: 0.75;
@@ -637 +636 @@
 }
 
 .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 +683 @@
 @media (max-width: 575.98px) {
   .map-locations {
     max-width: 240px;
+    max-height: 70%;
     top: 80px;
     right: 10px;
   }
@@ -736 +736 @@
 
 @media (max-width: 575.98px) {
   .map-locations .locations ul {
+    max-height: 244px;
+    overflow-y: scroll;
     font-size: 13.5px;
   }
 }
@@ -833 +835 @@
   }
 }
 
+@media (max-width: 575.98px) {
+  .player .next {
+    margin-right: 0;
+  }
+}
+
 .player .next:after {
   background: url("../img/btn-next.svg") no-repeat;
 }
@@ -847 +855 @@
   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 +905 @@
   }
 }
 
+@media (max-width: 390px) {
+  .player .timeline {
+    display: inline-block;
+    margin: 4px 0 0 0;
+  }
+}
+
 @media (max-width: 991.98px) {
   .player .timeline .hour {
     display: none;

website/public/css/style.scss

@@ -274 +274 @@
 }
 
 .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 +292 @@
     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 +533 @@
   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 +557 @@
 
     .desc {
       display: block;
-      width: 210px;
+      width: 220px;
       padding: 10px 20px;
       z-index: 0;
       opacity: 0.75;
@@ -598 +597 @@
   }
 
   &.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 +645 @@
 
   @include media-breakpoint-down(xs) {
     max-width: 240px;
+    max-height: 70%;
     top: 80px;
     right: 10px;
   }
@@ -694 +694 @@
       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 +791 @@
       order: 3;
     }
 
+    @include media-breakpoint-down(xs) {
+      margin-right: 0;
+    }
+
     &:after {
       background: url($images-dir + 'btn-next.svg') no-repeat;
     }
@@ -804 +810 @@
     }
   }
 
+  .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 +853 @@
       margin-right: 20px;
     }
 
+    @media (max-width: 390px) {
+      display: inline-block;
+      margin: 4px 0 0 0;
+    }
+
     .hour {
       @include media-breakpoint-down(md) {
         display: none;

website/public/js/zcu-heatmap.js

@@ -377 +377 @@
   else {
     $(locationsWrapper).addClass(locationsDisplayClass);
   }
+}
+
+function openDatepicker() {
+  if ($(window).width() <= 990) {
+    $('.navbar-collapse').collapse();
+  }
+
+  $('#date').datepicker('show')
 }

website/templates/heatmap.html.twig

@@ -116 +116 @@
     <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 +148 @@
       <div class="hour"></div>
       <div class="end-dot"></div>
     </div>
+    </div>
   </div>
 
   <div id="heatmap"></div>

website/templates/index.html.twig

@@ -18 +18 @@
     </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 +63 @@
             <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 +93 @@
             <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>