Changeset 35271


Ignore:
Timestamp:
2021-08-09T18:34:25+12:00 (3 years ago)
Author:
anupama
Message:

With Dr Bainbridge's help, got the browsing-and-searching bar higher into bottom of banner space and centred. Had put it on a semi-transparent background as he asked for, but still to evaluate if it looks good like this.

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

    r35257 r35271  
    216216    text-align: right;
    217217}
     218
    218219div#topline li, div#topnav li, .query-form-links li, #wizardBar li {
    219     display: inline;
     220    display: inline;   
     221    /*text-transform: capitalize;*/ /* Will Titlecase all menus including Browsing Classifiers */
     222}
     223
     224div#topline li, .query-form-links li, #wizardBar li {
    220225    margin: 0 0.5rem;
    221     /*text-transform: capitalize;*/ /* Will Titlecase all menus including Browsing Classifiers */
     226}
     227
     228/* Special case: div#topnav li stretches over multiple lines as it contains a nested ul
     229on its own separate line, since (the nested) ul is displayed as a block by default.
     230Adding a positive right margin to div#topnav li means that after the nested ul block
     231there's now a newline with margin space. We don't want this additional newline, so set
     232margin-RIGHT of this outer li to 0 to prevent it. */
     233div#topnav li {
     234    margin: 0 0 0 1rem;
    222235}
    223236
    … …  
    254267
    255268div#topbar {
    256     margin: 0 2rem;
     269    margin: 0 auto;
    257270    line-height: 1rem;
    258271}
    … …  
    272285#browse-search-bars {
    273286    max-width: 100vw;
    274     padding: 1rem;
     287    /*padding: 1rem;*/
    275288    /*height: 10vh;*/ /* useful for selecting div in dev tools */
    276289    /* max-height: 10vh; */
     290    height: auto;
     291    padding: 0.5rem 0rem; /* have to set the rest to 0 */
     292    /*background-color: rgba(255, 255, 255, 0.9);*/ /* https://stackoverflow.com/questions/10422949/css-background-opacity */
     293    position: absolute; bottom: 0; left: 0; /* or: top: 60%; left: 0; */
     294    /*Or: margin-top: -6rem; */
     295    z-index:2;
     296    background-color: rgba(255, 255, 255, 0.7); /* https://stackoverflow.com/questions/10422949/css-background-opacity */
    277297}
    278298
    279299#browse-search-bars #topbar {
    280     line-height: 2rem;
     300    line-height: 1rem;
     301    /*margin:auto;*/
     302    width: 90vw;
    281303}
    282304
    … …  
    291313}
    292314
     315ul.drop-down-list {
     316    padding-top: 0.5rem;
     317}
     318#advanced {
     319    padding-top:0.2rem;
     320}

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

    r35257 r35271  
    8383         
    8484        </div>
     85
     86
     87             
     88        <div class="container wrapper-old col2" id="browse-search-bars">
     89          <div id="topbar">
     90            <div id="topnav">
     91              <ul>
     92            <xsl:call-template name="navBar"/>
     93              </ul>
     94            </div>
     95            <!--**********************************************************************-->
     96            <xsl:choose>
     97              <xsl:when test="page/pageRequest/@subaction='home'">
     98            <div id="cross-coll-div">
     99              <xsl:call-template name="crossCollSearch"/>
     100            </div>
     101              </xsl:when>
     102              <xsl:when test="page/pageRequest/paramList/param/@name='c' and /page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']">
     103            <xsl:call-template name="quick-search-area"/>
     104              </xsl:when>
     105              <xsl:otherwise/>
     106            </xsl:choose>
     107            <!--**********************************************************************-->
     108          </div>
     109        </div>
     110
    85111       
    86112          </div><!-- end banner-wrap -->
    … …  
    89115
    90116      <!--<xsl:call-template name="login-prefs-help-links"/>-->
    91      
    92       <div class="container wrapper-old col2" id="browse-search-bars">
    93         <div id="topbar">
    94           <div id="topnav">
    95         <ul>
    96           <xsl:call-template name="navBar"/>
    97         </ul>
    98           </div>
    99           <!--**********************************************************************-->
    100           <xsl:choose>
    101         <xsl:when test="page/pageRequest/@subaction='home'">
    102           <div id="cross-coll-div">
    103             <xsl:call-template name="crossCollSearch"/>
    104           </div>
    105         </xsl:when>
    106         <xsl:when test="page/pageRequest/paramList/param/@name='c' and /page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']">
    107           <xsl:call-template name="quick-search-area"/>
    108         </xsl:when>
    109         <xsl:otherwise/>
    110           </xsl:choose>
    111           <!--**********************************************************************-->
    112         </div>
    113       </div>
    114117      <!--<hr class="spacer" />-->
    115118      <div class="outer">
Note: See TracChangeset for help on using the changeset viewer.