Revize 6b7c4d1c

Re #8163 - CSS, JS refactoring

website/public/css/style.css

@@ -153 +153 @@
   background: #0048A9 !important;
 }
 
-@media (max-width: 991.98px) {
-  header.map .navbar-nav {
-    width: 100%;
-  }
-}
-
-header.map form {
-  display: flex;
-  margin: auto;
-}
-
-header.map label {
-  margin: 0 0 0 15px;
-  font-size: 16px;
-  letter-spacing: .4px;
-}
-
-header.map input, header.map .custom-select {
-  letter-spacing: .4px;
-  color: #ffffff;
-  border-color: #0048A9;
-  background: #0048A9;
-}
-
-header.map input::placeholder, header.map .custom-select::placeholder {
-  color: #ffffff;
-  opacity: 1;
-}
-
-header.map .nav-item {
-  margin: 0;
-  border-right: 1px solid #1C6CC0;
-}
-
-@media (max-width: 991.98px) {
-  header.map .nav-item {
-    margin-bottom: 20px;
-    border: 0;
-  }
-}
-
-header.map .nav-item:nth-of-type(3) .dropdown {
-  height: calc(100% + 10px) !important;
-  margin: -5px;
-  margin-top: -7px;
-}
-
-header.map .nav-item:nth-of-type(3) .dropdown .dropdown-menu {
-  top: calc(100% - 4px);
-}
-
-header.map .nav-item:nth-of-type(3) .dropdown button {
-  padding-left: 20px;
-  border-radius: 0;
-}
-
-@media (max-width: 991.98px) {
-  header.map .nav-item:nth-of-type(3) .dropdown {
-    height: 100% !important;
-    margin: 0px;
-    flex-direction: column;
-  }
-  header.map .nav-item:nth-of-type(3) .dropdown button {
-    padding-left: 12px;
-    border-radius: 5px;
-  }
-}
-
-@media (max-width: 991.98px) {
-  header.map .nav-item:nth-of-type(4) {
-    border-radius: 5px;
-  }
-}
-
-header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
-  width: 300px;
-}
-
-@media (max-width: 1500px) {
-  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
-    width: 280px;
-  }
-}
-
-@media (max-width: 1400px) {
-  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
-    width: 230px;
-  }
-}
-
-@media (max-width: 1400px) {
-  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
-    max-width: 230px;
-    width: auto;
-  }
-}
-
-@media (max-width: 991.98px) {
-  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
-    max-width: none;
-  }
-}
-
 h1 {
   text-transform: uppercase;
   font-size: 21px;
@@ -681 +578 @@
   right: 20.8%;
 }
 
+.slide-background {
+  width: 650px;
+  height: 290px;
+  z-index: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: url("../img/footer-bg.svg") no-repeat;
+}
+
+@media (max-width: 991.98px) {
+  .slide-background {
+    width: 320px;
+    height: 143px;
+    background-size: 100%;
+  }
+}
+
+div.copyright p {
+  font-weight: 400;
+}
+
+div.copyright span {
+  font-size: 17px;
+}
+
+p.logos-partners {
+  margin-top: 40px;
+  text-align: right;
+}
+
+p.logos-partners a {
+  text-decoration: none;
+}
+
+p.logos-partners a img {
+  margin-left: 50px;
+  height: 80px;
+}
+
+@media only screen and (max-width: 430px) {
+  p.logos-partners a img {
+    height: 70px;
+    margin-left: 0;
+  }
+}
+
+@media only screen and (max-width: 340px) {
+  p.logos-partners a img {
+    height: 60px;
+  }
+}
+
+p.logos-partners a:first-of-type img {
+  margin-left: 0;
+}
+
 #heatmap {
   height: 100%;
 }
 
