Fix timeline CSS display error. Adding darkmode for timeline with lig…

…ht map background (refs #301)
a-thousand-channels · May 28, 2024 · 62973cb · 62973cb
1 parent 95753b1
commit 62973cb
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 12 deletions.
diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
@@ -393,18 +393,23 @@ jQuery(function ($) {
     // TODO: reset baselayer if custom was set or changed server-side
 
     if ( localStorage.baselayer == 'Openstreetmap') {
-      $('#map').addClass('darken-icons')
+      $('#map').addClass('darken-icons');
+      $('#map').addClass('darken-icons2');
+      $('#timeline-wrapper').addClass('dark');
       Openstreetmap_layer.addTo(map);
     } else if ( localStorage.baselayer == 'Satellite') {
       Esri_WorldImagery_layer.addTo(map);
     } else if ( localStorage.baselayer == 'Historical HH 1925-1930') {
       $('#map').addClass('darken-icons')
+      $('#timeline-wrapper').addClass('dark');
       wmsLayerHamburg1925s.addTo(map);      
     } else if ( localStorage.baselayer == 'Historical HH 1930-1940') {
       $('#map').addClass('darken-icons')
+      $('#timeline-wrapper').addClass('dark');
       wmsLayerHamburg1930s.addTo(map);
       } else if ( localStorage.baselayer == 'Historical HH 1980-1990') {
         $('#map').addClass('darken-icons')
+        $('#timeline-wrapper').addClass('dark');
         wmsLayerHamburg1980s.addTo(map);      
     } else {
       custom_base_layer.addTo(map);
@@ -418,12 +423,15 @@ jQuery(function ($) {
     console.log("No custom base layer defined");
     if ( localStorage.baselayer == 'Openstreetmap') {
       $('#map').addClass('darken-icons')
+      $('#timeline-wrapper').addClass('dark');
       Openstreetmap_layer.addTo(map);
     } else if ( localStorage.baselayer == 'Historical HH 1925-1930') {
       $('#map').addClass('darken-icons')
+      $('#timeline-wrapper').addClass('dark');
       wmsLayerHamburg1925s.addTo(map);      
     } else if ( localStorage.baselayer == 'Historical HH 1930-1940') {
       $('#map').addClass('darken-icons')
+      $('#timeline-wrapper').addClass('dark');
       wmsLayerHamburg1930s.addTo(map);     
     } else {
       Esri_WorldImagery_layer.addTo(map);
@@ -467,17 +475,23 @@ jQuery(function ($) {
     console.log("Baselayer change to " + e.name);
     if ( e.name == 'Openstreetmap') {
       $('#map').addClass('darken-icons')
+      $('#map').addClass('darken-icons2')
+      $('#timeline-wrapper').addClass('dark');
     } else if ( localStorage.baselayer == 'Historical HH 1925-1930') {
       // $('#map').addClass('darken-icons darken-label')
       $('#map').addClass('darken-icons')
+      $('#timeline-wrapper').addClass('dark');
       wmsLayerHamburg1925s.addTo(map);      
     } else if ( localStorage.baselayer == 'Historical HH 1930-1940') {
       // $('#map').addClass('darken-icons darken-label')
       $('#map').addClass('darken-icons')
+      $('#timeline-wrapper').addClass('dark');
       wmsLayerHamburg1930s.addTo(map);      
     } else {
       $('#map').removeClass('darken-icons');
-      $('#map').removeClass('darken-label')
+      $('#map').removeClass('darken-icons2');
+      $('#map').removeClass('darken-label');
+      $('#timeline-wrapper').removeClass('dark');
     }
     localStorage.baselayer = e.name;
   })

diff --git a/app/assets/javascripts/helpers/timeslider.js b/app/assets/javascripts/helpers/timeslider.js
@@ -2,6 +2,8 @@ jQuery(function ($) {
 
   let body = document.querySelector("body");
 
+
+
   if ( body.classList.contains("show") && ( body.id === 'maps') ) {
     if ( $('#selection').data('map-marker-display-mode') !== 'single' ) {
       return;
@@ -17,6 +19,7 @@ jQuery(function ($) {
     // timeline
     let timelineWrapper = document.createElement('div');
     timelineWrapper.setAttribute('id', 'timeline-wrapper');
+
     timelineWrapper.appendChild(scrollLeft);
     timelineWrapper.appendChild(scrollRight);
     let timelineContent = document.createElement('div');
@@ -52,7 +55,7 @@ function filterMarkers(selectedYear) {
   current_selected_year = ( selectedYear > current_selected_year ) ? selectedYear : current_selected_year;
 
   const status = document.getElementById("timeline-info-status");
-  status.innerHTML = "Selected Year "+selectedYear;
+  status.innerHTML = "Show places in "+selectedYear;
 
   window.markers.forEach(function(marker) {
     if (!marker.data) {
@@ -72,10 +75,12 @@ function filterMarkers(selectedYear) {
 
         console.log("X Past", marker.data.fromYear,selectedYear,marker.data.endYear,marker.data.color, marker.data.title, marker.data.layer_id);        
 
-        if ( $('#map').hasClass('darken-icons') ) {
+        if ( $('#map').hasClass('darken-icons2') ) {
+          icon = LargeMarkerIcon.create({color: '#222', opacity: 0.2});
+        } else if ( $('#map').hasClass('darken-icons') ) {
           icon = LargeMarkerIcon.create({color: '#555', opacity: 0.2});
         } else {
-          icon = LargeMarkerIcon.create({color: '#fff', opacity: 0.25});
+          icon = LargeMarkerIcon.create({color: '#fff', opacity: 0.3});
         }
         window.map.removeLayer(marker);  
         marker.setIcon(icon);    

diff --git a/app/assets/stylesheets/6_timeline.css.scss b/app/assets/stylesheets/6_timeline.css.scss
@@ -1,4 +1,6 @@
 
+
+
 %td.nobr {
     white-space: nowrap;
 }
@@ -20,7 +22,7 @@ table#timeline-list {
     border-bottom: 4px solid #c6c600;
   }
 }
-
+#timeline-info-status {}
 
 
 #timeline {
@@ -45,6 +47,10 @@ table#timeline-list {
   justify-content: center;
   z-index: 996;
   border: 1px solid transparent;
+  @media screen and (max-width: 63.9375em) {
+    left: 20px;
+    right: 50px;
+  }
 
 }
 #timeline-content {
@@ -56,7 +62,7 @@ table#timeline-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  justify-content: center;
+  justify-content: left;
   flex-wrap: nowrap;
   overflow: hidden;
   align-items: center; 
@@ -80,23 +86,48 @@ table#timeline-list {
   align-items: center;
   align-items: flex-end;
 }
-#timeline-content div.active
+#timeline-wrapper.dark #timeline-content {
+  background-color: transparent;
+}
+#timeline-wrapper.dark #timeline-content div {
+  color: rgb(85, 85, 85);
+  text-shadow: 0 0 4px white;
+  border-left: 3px solid rgba(85,85,85,0.6);
+}
+
+#timeline-wrapper #timeline-content div.active
 { 
   color: #c6c600;
   cursor: pointer;
   border-color: #c6c600;
   text-shadow: 0 0 4px black;
   transition: 0.3s all;
 }
-#timeline-content div:hover
+#timeline-wrapper.dark #timeline-content div.active
+{ 
+  color: hsl(60, 100%, 29%);
+  cursor: pointer;
+  border-color: #c6c600;
+  text-shadow: 0 0 4px #333;
+  transition: 0.3s all;
+}
+#timeline-wrapper #timeline-content div:hover
 { 
   color: #ccc;
   cursor: pointer;
   border-color: #ccc;
   text-shadow: 0 0 4px black;
   transition: 0.3s all;
 }
-#timeline-content div.active:hover
+#timeline-wrapper.dark #timeline-content div:hover
+{ 
+  color: #111;
+  cursor: pointer;
+  border-color: #111;
+  text-shadow: 0 0 4px white;
+  transition: 0.3s all;
+}
+#timeline-wrapper #timeline-content div.active:hover
 { 
   color: #c6c600;
    border-color: #c6c600;
@@ -116,6 +147,11 @@ table#timeline-list {
   background-color: rgba(0, 0, 0, 0.3);
   z-index: 9999; /* Ensure scroll handles are above content */
 }
+#timeline-wrapper.dark #scroll-left,
+#timeline-wrapper.dark #scroll-right {
+  color: black;
+  background-color: transparent;
+}
 
 #scroll-right {
   left: unset;

diff --git a/app/views/maps/show.html.haml b/app/views/maps/show.html.haml
@@ -17,8 +17,7 @@
       Marker display mode is set to single ✓
     - else 
       Marker display mode is set to cluster x  (<em>Timeline will work only with single marker display mode enabled</em>)
-    %br
-    %span#timeline-info-status
+  %h5#timeline-info-status
 #selection{:data => { 'url' => "/maps/#{@map.id}.json", 'map_id' => "#{@map.id}", 'map-center-lat' => "#{@map.mapcenter_lat}", 'map-center-lon' => "#{@map.mapcenter_lon}", 'map-zoom' => "#{@map.zoom}", 'map-extent-northeast' => "#{@map.northeast_corner}", 'map-extent-southwest' => "#{@map.southwest_corner}", 'map-basemap-url' => "#{@map.basemap_url}", 'map-basemap-attribution' => "#{@map.basemap_attribution}", 'map-background-color' => "#{@map.background_color}", 'map-popup-display-mode' => "#{@map.popup_display_mode}", 'map-marker_display_mode' => "#{@map.marker_display_mode}", 'map-enable_historical_maps' => "#{@map.enable_historical_maps}", 'map-timeline-minyear' => "#{@minyear}", 'map-timeline-maxyear' => "#{@maxyear}", 'map-timeline-timespan' => "#{@timespan}" }}
   - if params[:setbound]
     #form-wrapper.small-wrapper