Merge pull request #1097 from cambridge-cares/dev-css-hotfix

Dev-css-hotfix

Author: Ushcode

web/twa-vis-framework/library/CHANGELOG.md

@@ -1,5 +1,12 @@
 [//]: # (Note that version headers need to start with "# " characters to be picked up by some automated scripts)
 
+#4.5.0
+### Bug Fixes
+* Removed linear-gradient effect in sidebar due to scrollbar getting affected
+* Increased hover height of selected sidebar tab
+* Fixed content container overlapping with tabs in sidebar
+* Removed grey outlines in hovered and selected sidebar tabs
+
 #4.5.0
 ### Features
 Three control buttons are now included by default. These are:

web/twa-vis-framework/library/VERSION

@@ -1 +1 @@
-4.5.0
+4.5.1

web/twa-vis-framework/library/src/css/twa-vf.css

@@ -6,6 +6,20 @@
 * a tool that can do it for me, looks like it'll beed to be done manually.
 */
 
+@media (prefers-color-scheme: light) {
+    :root {
+        /* Background colors */
+        --cmcl-blue: #18677a;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Background colors */
+        --cmcl-blue: #18677a;
+    }
+}
+
 html,
 body {
     width: 100%;
@@ -96,10 +110,10 @@ h6 {
 
 #sidePanel {
     z-index: 999;
-    background-color: #18677a;
+    background-color: var(--cmcl-blue);
     box-sizing: border-box;
-    border: 1px solid #18677a;
-    box-shadow: 0 4px 8px 0 #18677a;
+    border: 1px solid var(--cmcl-blue);
+    box-shadow: 0 4px 8px 0 var(--cmcl-blue);
     font-family: Inter, sans-serif !important;
     font-size: 11pt;
     height: 100%
@@ -116,7 +130,8 @@ h6 {
     width: 15px;
     height: 15px;
     text-align: center;
-    margin: 6px
+    margin: 6px;
+    float: right
 }
 
 #sidePanel.small {
@@ -137,10 +152,6 @@ h6 {
     border-radius: 8px
 }
 
-#expandButtonContainer {
-    float: right
-}
-
 #sidePanel.large #expandButtonContainer {
     margin-top: -8px;
     margin-right: 20px;
@@ -209,17 +220,6 @@ p {
     overflow-y: auto
 }
 
-#contentContainer {
-    width: 100%;
-    height: 100%;
-    margin-bottom: 70px;
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    overflow-x: hidden;
-    overflow-y: auto
-}
-
 #meta-tree {
     flex: 1;
     overflow-y: scroll
@@ -235,7 +235,7 @@ p {
 
 #footerContainer {
     text-shadow: 2px 2px 3px #000;
-    font-family: Verdana;
+    font-family: Verdana, sans-serif;
     color: #51b7a6;
     text-align: center;
     height: 40px;
@@ -866,7 +866,7 @@ label[for=select-feature] {
 }
 
 .json-container {
-    font-family: 'Open Sans';
+    font-family: 'Open Sans', sans-serif;
     font-size: 16px;
     background-color: #fff;
     color: grey;
@@ -985,22 +985,15 @@ label[for=select-feature] {
     height: 100%
 }
 
-#sidePanelLegend {
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    display: block;
-    padding: 5px;
-    margin: 0 20px 40px 20px
-}
+
 
 .ui-tabs-anchor {
     font-size: 10pt;
     font-weight: 700
 }
 
 #sidePanelInner .ui-widget-header {
-    background: #18677a;
+    background: var(--cmcl-blue);
     border: none;
     border-radius: 0;
     padding: 5px 5px 0 5px
@@ -1040,13 +1033,24 @@ label[for=select-feature] {
 
 #sidePanelInner .ui-tabs-nav li.ui-state-active,
 #sidePanelInner .ui-tabs-nav li.ui-tabs-selected {
-    top: -3px;
+    top: -7px;
     background: #628f9d !important;
     box-shadow: 0 4px 8px 0 #222
 }
 
-#sidePanelGeneral {
-    height: calc(100% - 50px)
+
+#sidePanelGeneral,
+#sidePanelLegend,
+#sidePanelLinks,
+#sidePanelAck,
+#sidePanelFailure {
+    position: relative;
+    overflow: auto;
+    /* background: linear-gradient(white, rgba(255, 255, 255, 0));
+    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent);        <-- nice effect but messing with the scroll bar. Can't rn figure how to fix 
+    mask-image: linear-gradient(to bottom, black 95%, transparent); */
+    margin: 0px 0px 35px 0px;
+    padding: 1em 1em 3em
 }
 
 #sidePanelLinks {
@@ -1070,7 +1074,7 @@ label[for=select-feature] {
 }
 
 #sidePanelLinks ul:hover a:hover {
-    color: #18677a;
+    color: var(--cmcl-blue);
     text-shadow: #333;
 }
 
@@ -1082,7 +1086,6 @@ label[for=select-feature] {
     width: 250px;
     height: auto;
     position: fixed;
-    top: 0;
     left: 0;
     margin: 20px;
     z-index: 1;
@@ -1145,7 +1148,8 @@ label[for=select-feature] {
 #layerContainer .controlContents {
     display: flex;
     flex-flow: column;
-    overflow: hidden
+    overflow: hidden;
+    flex-grow: 1;
 }
 
 #layerTree {
@@ -1689,25 +1693,27 @@ li {
     background-color: #f6f8fa
 }
 
-#sidePanelGeneral {
-    position: relative; 
-    z-index: 1; 
-    overflow: hidden;
-    background: linear-gradient(white, rgba(255,255,255,0)); 
-    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent);
-    mask-image: linear-gradient(to bottom, black 90%, transparent);
-}
+/* override jquery-ui.css styling for hovering over sidebar tabs */
 
-#sidePanelLegend, #sidePanelLinks {
-    position: relative;
-    z-index: 1; 
-    overflow: auto;
-    background: linear-gradient(white, rgba(255,255,255,0));
-    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent);
-    mask-image: linear-gradient(to bottom, black 50%, transparent);
+.ui-state-hover,
+.ui-state-active,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus,
+.ui-button,
+.ui-button:hover,
+.ui-button:focus,
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default,
+html .ui-button.ui-state-disabled:hover,
+html .ui-button.ui-state-disabled:active {
+    border: unset;
 }
 
 /* zoom and compass element shifted down below the mapbox logo */
-.mapboxgl-ctrl-top-right{
+.mapboxgl-ctrl-top-right {
     top: 30px
 }