Revize c892003d

Re #8159 - CSS improvements, timeline clickable, code refactoring

website/templates/heatmap.html.twig

@@ -2 +2 @@
 
 {% block title %}Heatmap.ZČU{% endblock %}
 {% block stylesheets %}
-  <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}">
-  <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
-  <link rel="stylesheet" href="{{ asset('css/style.css') }}">
-  <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker3.css') }}">
+<link rel="stylesheet" href="{{ asset('css/leaflet.css') }}">
+    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
+    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
+    <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker3.css') }}">
 {% endblock %}
 
 {% block body %}
@@ -47 +47 @@
                 <button type="button" class="btn dropdown-toggle" id="dropdownMenuButtonTime" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   {{ current_time }}
                 </button>
-                <div id="dataset-dropdown-time" class="dropdown-menu" aria-labelledby="dropdownMenuButtonTime">
+                <div id="dropdown-time" class="dropdown-menu" aria-labelledby="dropdownMenuButtonTime">
                   {% for hour in form.time.children %}
                   <div class="dropdown-item custom-dropdown-item">
                     {{ form_widget(hour, {attr: {class: 'd-none'}}) }}
@@ -62 +62 @@
                 <button type="button" class="btn dropdown-toggle font-weight-bold" id="dropdownMenuButtonDataset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   Vyberte datovou sadu
                 </button>
-                <div id="dataset-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButtonDataset">
+                <div id="dropdown-dataset" class="dropdown-menu" aria-labelledby="dropdownMenuButtonDataset">
                   {% for dataset in form.type.children %}
                   <div class="dropdown-item custom-dropdown-item">
                     <div class="custom-control custom-checkbox custom-checkbox-{{dataset.vars.value}}">
@@ -84 +84 @@
             <li class="nav-item">
               {{ form_widget(form.submit,
                 {
-                  'name' : '',
-                  'label' : '',
                   'type' : 'submit',
+                  'name' : '',
                   'id' : 'btn-update-heatmap',
                   'attr' : {
                     'class': 'btn btn-secondary'
@@ -126 +125 @@
         <div class="time hour-0" id="timeline">0:00</div>
 
         {% for i in 0..23 %}
-        <div class="hour"></div>
+        <div class="hour" title="{{ i }}:00" onclick="changeHour('{{ i }}')"></div>
         {% endfor %}
         <div class="end-dot"></div>
       </div>
@@ -138 +137 @@
 {% endblock %}
 
 {% block javascripts %}
-
     <script src="{{ asset('js/vendor/jquery-3.4.1.min.js') }}"></script>
     <script src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
     <script src="{{ asset('js/vendor/bootstrap-datepicker.min.js') }}"></script>
@@ -147 +145 @@
     <script src="{{ asset('js/vendor/leaflet-heat.js') }}"></script>
     <script src="{{ asset('js/zcu-heatmap.js') }}"></script>
     <script>
-        initDatepicker("{{ path('dates') }}");
+      initDatepicker("{{ path('dates') }}");
+      initLocationsMenu();
+      initMap();
+
+      $(document).ready(function() {
+        onDocumentReady();
+        checkDataSetsAvailability("{{ path('available') }}")
+        {% if submitted %}
+        loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
+        {% endif %}
+      });
+      
+      $(window).resize(function() {
         initLocationsMenu();
-        initMap();
-
-        $(document).ready(function() {
-          onDocumentReady();
-          checkDataSetsAvailability("{{ path('available') }}")
-          {% if submitted %}
-          loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
-          {% endif %}
-        });
-        
-        $(window).resize(function() {
-          initLocationsMenu();
-        });
+      });
   </script>
-
 {% endblock %}
 
 {% block style %}
-  <style type="text/css">
-    {% for dataset_name, dataset_color in dataset_colors %}
-      .custom-control-input-{{ dataset_name }}:focus~.custom-control-label::before {
-        border-color: {{ dataset_color }} !important;
-        box-shadow: 0 0 0 0.2rem rgba(192,192,192, 0.4) !important;
-      }
-
-      .custom-control-input-{{ dataset_name }}:checked~.custom-control-label::before {
-        border-color: {{ dataset_color }} !important;
-        background-color: {{ dataset_color }} !important;
-      }
-
-      .custom-control-input-{{ dataset_name }}:focus:not(:checked)~.custom-control-label::before {
-        border-color: {{ dataset_color }} !important;
-      }
-
-      .custom-control-input-{{ dataset_name }}:not(:disabled):active~.custom-control-label::before {
-        background-color: {{ dataset_color }} !important;
-        border-color: {{ dataset_color }} !important;
-      }
-
-      .popup-{{ dataset_name }} > .leaflet-popup-content-wrapper, .popup-{{ dataset_name }} .leaflet-popup-tip {
-        background-color: {{ dataset_color }} !important;
-      }
-    {% endfor %}
-  </style>
+<style type="text/css">
+{% for dataset_name, dataset_color in dataset_colors %}
+    .custom-control-input-{{ dataset_name }}:focus~.custom-control-label::before {
+      border-color: {{ dataset_color }} !important;
+      box-shadow: 0 0 0 0.2rem rgba(192,192,192, 0.4) !important;
+    }
+
+    .custom-control-input-{{ dataset_name }}:checked~.custom-control-label::before {
+      border-color: {{ dataset_color }} !important;
+      background-color: {{ dataset_color }} !important;
+    }
+
+    .custom-control-input-{{ dataset_name }}:focus:not(:checked)~.custom-control-label::before {
+      border-color: {{ dataset_color }} !important;
+    }
+
+    .custom-control-input-{{ dataset_name }}:not(:disabled):active~.custom-control-label::before {
+      background-color: {{ dataset_color }} !important;
+      border-color: {{ dataset_color }} !important;
+    }
+
+    .popup-{{ dataset_name }} > .leaflet-popup-content-wrapper, .popup-{{ dataset_name }} .leaflet-popup-tip {
+      background-color: {{ dataset_color }} !important;
+    }
+{% endfor %}
+</style>
 {% endblock %}