Changeset 36036


Ignore:
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.

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

    r35281 r36036  
    77:root {
    88    --height-header: 120px;
    9     --height-header-mobile: 93px;
    109    --bp-small: 1025px;
    1110    --bp-small-max: 1024px; /* 1 less */
     11    --a-link-color: rgb(86, 154, 189);
    1212}
    1313
    … …  
    3232 Need spaces around (arithmetic) operator in calc() equations
    3333*/
     34
    3435.shifted-frame {
    3536    overflow: auto;
    3637    height: calc(100vh - var(--height-header)); /*calc(100vh - 120px);*/
    3738    width: auto;
    38 
    3939} /* Why does height calc(100% -120px) instead of using 100vh not work? */
    4040
    … …  
    4646    /*
    4747      body { overflow: auto; }
    48    */
    49    
    50     div#spacer-for-nav {
    51     height: var(--height-header-mobile); /*93px;*/
    52     }
    53 
    54     .shifted-frame {
    55     height: calc(100vh - var(--height-header-mobile)); 
    56     /*height: 100vh;*/ /*calc(100vh - 93px);*/
    57     /*overflow-y: auto;*//* scroll;*/
     48    */
     49
     50    :root {
     51        --height-header: 93px;
    5852    }
    5953
    … …  
    9690@media screen and (min-width: 1025px) { /* bp-small */
    9791    div.crop-bg {
    98     height: 230px; /* You must set a specified height */
    99     background-position: center -100px; /* OR: center OR: center 20% */
    100     /*display: block;*/ /* div with bg image needs to change from display: table-cell
    101                to display: block when cropping bg image, as table-cell setting
    102                overrides height customisation */
    103     }
     92        height: 230px; /* You must set a specified height */
     93        background-position: center -100px; /* OR: center OR: center 20% */
     94        /*display: block;*/ /* div with bg image needs to change from display: table-cell
     95                to display: block when cropping bg image, as table-cell setting
     96                overrides height customisation */
     97    }
     98
    10499    /* Restyle .container *descendant* of .crop-bg:
    105100       Padding can not be 100px as it is when .full-bg is in effect,
    106101       and should be no greater than 95px for .crop-bg, else there
    107102       appears a bottom border of sorts under the cropped image. */
    108     .crop-bg div.container {
    109     /* padding: 50px 0; */
    110     }
     103    /* .crop-bg div.container {
     104        padding: 50px 0;
     105    } */
    111106
    112107    /* Override: padding had made the login/search/browse nav buttons unavailable */
    113108    .banner-wrap .crop-bg .container {
    114     padding: 0px;
     109        padding: 0px;
    115110    }
    116111
    117112    #gs_content {
    118     max-width: 70vw;
     113        max-width: 70vw;
    119114    }
    120115}
    … …  
    123118    text-decoration: none;
    124119    font-weight: normal;
    125     color: rgb(86, 154, 189); /* a light blue */
     120    color: var(--a-link-color); /* a light blue */
    126121}
    127122
    … …  
    132127}
    133128
    134 div.outer {
    135     line-height:1rem;
    136     padding-top:2rem; /*5vh;*/
    137 }
    138 
     129/* Selecting the children ensures that there is space between them */
     130div.outer > * {
     131    padding: 2rem;
     132}
     133
     134/*
     135Acts as a gridded container for the side nav-bar and the main content
     136*/
     137div.outer.collectionDisplay {
     138    display: grid;
     139    grid-template-columns: 1fr 3fr 1fr;
     140}
     141
     142.side-navbar {
     143    display: flex;
     144    flex-direction: column;
     145   
     146    border-right: 1px solid #eaecef;
     147}
     148
     149.side-navbar ul {
     150    padding-left: 1em;
     151}
     152
     153/* The active class is added to nav elements when their content is displayed */
     154.side-navbar a.active {
     155    font-weight: bold;
     156}
     157
     158/* Intended to be applied to an <hr /> element. */
     159.side-navbar-separator {
     160    appearance: none;
     161    width: 100%;
     162    border: 1px solid #eaecef;
     163}
    139164
    140165div.img-and-desc {

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

    r35280 r36036  
    9898        <div class="container wrapper-old col2" id="browse-search-bars">
    9999          <div id="topbar">
    100             <div id="topnav">
    101               <ul>
    102             <xsl:call-template name="navBar"/>
    103               </ul>
    104             </div>
    105             <!--**********************************************************************-->
    106100            <xsl:choose>
    107101              <xsl:when test="page/pageRequest/@subaction='home'">
    … …  
    127121      <!--<hr class="spacer" />-->
    128122      <div class="outer">
     123            <xsl:if test="page/pageResponse/collection">
     124                <xsl:attribute name="class">outer collectionDisplay</xsl:attribute>
     125                <xsl:call-template name="sideNavBar"/>
     126            </xsl:if>
     127         
    129128        <div id="gs_content" class="container">
    130129          <xsl:apply-templates select="/page"/>             
    … …  
    138137      </div> <!-- end shifted-frame -->
    139138      </div> <!-- end wrapper-->
    140     </body>
    141 </html>
     139        </body>
     140    </html>
    142141</xsl:template>
    143142
    144    
    145 <xsl:template name="navBar">
    146 <xsl:choose>
    147   <xsl:when test="page/pageResponse/collection">
    148     <!-- Using select statement to count only non-empty elements, is harder than testing
    149          for non-empty elements. Solution of using normalize-space() is from
    150          https://stackoverflow.com/questions/31602369/xsl-return-only-the-first-non-empty-element
    151     -->
    152     <xsl:variable name="count" select="count(/page/pageResponse/collection/serviceList/service[@name='ClassifierBrowse']/classifierList/classifier/displayItem[@name = 'name'][normalize-space()])"/>
    153     <xsl:variable name="currentPage" select="page/pageRequest/@fullURL"/>
    154 
    155 <xsl:call-template name="loginLinks"/>
    156 <li><a href="{$library_name}">DL Six Pou</a></li>
    157 <li>
    158 <xsl:if test="page/pageRequest/@subaction='about'"><xsl:attribute name="class">active</xsl:attribute></xsl:if>
    159 <a href="{$library_name}/collection/{$collNameChecked}/page/about">About</a>
    160 </li>
    161 
    162 <xsl:choose>
    163 <xsl:when test="$count > 3">
    164 <!--<li><a href="{$currentPage}">Browse</a>-->
    165 <li>Browse by:
    166 <ul class="drop-down-list">
    167 <xsl:call-template name="Browsing"/>
    168 </ul>
    169 </li>
    170 </xsl:when>
    171 <xsl:otherwise>
    172 <li>Browse by:</li>
    173 <xsl:call-template name="Browsing"/>
    174 <hr class="spacer"/>
    175 </xsl:otherwise>
    176 </xsl:choose>
     143<xsl:template name="sideNavBar">
     144  <div class="side-navbar">
     145        <!--
     146            Using select statement to count only non-empty elements, is harder than testing
     147            for non-empty elements. Solution of using normalize-space() is from
     148            https://stackoverflow.com/questions/31602369/xsl-return-only-the-first-non-empty-element
     149        -->
     150        <xsl:variable name="classifierCount" select="count(/page/pageResponse/collection/serviceList/service[@name='ClassifierBrowse']/classifierList/classifier/displayItem[@name = 'name'][normalize-space()])"/>
     151
     152        <!-- TODO: Hardcoded strings! -->
     153
     154        <a href="{$library_name}">Our Six Pou</a>
     155
     156        <a href="{$library_name}/collection/{$collNameChecked}/page/about">
     157            <xsl:if test="page/pageRequest/@subaction='about'">
     158                <xsl:attribute name="class">active</xsl:attribute>
     159            </xsl:if>
     160
     161            About Collection
     162        </a>
     163
     164        <hr class="side-navbar-separator" />
     165
     166        <xsl:if test="$classifierCount > 0">
     167            <span>Browse by:</span>
     168            <ul>
     169                <xsl:call-template name="listBrowsingClassifiers"/>
     170            </ul>
     171        </xsl:if>
     172
     173        <!--Login link is disabled, as it was determined to be confusing with Whakatohea's existing login elements -->
     174        <!-- <hr class="side-navbar-separator" />
     175        <xsl:call-template name="loginLinks"/> -->
     176    </div>
     177</xsl:template>
     178
    177179<!--
    178 <xsl:if test="/page/pageResponse/collection/serviceList/service/@type='query'">
    179 <li><a href="{$currentPage}">Search</a>
    180 <ul>
    181 <xsl:for-each select="/page/pageResponse/collection/serviceList/service[@type='query']">
    182 <xsl:variable name="search" select="@name"/>
    183 <xsl:variable name="search_name" select="displayItem[@name='name']"/>
    184 <li><a href="{$library_name}/collection/{$collNameChecked}/search/{$search}"><xsl:value-of select="$search_name"/></a></li>
    185 </xsl:for-each>
    186 </ul>
    187 </li>
    188 </xsl:if>
     180    This was in the old navbar. Might come in useful?
     181
     182    <xsl:variable name="currentPage" select="page/pageRequest/@fullURL"/>
     183    <xsl:if test="/page/pageResponse/collection/serviceList/service/@type='query'">
     184        <li>
     185            <a href="{$currentPage}">Search</a>
     186            <ul>
     187                <xsl:for-each select="/page/pageResponse/collection/serviceList/service[@type='query']">
     188                    <xsl:variable name="search" select="@name"/>
     189                    <xsl:variable name="search_name" select="displayItem[@name='name']"/>
     190
     191                    <li>
     192                        <a href="{$library_name}/collection/{$collNameChecked}/search/{$search}">
     193                            <xsl:value-of select="$search_name"/>
     194                        </a>
     195                    </li>
     196                </xsl:for-each>
     197            </ul>
     198        </li>
     199    </xsl:if>
    189200-->
    190 </xsl:when>
    191 <xsl:otherwise> </xsl:otherwise>
    192 </xsl:choose>
    193 </xsl:template>
    194 
    195 <xsl:template name="Browsing">
     201
     202<!-- Builds a list of the named browsing classifiers that are defined in the response. -->
     203<xsl:template name="listBrowsingClassifiers">
    196204  <xsl:for-each select="/page/pageResponse/collection/serviceList/service[@name='ClassifierBrowse']/classifierList/classifier">
    197205    <xsl:choose>
    198       <!-- Only display browsing classifiers that have a name.
    199            Those that don't have a name are empty classifiers
    200            denoted by no value/empty value for displayItem name=name elements.
    201            Testing for non empty elements is easy: not() test. -->
     206      <!--
     207                Only display browsing classifiers that have a name.
     208                Those that don't have a name are empty classifiers
     209                denoted by no value/empty value for displayItem name=name elements.
     210                Testing for non empty elements is easy: not() test.
     211            -->
    202212      <xsl:when test="not(displayItem[@name='name'] ='')">
    203         <li>
    204             <xsl:choose>
    205             <!-- If this tab is selected then colour it differently -->
    206                 <xsl:when test="util:contains(/page/pageRequest/paramList/param[@name = 'cl' and /page/pageRequest/@action = 'b']/@value, @name)">
    207                 <xsl:attribute name='class'>active</xsl:attribute>
    208                 </xsl:when>
    209                 <xsl:otherwise> </xsl:otherwise>
    210             </xsl:choose>
    211             <a>
    212                 <!-- Add a title element to the <a> tag if a description exists for this classifier -->
    213                 <xsl:if test="displayItem[@name='description']">
    214                     <xsl:attribute name='title'><xsl:value-of select="displayItem[@name='description']"/></xsl:attribute>
    215                 </xsl:if>
    216 
    217                 <!-- Add the href element to the <a> tag -->
    218                 <xsl:choose>
    219                     <xsl:when test="@name">
    220                         <xsl:attribute name="href"><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/<xsl:value-of select="@name"/></xsl:attribute>
    221                     </xsl:when>
    222                     <xsl:otherwise>
    223                         <xsl:attribute name="href"><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/1</xsl:attribute>
    224                     </xsl:otherwise>
    225                 </xsl:choose>
    226 
    227                 <!-- Add the actual text of the <a> tag -->
    228                 <xsl:value-of select="displayItem[@name='name']"/>
    229             </a>
    230         </li>
    231           </xsl:when>
    232            </xsl:choose>
     213                <li>
     214                    <a>
     215                        <!-- Indicates that this classifier's content is being displayed -->
     216                        <xsl:if test="util:contains(/page/pageRequest/paramList/param[@name = 'cl' and /page/pageRequest/@action = 'b']/@value, @name)">
     217                            <xsl:attribute name="class">active</xsl:attribute>
     218                        </xsl:if>
     219
     220                        <!-- Add a title element to the <a> tag if a description exists for this classifier -->
     221                        <xsl:if test="displayItem[@name='description']">
     222                            <xsl:attribute name='title'><xsl:value-of select="displayItem[@name='description']"/></xsl:attribute>
     223                        </xsl:if>
     224
     225                        <!-- Add the href element to the <a> tag -->
     226                        <xsl:choose>
     227                            <xsl:when test="@name">
     228                                <xsl:attribute name="href">
     229                                    <xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/<xsl:value-of select="@name"/>
     230                                </xsl:attribute>
     231                            </xsl:when>
     232                            <xsl:otherwise>
     233                                <xsl:attribute name="href">
     234                                    <xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/1
     235                                </xsl:attribute>
     236                            </xsl:otherwise>
     237                        </xsl:choose>
     238
     239                        <!-- Add the actual text of the <a> tag -->
     240                        <xsl:value-of select="displayItem[@name='name']"/>
     241                    </a>
     242                </li>
     243            </xsl:when>
     244        </xsl:choose>
    233245    </xsl:for-each>
    234246</xsl:template>
Note: See TracChangeset for help on using the changeset viewer.