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

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;