Changeset 36036 for main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css

Timestamp:

2022-02-02T11:26:41+13:00 (2 years ago)

Author:

cstephen

Message:

WMTB Interface: Implemented a navigation bar on the left side of the content and removed the existing top-bar navigation.

File:

• main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css (modified) (6 diffs)

main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css

@@ -7 +7 @@
 :root {
     --height-header: 120px;
-    --height-header-mobile: 93px;
     --bp-small: 1025px;
     --bp-small-max: 1024px; /* 1 less */
+    --a-link-color: rgb(86, 154, 189);
 }
 
@@ -32 +32 @@
  Need spaces around (arithmetic) operator in calc() equations
 */
+
 .shifted-frame {
     overflow: auto;
     height: calc(100vh - var(--height-header)); /*calc(100vh - 120px);*/
     width: auto;
-
 } /* Why does height calc(100% -120px) instead of using 100vh not work? */
 
@@ -46 +46 @@
     /*
       body { overflow: auto; }
-   */
-    
-    div#spacer-for-nav {
-    height: var(--height-header-mobile); /*93px;*/
-    }
-
-    .shifted-frame {
-    height: calc(100vh - var(--height-header-mobile));  
-    /*height: 100vh;*/ /*calc(100vh - 93px);*/
-    /*overflow-y: auto;*//* scroll;*/
+    */
+
+    :root {
+        --height-header: 93px;
     }
 
@@ -96 +90 @@
 @media screen and (min-width: 1025px) { /* bp-small */
     div.crop-bg {
-    height: 230px; /* You must set a specified height */
-    background-position: center -100px; /* OR: center OR: center 20% */
-    /*display: block;*/ /* div with bg image needs to change from display: table-cell
-               to display: block when cropping bg image, as table-cell setting
-               overrides height customisation */
-    }
+        height: 230px; /* You must set a specified height */
+        background-position: center -100px; /* OR: center OR: center 20% */
+        /*display: block;*/ /* div with bg image needs to change from display: table-cell
+                to display: block when cropping bg image, as table-cell setting
+                overrides height customisation */
+    }
+
     /* Restyle .container *descendant* of .crop-bg:
        Padding can not be 100px as it is when .full-bg is in effect,
        and should be no greater than 95px for .crop-bg, else there
        appears a bottom border of sorts under the cropped image. */ 
-    .crop-bg div.container {
-    /* padding: 50px 0; */
-    }
+    /* .crop-bg div.container {
+        padding: 50px 0;
+    } */
 
     /* Override: padding had made the login/search/browse nav buttons unavailable */
     .banner-wrap .crop-bg .container {
-    padding: 0px;
+        padding: 0px;
     }
 
     #gs_content {
-    max-width: 70vw;
+        max-width: 70vw;
     }
 }
@@ -123 +118 @@
     text-decoration: none;
     font-weight: normal;
-    color: rgb(86, 154, 189); /* a light blue */
+    color: var(--a-link-color); /* a light blue */
 }
 
@@ -132 +127 @@
 }
 
-div.outer {
-    line-height:1rem;
-    padding-top:2rem; /*5vh;*/
-}
-
+/* Selecting the children ensures that there is space between them */
+div.outer > * {
+    padding: 2rem;
+}
+
+/*
+Acts as a gridded container for the side nav-bar and the main content
+*/
+div.outer.collectionDisplay {
+    display: grid;
+    grid-template-columns: 1fr 3fr 1fr;
+}
+
+.side-navbar {
+    display: flex;
+    flex-direction: column;
+    
+    border-right: 1px solid #eaecef;
+}
+
+.side-navbar ul {
+    padding-left: 1em;
+}
+
+/* The active class is added to nav elements when their content is displayed */
+.side-navbar a.active {
+    font-weight: bold;
+}
+
+/* Intended to be applied to an <hr /> element. */
+.side-navbar-separator {
+    appearance: none;
+    width: 100%;
+    border: 1px solid #eaecef;
+}
 
 div.img-and-desc {