+@media (max-width: 991.98px) {
+  header.map .navbar-nav {
+    width: 100%;
+  }
+}
+
+header.map form {
+  display: flex;
+  margin: auto;
+}
+
+header.map label {
+  margin: 0 0 0 15px;
+  font-size: 16px;
+  letter-spacing: .4px;
+}
+
+header.map input {
+  letter-spacing: .4px;
+  color: #ffffff;
+  border-color: #0048A9;
+  background: #0048A9;
+}
+
+header.map input::placeholder {
+  color: #ffffff;
+  opacity: 1;
+}
+
+header.map .nav-item {
+  padding: 5px;
+  margin: auto 0;
+  border-right: 1px solid #1C6CC0;
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item {
+    margin-bottom: 10px;
+    border: 0;
+  }
+}
+
+header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+  width: 300px;
+}
+
+@media (max-width: 1500px) {
+  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+    width: 280px;
+  }
+}
+
+@media (max-width: 1400px) {
+  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+    width: 230px;
+  }
+}
+
+@media (max-width: 1400px) {
+  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+    max-width: 230px;
+    width: auto;
+  }
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+    max-width: none;
+  }
+}
+
+header.map .nav-item:nth-child(3) {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item:nth-child(3) {
+    padding: 5px;
+  }
+}
+
+header.map .nav-item:nth-child(3) .dropdown {
+  display: flex;
+  height: 100%;
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item:nth-child(3) .dropdown {
+    flex-direction: column;
+  }
+}
+
+header.map .nav-item:nth-child(3) .dropdown .dropdown-menu {
+  top: calc(100% - 5px);
+}
+
+header.map .nav-item:nth-child(3) .dropdown button {
+  padding-left: 20px;
+  border-radius: 0;
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item:nth-child(3) .dropdown button {
+    padding-left: 12px;
+    border-radius: 5px;
+  }
+}
+
+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:last-child {
+    margin: 10px 5px 0 5px;
+    border-radius: 5px;
+    border: 0;
+  }
+}
+
+header.map .nav-item:last-child:hover {
+  background: #004fb3;
+}
+
+header.map .nav-item:last-child .btn-secondary {
+  display: inline-block;
+  outline: none;
+  padding: 0 30px;
+  background: url("../img/btn-refresh.svg") no-repeat center center;
+}
+
+header.map .nav-item:last-child .btn-secondary:hover {
+  background: url("../img/btn-refresh.svg") no-repeat center center !important;
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item:last-child .btn-secondary {
+    width: 100%;
+    padding: 20px;
+    border-radius: 5px;
+  }
+}
+
+header.map .nav-item input:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+header.map .nav-item input:focus {
+  background: #ffffff;
+  color: #000;
+}
+
+header.map .nav-item .dropdown {
+  min-width: 200px;
+}
+
+header.map .nav-item .dropdown .btn {
+  width: 100%;
+  text-align: left;
+  letter-spacing: .4px;
+  color: #ffffff;
+  background: #0048A9;
+}
+
+header.map .nav-item .dropdown .btn:hover {
+  background: #336dba;
+}
+
+header.map .nav-item .dropdown .dropdown-menu {
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1001;
+}
+
+header.map .nav-item .dropdown .dropdown-menu .dropdown-item:active {
+  background: #0048A9;
+}
+
+header.map .nav-item .dropdown .dropdown-menu .dropdown-item label {
+  width: 100% !important;
+  margin-left: 0;
+  cursor: pointer;
+}
+
+header.map .nav-item .dropdown #dropdown-time .dropdown-item:nth-of-type(even) {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+header.map .nav-item .dropdown #dropdown-time .dropdown-item:nth-of-type(even):active {
+  background: #0048A9;
+}
+
+header.map .nav-item .dropdown input[type="radio"]:checked ~ label {
+  font-weight: 800;
+}
+
 .map-locations {
   position: absolute;
   top: 95px;
@@ -814 +970 @@
   cursor: pointer;
 }
 
+@media (max-width: 320px) {
+  .player .next-btn, .player .prev-btn, .player .animate-btn, .player .lock-btn {
+    margin-right: 15px;
+  }
+}
+
 .player .next-btn:hover, .player .prev-btn:hover, .player .animate-btn:hover, .player .lock-btn:hover {
   opacity: 1;
 }
@@ -1048 +1210 @@
   background: #0b155a;
 }
 
-.player .time .custom-spinner-border {
-  margin: 3px 0 4px 0;
-}
-
 @media (min-width: 992px) {
   .player .time {
     position: absolute;
@@ -1130 +1288 @@
   }
 }
 
