Changeset 35244

Timestamp:

2021-08-03T18:05:23+12:00 (3 years ago)

Author:

anupama

Message:

Narrower main image on pou landing pages and collection pages. Not sure what to do about mobile for this.

Location:

main/trunk/model-interfaces-dev/wmtb

Files:

• styles/gs-wmtb-custom.css (modified) (6 diffs)
• transform/layouts/main.xsl (modified) (1 diff)

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

@@ +1 @@
+/* DEFINING CSS VARIABLES - redefining them from weebly site (variables.less used in header.less)
+https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
+
+BUT UNFORTUNATELY, we can't use css variables in media query declarations:
+https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries
+*/
+:root {
+    --height-header: 120px;
+    --height-header-mobile: 93px;
+    --bp-small: 1025px;
+    --bp-small-max: 1024px; /* 1 less */
+}
+
 /* Within the page that loads in iframe, want a spacer (for now 120px high) that
 will take up the space of the whakatohea navbar. Want the scrollbar shifted from
@@ -10 +23 @@
 div#spacer-for-nav
 {
-    height: 120px;
+    height: var(--height-header); /*120px;*/
     width: auto;
 }    /* margin-top:120px; Why did height not have any effect? Because of self-closing div. Need explicit closing div. But an empty opening + closing div is dangerous in GS3, try using gsf:div element (not sure if class attribute will work on it) if xml equivalent of nbsp entity inside empty op+closing div doesn't work.*/
@@ -21 +34 @@
 .shifted-frame {
     overflow: auto;
-    height: calc(100vh - 120px);
+    height: calc(100vh - var(--height-header)); /*calc(100vh - 120px);*/
     width: auto;
 
 } /* Why does height calc(100% -120px) instead of using 100vh not work? */
 
-/*display: none;*/
-/*height: 100vh; */
 
 /* hardcoded values copied from weebly site theme's variables.less file called in header.less */
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 1024px) { /* bp-small-max */
     body {
     overflow: auto;
@@ -36 +47 @@
 
     div#spacer-for-nav {
-    height:93px;
+    height: var(--height-header-mobile); /*93px;*/
     }
 
@@ -43 +54 @@
     /*overflow-y: auto;*//* scroll;*/
     }
-}
-
-
-
-.bg-img {
+
+    /* Maybe undo any changes made below for full-screen version so mobile unaffected*/
+    /*
+    div.crop-bg {
+    height: 100px;
+    background-position: center 20%;
+    }
+
+    .crop-bg div.container {
+    padding: 100px 0;
+    }
+   */
+}
+
+
+/* Want to have the full size bg banner image on the main page listing the Pou-s,
+but on each Pou landing page and each collection landing page, want a vertically
+narrower banner img. Achieved by cropping same image.
+  https://www.w3schools.com/cssref/pr_background-image.asp 
+  and https://www.w3schools.com/cssref/pr_background-position.asp
+*/
+div.wsite-section-bg-image {
     /*Can't set background-image as url contains variable: interfaces/{$interface_name}/images/digital-library.jpg*/
     background-color: transparent;  /* Used if the image is unavailable. OR: grey */
@@ -54 +82 @@
 }
 
-.full-bg {
+div.full-bg {
     height: auto;
     background-position: 50.00% 21.94%;
-    background-size: 100%;
-}
-
-/* https://www.w3schools.com/cssref/pr_background-image.asp 
-and https://www.w3schools.com/cssref/pr_background-position.asp*/
-
-.crop-bg {
-    height: 230px; /* You must set a specified height */
-    background-position: center -100px; /* OR: center OR: center 20% */
-}
-
+    /*background-size: 100%;*/
+}
+
+@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 */
+    }
+    /* 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;
+    }
+
+}
 
 a, span#addNewMD, span#clearSaved {

main/trunk/model-interfaces-dev/wmtb/transform/layouts/main.xsl

@@ -43 +43 @@
           <div class="wsite-section-wrap">
               <!--<div  class="wsite-section wsite-header-section wsite-section-bg-image" style="height: auto;background-image: url(&quot;interfaces/{$interface_name}/images/digital-library.jpg&quot;) ;background-repeat: no-repeat ;background-position: 50.00% 21.94% ;background-size: 100% ;background-color: transparent ;background-size: cover;" >-->
-            <div  class="wsite-section wsite-header-section wsite-section-bg-image" style="height: auto;background-image: url(&quot;interfaces/{$interface_name}/images/digital-library.jpg&quot;) ;background-repeat: no-repeat ;background-position: 50.00% 21.94% ;background-size: 100% ;background-color: transparent ;background-size: cover;" >
+            <div style="background-image: url(&quot;interfaces/{$interface_name}/images/digital-library.jpg&quot;);" >
               <xsl:choose>
             <xsl:when test="/page/pageResponse/collection or /page/pageResponse/pathList/group">
-              <xsl:attribute name="class">wsite-section wsite-header-section wsite-section-bg-image bg-img crop-bg</xsl:attribute>
+              <xsl:attribute name="class">wsite-section wsite-header-section wsite-section-bg-image crop-bg</xsl:attribute>
             </xsl:when>
             <xsl:otherwise>
-              <xsl:attribute name="class">wsite-section wsite-header-section wsite-section-bg-image bg-img full-bg</xsl:attribute>
+              <xsl:attribute name="class">wsite-section wsite-header-section wsite-section-bg-image full-bg</xsl:attribute>
             </xsl:otherwise>
               </xsl:choose>