Revize 6b7c4d1c

Re #8163 - CSS, JS refactoring

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;
     }
   }
 }