-.slide-background {
-  width: 650px;
-  height: 290px;
-  z-index: 1;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background: url("../img/footer-bg.svg") no-repeat;
-}
-
-@media (max-width: 991.98px) {
-  .slide-background {
-    width: 320px;
-    height: 143px;
-    background-size: 100%;
-  }
-}
-
-div.copyright p {
-  font-weight: 400;
-}
-
-div.copyright span {
-  font-size: 17px;
-}
-
-p.logos-partners {
-  margin-top: 40px;
-  text-align: right;
-}
-
-p.logos-partners a {
-  text-decoration: none;
-}
-
-p.logos-partners a img {
-  margin-left: 50px;
-  height: 80px;
-}
-
-@media only screen and (max-width: 430px) {
-  p.logos-partners a img {
-    height: 70px;
-    margin-left: 0;
-  }
-}
-
-@media only screen and (max-width: 340px) {
-  p.logos-partners a img {
-    height: 60px;
-  }
-}
-
-p.logos-partners a:first-of-type img {
-  margin-left: 0;
+.player .time .custom-spinner-border {
+  margin: 3px 0 4px 0;
 }
 
 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
@@ -1193 +1298 @@
   color: #ffffff;
 }
 
-.leaflet-popup-content-wrapper .leaflet-popup-content strong {
+.leaflet-popup-content-wrapper strong, .leaflet-popup-tip strong {
   display: inline-block;
   margin-bottom: 8px;
 }
 
-.leaflet-popup-content-wrapper .popup-controls {
-  display: flex;
-  margin: 1em 0 1em 0;
-}
-
-.leaflet-popup-content-wrapper .popup-controls .circle-button {
-  height: 32px;
-  width: 32px;
-  border: 0;
-  border-radius: 24px;
-  background: url("../img/btn-prev.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
-  transition: background 0.3s ease-out;
-  outline: none !important;
-}
-
-.leaflet-popup-content-wrapper .popup-controls .circle-button:hover {
-  background: url("../img/btn-prev.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
-}
-
-.leaflet-popup-content-wrapper .popup-controls .circle-button.next {
-  background: url("../img/btn-next.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
-}
-
-.leaflet-popup-content-wrapper .popup-controls .circle-button.next:hover {
-  background: url("../img/btn-next.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
-}
-
-.leaflet-popup-content-wrapper #place-intesity {
+.leaflet-popup-content-wrapper #place-intesity, .leaflet-popup-tip #place-intesity {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1234 +1312 @@
   font-weight: 700;
 }
 
-.leaflet-popup-content-wrapper #part-info {
+.leaflet-popup-content-wrapper #place-intesity #sum-number, .leaflet-popup-tip #place-intesity #sum-number {
   margin-left: 5px;
   font-size: 11pt;
 }
 
-.leaflet-popup-content-wrapper #pages {
-  margin: auto;
-  color: #ffffff;
-}
-
-header.map .nav-item {
-  padding: 5px;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-header.map .nav-item:nth-child(3) {
-  margin-top: 0;
-  margin-bottom: 0;
-  border: 0;
-}
-
-header.map .nav-item:nth-child(3) .dropdown {
+.leaflet-popup-content-wrapper .popup-pagination, .leaflet-popup-tip .popup-pagination {
   display: flex;
-  height: 100%;
-}
-
-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:last-child {
-    margin: 10px 5px 0 5px;
-    border: 0;
-  }
-}
-
-header.map .nav-item:last-child:hover {
-  background: #004fb3;
-}
-
-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 {
-  background: url("../img/btn-refresh.svg") no-repeat center center !important;
-}
-
-@media (max-width: 991.98px) {
-  header.map .nav-item .btn-secondary {
-    width: 100%;
-    padding: 20px;
-    border-radius: 5px;
-  }
-}
-
-header.map .nav-item input:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-header.map .nav-item input:focus {
-  background: #ffffff;
-  color: #000;
-}
-
-.dropdown {
-  min-width: 200px;
-}
-
-.dropdown input[type="radio"]:checked ~ label {
-  font-weight: 800;
-}
-
-.dropdown .btn {
-  width: 100%;
-  text-align: left;
-  letter-spacing: .4px;
-  color: #ffffff;
-  background: #0048A9;
-}
-
-.dropdown .btn:hover {
-  background: #336dba;
+  margin: 1em 0 1em 0;
 }
 
-.dropdown .dropdown-menu {
-  width: 100%;
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 1001;
+.leaflet-popup-content-wrapper .popup-pagination button, .leaflet-popup-tip .popup-pagination button {
+  height: 32px;
+  width: 32px;
+  border: 0;
+  border-radius: 24px;
+  background: url("../img/btn-prev.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
+  transition: background 0.3s ease-out;
+  outline: none !important;
 }
 
-.dropdown .dropdown-item:active {
-  background: #0048A9;
+.leaflet-popup-content-wrapper .popup-pagination button:hover, .leaflet-popup-tip .popup-pagination button:hover {
+  background: url("../img/btn-prev.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
 }
 
-.dropdown .dropdown-item label {
-  width: 100% !important;
-  margin-left: 0;
-  cursor: pointer;
+.leaflet-popup-content-wrapper .popup-pagination button.next, .leaflet-popup-tip .popup-pagination button.next {
+  background: url("../img/btn-next.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
 }
 
-.dropdown #dropdown-time .dropdown-item:nth-of-type(even) {
-  background: rgba(0, 0, 0, 0.05);
+.leaflet-popup-content-wrapper .popup-pagination button.next:hover, .leaflet-popup-tip .popup-pagination button.next:hover {
+  background: url("../img/btn-next.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
 }
 
-.dropdown #dropdown-time .dropdown-item:nth-of-type(even):active {
-  background: #0048A9;
+.leaflet-popup-content-wrapper .popup-pagination p, .leaflet-popup-tip .popup-pagination p {
+  margin: auto;
 }

website/public/css/style.scss

@@ -11 +11 @@
 
 $primary-text-color: #ffffff;
 
+$heatmap-nav-border-color: #1C6CC0;
+$heatmap-nav-button-bg-color: #0057be;
+
 $images-dir: '../img/';
 
 
@@ -154 +157 @@
       background: $primary-bg-color !important;
     }
   }
-
-  // NAVIGACE NA STRÁNCE S MAPOU
-  &.map {
-    @include media-breakpoint-down(md) {
-      .navbar-nav {
-        width: 100%;
-      }
-    }
-
-    form {
-      display: flex;
-      margin: auto;
-    }
-
-    label {
-      margin: 0 0 0 15px;
-      font-size: 16px;
-      letter-spacing: .4px;
-    }
-
-    input, .custom-select {
-      letter-spacing: .4px;
-      color: $primary-text-color;
-      border-color: $primary-bg-color;
-      background: $primary-bg-color;
-
-      &::placeholder {
-        color: $primary-text-color;
-        opacity: 1;
-      }
-    }
-
-    .nav-item {
-      margin: 0;
-      border-right: 1px solid #1C6CC0;
-
-      @include media-breakpoint-down(md) {
-        margin-bottom: 20px;
-        border: 0;
-      }
-
-      &:nth-of-type(3) {
-        .dropdown {
-          height: calc(100% + 10px) !important;
-          margin: -5px;
-          margin-top: -7px;
-
-          .dropdown-menu {
-            top: calc(100% - 4px);
-          }
-
-          button {
-            padding-left: 20px;
-            border-radius: 0;
-          }
-
-          @include media-breakpoint-down(md) {
-            height: 100% !important;
-            margin: 0px;
-            flex-direction: column;
-
-            button {
-              padding-left: 12px;
-              border-radius: 5px;
-            }
-          }
-        }
-      }
-
-      @include media-breakpoint-down(md) {
-        &:nth-of-type(4) {
-          border-radius: 5px;
-        }
-      }
-
-      &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
-        width: 300px;
-        
-        @media (max-width: 1500px) {
-          width: 280px;
-        }
-
-        @media (max-width: 1400px) {
-          width: 230px;
-        }
-
-        @media (max-width: 1400px) {
-          max-width: 230px;
-          width: auto;
-        }
-
-        @include media-breakpoint-down(md) {
-          max-width: none;
-        }
-      }
-    }
-  }
 }
 
 h1 {
@@ -653 +559 @@
   }
 }
 
+
+// DODATEČNÉ POZADÍ NA KAŽDÉM ZE SLIDŮ
+.slide-background {
+  width: 650px;
+  height: 290px;
+  z-index: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: url($images-dir + 'footer-bg.svg') no-repeat;
+
+  @include media-breakpoint-down(md) {
+    width: 320px;
+    height: 143px;
+    background-size: 100%;
+  }
+}
+
+
+// COPYRIGHT
+div.copyright {
+  p {
+    font-weight: 400;
+  }
+
+  span {
+    font-size: 17px;
+  }
+}
+
+
+// LOGA V SEKCI "O PROJEKTU"
+p.logos-partners {
+  margin-top: 40px;
+  text-align: right;
+
+  a {
+    text-decoration: none;
+
+    img {
+      margin-left: 50px;
+      height: 80px;
+
+      @media only screen and (max-width: 430px) {
+        height: 70px;
+        margin-left: 0;
+      }
+
+      @media only screen and (max-width: 340px) {
+        height: 60px;
+      }
+    }
+
+    &:first-of-type img {
+      margin-left: 0;
+    }
+  }
+}
+
+
+
+// ---------------------------------------- HEATMAPA ----------------------------------------
+
+
+// WRAPPER HEATMAPY
 #heatmap {
   height: 100%;
 }
 
 
-// SEZNAM LOKACÍ NA MAPĚ
+// HLAVIČKA (FORMULÁŘ) NA STRÁNCE S HEATMAPOU
+header.map {
+  @include media-breakpoint-down(md) {
+    .navbar-nav {
+      width: 100%;
+    }
+  }
+
+  form {
+    display: flex;
+    margin: auto;
+  }
+
+  label {
+    margin: 0 0 0 15px;
+    font-size: 16px;
+    letter-spacing: .4px;
+  }
+
+  input {
+    letter-spacing: .4px;
+    color: $primary-text-color;
+    border-color: $primary-bg-color;
+    background: $primary-bg-color;
+
+    &::placeholder {
+      color: $primary-text-color;
+      opacity: 1;
+    }
+  }
+
+  // JEDNOTLIVÉ POLOŽKY FORMULÁŘE
+  .nav-item {
+    padding: 5px;
+    margin: auto 0;
+    border-right: 1px solid $heatmap-nav-border-color;
+
+    @include media-breakpoint-down(md) {
+      margin-bottom: 10px;
+      border: 0;
+    }
+
+    &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
+      width: 300px;
+      
+      @media (max-width: 1500px) {
+        width: 280px;
+      }
+
+      @media (max-width: 1400px) {
+        width: 230px;
+      }
+
+      @media (max-width: 1400px) {
+        max-width: 230px;
+        width: auto;
+      }
+
+      @include media-breakpoint-down(md) {
+        max-width: none;
+      }
+    }
+
+    // WRAPPER U VÝBĚRU DATOVÝCH SAD
+    &:nth-child(3) {
+      padding: 0;
+      margin: 0;
+      border: 0;
+
+      @include media-breakpoint-down(md) {
+        padding: 5px;
+      }
+
+      .dropdown {
+        display: flex;
+        height: 100%;
+
+        @include media-breakpoint-down(md) {
+          flex-direction: column;
+        }
+
+        .dropdown-menu {
+          top: calc(100% - 5px);
+        }
+
+        button {
+          padding-left: 20px;
+          border-radius: 0;
+
+          @include media-breakpoint-down(md) {
+            padding-left: 12px;
+            border-radius: 5px;
+          }
+        }
+      }
+    }
+
+    // TLAČÍTKO PRO ODESLÁNÍ FORMULÁŘE PRO ZMĚNU PARAMETRŮ HEATMAPY
+    &:last-child {
+      margin-top: 0;
+      margin-bottom: 0;
+      border-left: 1px solid $heatmap-nav-border-color;
+      background: $heatmap-nav-button-bg-color;
+
+      @include media-breakpoint-down(md) {
+        margin: 10px 5px 0 5px;
+        border-radius: 5px;
+        border: 0;
+      }
+
+      &:hover {
+        background: $primary-bg-color-darker;
+      }
+    
+      .btn-secondary {
+        display: inline-block;
+        outline: none;
+        padding: 0 30px;
+        background: url($images-dir + 'btn-refresh.svg') no-repeat center center;
+
+        &:hover {
+          background: url($images-dir + 'btn-refresh.svg') no-repeat center center !important;
+        }
+
+        @include media-breakpoint-down(md) {
+          width: 100%;
+          padding: 20px;
+          border-radius: 5px;
+        }
+      }
+    }
+
+    // DATEPICKER
+    input {
+      &:hover {
+        background: rgba(255, 255, 255, .2);
+      }
+
+      &:focus {
+        background: $primary-text-color;
+        color: $black;
+      }
+    }
+
+    // MENU PRO VÝBĚR ČASU/DATOVÝCH SAD
+    .dropdown {
+      min-width: 200px;
+
+      .btn {
+        width: 100%;
+        text-align: left;
+        letter-spacing: .4px;
+        color: $primary-text-color;
+        background: $primary-bg-color;
+
+        &:hover {
+          background: $input-bg-hover;
+        }
+      }
+
+      .dropdown-menu {
+        width: 100%;
+        max-height: 300px;
+        overflow-y: auto;
+        z-index: 1001;
+
+        .dropdown-item {
+          &:active {
+            background: $primary-bg-color;
+          }
+          
+          label {
+            width: 100% !important;
+            margin-left: 0;
+            cursor: pointer;
+          }
+        }
+      }
+
+      #dropdown-time .dropdown-item:nth-of-type(even) {
+        background: rgba(0,0,0,.05);
+
+        &:active {
+          background: $primary-bg-color;
+        }
+      }
+
+      input[type="radio"]:checked ~ label {
+        font-weight: 800;
+      }
+    }
+  }
+}
+
+
+// MENU SE SEZNAMEM LOKACÍ NA MAPĚ
 .map-locations {
   position: absolute;
   top: 95px;
@@ -667 +833 @@
   border-radius: 22px;
   background-color: rgba(11, 21, 90, .7);
 
+  // KRATŠÍ NADPIS PRO MENŠÍ ROZLIŠENÍ
   .mobile {
     display: none;
   }
@@ -691 +858 @@
     right: 10px;
   }
 
+  // NADPIS PRO OTEVŘENÍ / SKRYTÍ SEZNAMU LOKACÍ
   .menu {
     width: 100%;
     display: inline-block;
@@ -701 +869 @@
     opacity: 1;
     background: $secondary-bg-color;
 
+    // IKONKA V NADPISU
     .circle {
       display: inline-block;
       width: 40px;
@@ -724 +893 @@
     }
   }
 
+  // SEZNAM LOKACÍ
   .locations {
     z-index: 1000;
 
@@ -769 +939 @@
     bottom: -30px;
   }
 
+  // TLAČÍTKA PRO OVLÁDÁNÍ ANIMACE HEATMAPY
   .next-btn, .prev-btn, .animate-btn, .lock-btn {
     display: inline-block;
     width: 42px;
@@ -782 +953 @@
     background: $secondary-bg-color;
     cursor: pointer;
 
+    @media (max-width: 320px) {
+      margin-right: 15px;
+    }
+
     &:hover {
       opacity: 1;
     }
@@ -797 +972 @@
     }
   }
 
+  // TLAČÍTKO START / STOP ANIMACE
   .animate-btn {
     width: 57px;
     height: 57px;
@@ -827 +1003 @@
     }
   }
 
