From 21cfd7b6decac84e08b12a676e5a1d7c11ac2afc Mon Sep 17 00:00:00 2001
From: Mikel Maron <mikel@earthgenome.org>
Date: Thu, 14 Dec 2023 15:06:35 -0400
Subject: [PATCH] styling updates

---
 site-config.js | 10 +++++-----
 src/index.html |  2 +-
 src/site.css   | 15 ++++++++++++---
 src/site.js    |  7 ++++---
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/site-config.js b/site-config.js
index 549ad1b..b106bf3 100644
--- a/site-config.js
+++ b/site-config.js
@@ -3,7 +3,7 @@ var site_config = {
     accessToken: 'pk.eyJ1IjoiZWFydGhyaXNlIiwiYSI6ImNsa2d4eGhvaTAxb3gzcHAyem5weDY5bGgifQ.dir6j-9L6fv7Q9g_DwT51w',
 
     /* Mapbox Base Map Style */
-    mapStyle: 'mapbox://styles/earthrise/clkmx3xlm018k01qm3ek6auuv',
+    mapStyle: 'mapbox://styles/earthrise/clit4wm0101wk01pd1nm7gmro/',
 
     /* Zoom level that asset detail cards open at; this is a good one to override in tracker config,
      depending on scale of facilities */
@@ -12,15 +12,15 @@ var site_config = {
 
     /* Define labels for sitewide colors, referenced in tracker config */
     colors: {
-        'red': '#e37c79',
-        'blue': '#aaabf2',
-        'green': '#b5eaaa',
+        'red': '#e85d5b',
+        'blue': '#6e74f2',
+        'green': '#5eb663',
         'grey': '#9c9c9b'
     },
 
     /* Mapbox styling applied to all trackers */
     paint: {
-        'circle-opacity':.9
+        'circle-opacity':.8
     },
 
     /* radius associated with minimum/maximum value on map */
diff --git a/src/index.html b/src/index.html
index a59a1a3..9f83251 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,7 +23,7 @@
     <div class="sidebar card secondary m-3 shadow rounded-top-left-1 rounded-bottom-right-1" id="sidebar">
         <div class="card-body">
             <div class="row">
-                <div class="col-sm-9 h6 font-weight-bold" id="summary"></div><div class="col-sm-3 h5 font-weight-bold" id="total_in_view"></div>
+                <div class="col-sm-9 h6 font-weight-bold" id="summary"></div><div class="col-sm-3 h5 font-weight-bold text-end" id="total_in_view"></div>
             </div>
             <div id=""></div>
                 <form id="filter-form">
diff --git a/src/site.css b/src/site.css
index 9b2fecc..4e2cb07 100644
--- a/src/site.css
+++ b/src/site.css
@@ -16,13 +16,18 @@ body {
     bottom: 0;
     width: 100%;
     padding-bottom: 150px;
+    font-family: monospace;
+    font-size: medium;
+}
+tr {
+    vertical-align: bottom;
 }
 
 table.dataTable>tbody>tr.odd {
    background-color: #f9f9f9;
 }
 table.dataTable>tbody>tr {
-   border-bottom: 1pt solid #999999;
+   border-bottom: 1pt solid #676767;
    cursor: pointer;
 }
 table.dataTable>tbody>tr:hover {
@@ -99,14 +104,18 @@ table.dataTable>tbody>tr:hover {
 }
 
 .sidebar {
-    padding: 10px;
+    /* padding: 10px; */
     position: fixed;
     bottom: 100px;
     left: 0px;
-    width: 408px;
+    /* width: 408px; */
     z-index: 1;
     overflow-y:scroll; 
     max-height: 100%;
+    white-space: nowrap;
+}
+.sidebar.card-body {
+    padding: 5px;
 }
 .mapboxgl-ctrl-bottom-right {
     bottom: 90px;
diff --git a/src/site.js b/src/site.js
index 11292e9..cf18b6f 100644
--- a/src/site.js
+++ b/src/site.js
@@ -16,7 +16,7 @@ const map = new mapboxgl.Map({
     container: 'map',
     style: config.mapStyle,
     zoom: determineZoom(),
-    center: [0, -10],
+    center: [0, 0],
    // maxBounds: [[-180,-85],[180,85]],
     projection: 'naturalEarth'
 });
@@ -39,7 +39,7 @@ function determineZoom() {
     let modifier = 650;
     if (window.innerWidth < 1000) { modifier = 500; } 
     else if (window.innerWidth < 1500) { modifier = 575; }
-    let zoom = (window.innerWidth-modifier)/modifier;
+    let zoom = 1.1*(window.innerWidth-modifier)/modifier;
     return zoom;
 }
 function loadData() {
@@ -391,7 +391,7 @@ function buildFilters() {
             let check = `<div class="row filter-row" data-checkid="${check_id}"><div class="form-check col-sm-8"><input type="checkbox" checked class="form-check-input d-none" id="${check_id}">`;
             check += (config.color.field == filter.field ? '<span class="legend-dot" style="background-color:' + config.color.values[ filter.values[i] ] + '"></span>' : "") + 
                 `<span id='${check_id}-label'>` + ('values_labels' in filter ? filter.values_labels[i] : filter.values[i].replaceAll("_", " ")) + '</span>'
-                + '</div><div class="col-sm-1 eye" id="' + check_id + '-eye"></div><div class="col-sm-3" id="' + check_id + '-count">' + config.filterCount[filter.field][filter.values[i]] + '</div></div>';
+                + '</div><div class="col-sm-1 eye" id="' + check_id + '-eye"></div><div class="col-sm-3 text-end" id="' + check_id + '-count">' + config.filterCount[filter.field][filter.values[i]] + '</div></div>';
             $('#filter-form').append(check);
         }
     });
@@ -769,6 +769,7 @@ function showAllPhases(link) {
             if (feature_lat > bbox[3]) bbox[3] = feature_lat;
         }
     });
+
     map.flyTo({center: [(bbox[0]+bbox[2])/2,(bbox[1]+bbox[3])/2], zoom: config.phasesZoom});
 }