Ignore:
Timestamp:
2021-07-30T19:38:54+12:00 (3 years ago)
Author:
anupama
Message:
  1. In the DL page that loads in whakatohea iframe, added vertical-spacer that takes up space of navbar and shifted out the scrollbar from body element to (an) element following spacer. 2. Infrastructure for full-bg image on landing page vs cropped bg image on coll and group pages.
Location:
main/trunk/model-interfaces-dev/wmtb
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r34632 r35236  
     1/* Within the page that loads in iframe, want a spacer (for now 120px high) that
     2will take up the space of the whakatohea navbar. Want the scrollbar shifted from
     3body element into (an) element that spatially immediately follows the vertical spacer.*/
     4body {
     5    overflow: hidden;
     6    margin: 0;
     7    border: none;
     8}
     9div#spacer-for-nav
     10{
     11    height: 120px;
     12    width: auto;
     13    /* margin-top:120px; Why did height not have any effect? Because of self-closing div. Need explicit closing div */
     14}
     15/* https://www.w3schools.com/cssref/css_units.asp
     16 https://css-tricks.com/a-complete-guide-to-calc-in-css/
     17 Need spaces around (arithmetic) operator in calc() equations
     18*/
     19.shifted-frame {
     20    overflow: auto;
     21    height: calc(100vh - 120px); /* Why does 100% not work? */
     22    width: auto;
     23}
     24
     25
     26
     27.bg-img {
     28    /*Can't set background-image as url contains variable: interfaces/{$interface_name}/images/digital-library.jpg*/
     29    background-color: transparent;  /* Used if the image is unavailable. OR: grey */
     30    background-repeat: no-repeat; /* Do not repeat the image */
     31    background-size: cover; /* Resize the background image to cover the entire container */
     32}
     33
     34.full-bg {
     35    height: auto;
     36    background-position: 50.00% 21.94%;
     37    background-size: 100%;
     38}
     39
     40/* https://www.w3schools.com/cssref/pr_background-image.asp
     41and https://www.w3schools.com/cssref/pr_background-position.asp*/
     42
     43.crop-bg {
     44    height: 230px; /* You must set a specified height */
     45    background-position: center -100px; /* OR: center OR: center 20% */
     46}
     47
     48
    149a, span#addNewMD, span#clearSaved {
    250    text-decoration: none;

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

    r35235 r35236  
    2626    </head>
    2727    <body id="top" class="banner-overlay-on">
     28      <div id="spacer-for-nav">&#160;</div>
    2829      <div class="wrapper">
    29 
     30    <div class="shifted-frame">
     31   
    3032    <!-- Whakatohea.co.nz's navbar - no longer in use now that the dl site is
    3133         embedded in iframe on whakatohea.co.nz site which provides the navbar -->
    … …  
    4042        <div class="wsite-elements wsite-not-footer wsite-header-elements">
    4143          <div class="wsite-section-wrap">
     44              <!--<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;" >-->
    4245            <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;" >
     46              <xsl:choose>
     47            <xsl:when test="/page/pageResponse/collection or /page/pageResponse/pathList/group">
     48              <xsl:attribute name="class">wsite-section wsite-header-section wsite-section-bg-image bg-img crop-bg</xsl:attribute>
     49            </xsl:when>
     50            <xsl:otherwise>
     51              <xsl:attribute name="class">wsite-section wsite-header-section wsite-section-bg-image bg-img full-bg</xsl:attribute>
     52            </xsl:otherwise>
     53              </xsl:choose>
     54             
    4355              <div class="wsite-section-content">
    4456           
    … …  
    125137     
    126138    </div> <!-- end site-canvas -->
     139      </div> <!-- end shifted-frame -->
    127140      </div> <!-- end wrapper-->
    128141    </body>
Note: See TracChangeset for help on using the changeset viewer.