+  // TLAČÍTKO DALŠÍ KROK ANIMACE
   .next-btn {
     @include media-breakpoint-down(md) {
       order: 3;
@@ -841 +1018 @@
     }
   }
 
+  // TLAČÍTKO PŘEDCHOZÍ KROK ANIMACE
   .prev-btn {
     @include media-breakpoint-down(md) {
       order: 2;
@@ -851 +1029 @@
     }
   }
 
+  // WRAPPER ČASOVÉ OSY
   .timeline-wrapper {
     display: flex;
     
@@ -861 +1040 @@
     }
   }
 
+  // DATUM
   .date {
     display: flex;
     align-items: center;
@@ -901 +1081 @@
       padding: 3px 6px 4px 12px;
     }
 
+    // ZÁMEČEK PRO UZAMČENÍ ANIMACE V KONKRÉTNÍM DATU
     .lock-btn {
       width: 26px;
       height: 26px;
@@ -923 +1104 @@
     }
   }
 
+  // ČASOVÁ OSA
   .timeline {
     display: flex;
     height: 30px;
@@ -942 +1124 @@
       margin: 4px 0 0 0;
     }
 
+    // JEDEN DÍLEK ČASOVÉ OSY
     .hour {
       cursor: pointer;
 
@@ -973 +1156 @@
       }
     }
 
+    // POSLEDNÍ DÍLEK ČASOVÉ OSY
     .end-dot:before {
       content: "";
       display: inline-block;
@@ -988 +1172 @@
     }
   }
 
+  // ČAS NA ČASOVÉ OSE
   .time {
     display: flex;
     justify-content: center;
@@ -1000 +1185 @@
     cursor: ew-resize;
     background: $secondary-bg-color;
 
-    .custom-spinner-border {
-      margin: 3px 0 4px 0;
-    }
-
     @include media-breakpoint-up(lg) {
       position: absolute;
 
@@ -1032 +1213 @@
       &.hour-22 {left: 550px;}
       &.hour-23 {left: 585px;}
     }
-  }
-}
-
-
-.slide-background {
-  width: 650px;
-  height: 290px;
-  z-index: 1;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background: url($images-dir + 'footer-bg.svg') no-repeat;
-
-  @include media-breakpoint-down(md) {
-    width: 320px;
-    height: 143px;
-    background-size: 100%;
-  }
-}
-
-
-// COPYRIGHT
-div.copyright {
-  p {
-    font-weight: 400;
-  }
-
-  span {
-    font-size: 17px;
-  }
-}
-
-
-// LOGA V SEKCI "O PROJEKTU"
-p.logos-partners {
-  margin-top: 40px;
-  text-align: right;
-
-  a {
-    text-decoration: none;
-
-    img {
-      margin-left: 50px;
-      height: 80px;
-
-      @media only screen and (max-width: 430px) {
-        height: 70px;
-        margin-left: 0;
-      }
-
-      @media only screen and (max-width: 340px) {
-        height: 60px;
-      }
-    }
 
-    &:first-of-type img {
-      margin-left: 0;
+    // NAČÍTÁNÍ
+    .custom-spinner-border {
+      margin: 3px 0 4px 0;
     }
   }
 }
@@ -1099 +1227 @@
   font-family: 'Be Vietnam', sans-serif;
   text-align: center;
   color: $primary-text-color;
-}
 
-.leaflet-popup-content-wrapper {
-  .leaflet-popup-content strong {
+  // INFORMACE O LOKACI / NÁZEV DATASETU
+  strong {
     display: inline-block;
     margin-bottom: 8px;
   }
 
-  .popup-controls {
+  // HODNOTA V POPUPU
+  #place-intesity {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: monospace;
+    font-size: 24pt;
+    font-weight: 700;
+
+    #sum-number {
+      margin-left: 5px;
+      font-size: 11pt;
+    }
+  }
+
+  // STRÁNKOVÁNÍ V POPUPU
+  .popup-pagination {
     display: flex;
     margin: 1em 0 1em 0;
 
-    .circle-button {
+    button {
       height: 32px;
       width: 32px;
       border: 0;
@@ -1132 +1275 @@
         }
       }
     }
-  }
-
-  #place-intesity {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: monospace;
-    font-size: 24pt;
-    font-weight: 700;
-  }
-
-  #part-info {
-    margin-left: 5px;
-    font-size: 11pt;
-  }
-
-  #pages {
-    margin: auto;
-    color: $primary-text-color;
-  }
-}
-
-// ÚPRAVA VZHLEDU HLAVIČKY NA STRÁNCE S HEATMAPOU
-header.map .nav-item {
-  padding: 5px;
-  margin-top: auto;
-  margin-bottom: auto;
-
-  &:nth-child(3) {
-    margin-top: 0;
-    margin-bottom: 0;
-    border: 0;
-
-    .dropdown {
-      display: flex;
-      height: 100%;
-    }
-  }
-
-  &:last-child {
-    margin-top: 0;
-    margin-bottom: 0;
-    border-left: 1px solid #1C6CC0;
-    background: #0057be;
-
-    @include media-breakpoint-down(md) {
-      margin: 10px 5px 0 5px;
-      border: 0;
-    }
-
-    &:hover {
-      background: $primary-bg-color-darker;
-    }
-  }
-
-  // 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;
-
-    &:hover {
-      background: url($images-dir + 'btn-refresh.svg') no-repeat center center !important;
-    }
-
-    @include media-breakpoint-down(md) {
-      width: 100%;
-      padding: 20px;
-      border-radius: 5px;
-    }
-  }
-
-  input {
-    &:hover {
-      background: rgba(255, 255, 255, .2);
-    }
-
-    &:focus {
-      background: $primary-text-color;
-      color: #000;
-    }
-  }
-}
-
-
-// MENU PRO VÝBĚR ČASU/DATOVÝCH SAD
-.dropdown {
-  min-width: 200px;
 
-  input[type="radio"]:checked ~ label {
-    font-weight: 800;
-  }
-
-  .btn {
-    width: 100%;
-    text-align: left;
-    letter-spacing: .4px;
-    color: $primary-text-color;
-    background: $primary-bg-color;
-
-    &:hover {
-      background: $input-bg-hover;
-    }
-  }
-
-  .dropdown-menu {
-    width: 100%;
-    max-height: 300px;
-    overflow-y: auto;
-    z-index: 1001;
-  }
-
-  .dropdown-item {
-    &:active {
-      background: $primary-bg-color;
-    }
-    
-    label {
-      width: 100% !important;
-      margin-left: 0;
-      cursor: pointer;
-    }
-  }
-
-  #dropdown-time .dropdown-item:nth-of-type(even) {
-    background: rgba(0,0,0,.05);
-
-    &:active {
-      background: $primary-bg-color;
+    // POČET STRÁNEK
+    p {
+      margin: auto;
     }
   }
 }

website/public/js/zcu-heatmap.js

@@ -328 +328 @@
 }
 
 const getPaginationButtonsInPopup = (currentPage, countPages) => ({
-  previousButton: '<button id="btn-previous-page" class="circle-button" onclick="setPreviousPageInPopup()"></button>',
-  pagesList: `<div id="pages">${currentPage} z ${countPages}</div>`,
-  nextButton: '<button id="btn-next-page" class="circle-button next" onclick="setNextPageInPopup()"></button>'
+  previousButton: '<button type="button" id="btn-popup-previous-page" onclick="setPreviousPageInPopup()"></button>',
+  pagesList: `<p id="pages">${currentPage} z ${countPages}</p>`,
+  nextButton: '<button type="button" id="btn-popup-next-page" class="next" onclick="setNextPageInPopup()"></button>'
 })
 
 const disablePopupPaginationButtons = () => {
-  $('#btn-previous-page').prop('disabled', true)
-  $('#btn-next-page').prop('disabled', true)
-  $('.popup-controls').hide()
+  $('#btn-popup-previous-page').prop('disabled', true)
+  $('#btn-popup-next-page').prop('disabled', true)
+  $('.popup-pagination').hide()
 }
 
 const generatePopupPaginationButtons = (controls) => {
-  return `<div class="popup-controls">${controls ? controls.reduce((sum, item) => sum + item, '') : ''}</div>`
+  return `<div class="popup-pagination">${controls ? controls.reduce((sum, item) => sum + item, '') : ''}</div>`
 }
 
 const getCountPagesInPopup = () => {
@@ -399 +399 @@
   const popupData = `
     <div id="place-intesity">
       <span id="current-number">${currentCount}</span>
-      <span id="part-info">${(sum && sum !== Number(currentCount)) ? '/' + sum : ''}</span>
+      <span id="sum-number">${(sum && sum !== Number(currentCount)) ? '/' + sum : ''}</span>
     </div>`
   const { previousButton, nextButton, pagesList } = getPaginationButtonsInPopup(currentPage, countPages)
 
@@ -478 +478 @@
 
   if (!countDatasets) {
     if (mymap._popup) {
-      $('#part-info').text('')
+      $('#sum-number').text('')
       $('#current-number').html(0)
       disablePopupPaginationButtons()
     }