Changeset 20024 in main


Ignore:
Timestamp:
03/12/20 15:31:12 (2 weeks ago)
Author:
GarthBraithwaite_STG
Message:

view - responsive css.

Location:
trunk/ibisph-view/src/main/webapp
Files:
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/ibisph-view/src/main/webapp/css/ContentOptions.css

    r19916 r20024  
    5151.ContentOptions .Container
    5252{
    53         display:                        -ms-grid; /* IE 10 */
    54         display:                        grid;
    55         grid-auto-columns:      auto;
    56         grid-auto-flow:         column;
     53        display:                        flex;
     54        flex-wrap:                      wrap;
     55        justify-content:        left;
    5756}
    5857
    5958.ContentOptions .Container.Buttons
    6059{
    61         margin:                         0.3em auto 0.5em auto;
    62         text-align:             center;
     60        margin:                         0.5em auto 0.2em auto;
     61    flex-wrap: nowrap;
     62        justify-content: center;
    6363}
    6464.xContentOptions .Container.Buttons
     
    7676{
    7777        display:                        inline-block;
    78         padding-right:          2rem;
     78align-self: flex-end;
     79        width:                  calc(25% - 1rem);
     80        padding: 0.5em 1rem 0 0;
     81        min-width:              200px;
     82        max-width:              270px;
    7983}
    8084.ContentOptions .Container .Block select
    8185{
    8286        display:                        block;
    83         min-width:                      150px;
    84         max-width:                      25%;
     87        width:                  100%;
    8588}
    8689
     
    8992.ContentOptions #relatedIndicators
    9093{
    91         width:                          200px;
    92         max-width:              300px;
    93 }
    94 
    95 .ContentOptions #moreInformation
     94}
     95
     96.xxxxContentOptions #moreInformation
    9697{
    9798        width:                          150px;
  • trunk/ibisph-view/src/main/webapp/css/Topic.css

    r19912 r20024  
    55.Topic #content #contentSections
    66{
    7         width:                          calc(100% - 425px);
    8         max-width:                      50%;
     7        width:                          calc(100% - 450px);
     8        max-width:                      700px;
    99}
    1010.Topic #content figure
     
    3030        position:                       relative;       /* needed for menu to be able get local relative position info */
    3131        float:                          right;
    32         margin:                         0 0rem 0 2rem;
    3332        vertical-align:         top;
    3433        width:                          425px;
  • trunk/ibisph-view/src/main/webapp/css/_SiteSpecific.css

    r20020 r20024  
    3333*/
    3434@import url("_responsive-tiny.css")   only screen and                         (max-width:  1149px);
    35 @import url("_responsive-small.css")  only screen and (min-width: 1080px) and (max-width:  1149px);
     35@import url("_responsive-small.css")  only screen and (min-width:  960px) and (max-width:  1149px);
    3636@import url("_responsive-medium.css") only screen and (min-width: 1150px) and (max-width:  1279px);
    3737@import url("_responsive-large.css")  only screen and (min-width: 1280px);
  • trunk/ibisph-view/src/main/webapp/css/_layout-footer.css

    r19879 r20024  
    3131
    3232
    33 #footer .Row
     33#footer nav
    3434{
     35        display:                        inline-block;
    3536}
    3637
     
    7778}
    7879
     80#footer .Row
     81{
     82        clear: both;
     83}
     84
    7985#footer .Bottom > div
    8086{
  • trunk/ibisph-view/src/main/webapp/css/_responsive-huge.css

    r19882 r20024  
    1010        .grid3 .col:nth-of-type(3n+1)= target every 3rd .col element, starting from the first
    1111        .grid2 .col:nth-of-type(2n+1)= select every 2th .col element, starting from the first
     12html {background-color: #bbb;}
    1213*/
    1314
    14 #xxxxxsiteSearch
    15 {
    16         top:                            -3.5em;
    17 }
    18 #xxxxxxsiteSearch input[type="text"]
    19 {
    20         width:                          20em;
    21         font-size:                      1.4em;
    22 }
    23 
    24 #content #contextNavigation
    25 {
    26         width: 300px;
    27 }
    28 
    29 #content .Sections
    30 {
    31 }
    32 
    33 #content .Sections .FluidContainer
    34 {
    35 margin-left: 1%;
    36 margin-right: 1%;
    37 width: 31%;
    38 }
    39 
    40 #content .Sections .ScrollableContainer
    41 {
    42         max-width:      2500px;
    43 }
    44 
    45 .DataViz.Map,
    46 .DataViz.Chart
    47 {
    48         min-width: 1000px;
    49 }
    50 
    51 
  • trunk/ibisph-view/src/main/webapp/css/_responsive-large.css

    r19983 r20024  
    1 /* 1280-1700 */
     1/* 1280-1700
     2html {background-color: #777;}
     3*/
    24
    3 #siteNavigationMenu > last-child:
    4 {
    5         top:                            -7px;
    6 }
    7 
    8 
    9 #content .Sections .Text.Container,
    10 #content .Sections .Text .Container
    11 {
    12 /*      columns:                2 22em auto; doesn't work
    13         columns:                25em auto;
    14 */
    15         columns:                32rem;
    16         column-fill:    balance; /* columns auto above is the same. */
    17 }
    18 
    19 
    20 .DataViz.Map,
    21 .DataViz.Chart
    22 {
    23         min-width:                      800px;
    24 }
  • trunk/ibisph-view/src/main/webapp/css/_responsive-medium.css

    r20020 r20024  
    22
    33/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ V E R T I C A L   M E N U */
    4 html {background-color: green;}
    54#siteMenuPanelsControl + label
    65{
     
    1211}
    1312
    14 
    15 /*
    16 #siteNavigationMenu #siteSearch
    17 {
    18         top: -50px;
    19         border-radius:          5px;
    20 }
    21 */
    2213
    2314#siteNavigationMenu form.Search:hover
     
    9182}
    9283
    93 
    94 
    95 #content .Sections .FluidContainer
    96 {
    97 margin-left: auto;
    98 margin-right: auto;
    99 width: 100%;
    100 }
    101 
    102 #content .Sections .ScrollableContainer
    103 {
    104         max-width:      1100px;
    105         overflow:       hidden;
    106 }
    107 
    108 .DataViz.Map,
    109 .DataViz.Chart
    110 {
    111         min-width: 600px;
    112 }
    113 
    11484/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ V E R T I C A L   M E N U */
  • trunk/ibisph-view/src/main/webapp/css/_responsive-small.css

    r19882 r20024  
    11/* -959
    22        hamburger with pushout menu wider content.
     3html {  background-color: #777; }
    34*/
    45
    5 #xxxxxsiteSearch
     6#header .SiteTitle
    67{
    7         top:                            -3px;
    8 }
    9 #xxxxxsiteSearch input[type="text"]
    10 {
    11         width:                          15em;
    12         font-size:                      1.4em;
    13 }
    14 
    15 #xxxxxxsiteNavigation .GridPanelList .Body
    16 {
    17         display:                        inline-block;           /* so it floats and wraps */
     8        font-size:                              32px;
    189}
    1910
    2011#content
    2112{
    22         min-width:                      580px;
     13        padding: 0.2em 1rem 1em 1rem;
    2314}
    2415
    25 #content .Sections .FluidContainer
     16.Topic #page #content #contentSections
    2617{
    27 margin: 0 auto;
    28 overflow: auto;
    29 width: 100%;
     18        width: calc(100% - 325px);
     19}
     20.Topic #page #content .Aside
     21{
     22        width: 300px;
     23    max-width: 300px;
    3024}
    3125
    32 #content .Sections .ScrollableContainer
    33 {
    34 max-width:      960px;
    35 }
    36 
    37 .DataViz.Map,
    38 .DataViz.Chart
    39 {
    40         min-width: 580px;
    41 }
    42 
    43 #slideShow
    44 {
    45         font-size: .8em;
    46 }
    47 #slideShow li img
    48 {
    49         display: inline-block;
    50 }
  • trunk/ibisph-view/src/main/webapp/css/_responsive-tiny.css

    r20020 r20024  
    11/* 0-639
    22        hamburger with pushout menu
     3html {  background-color: red; }
    34*/
    45
     
    67{
    78        min-width:                              640px;
    8 min-height: 2000px;
    9         overflow:                               auto;
    10 }
    11 
    12 #page
    13 {
    14     overflow: hidden;
    159}
    1610
     
    2620
    2721
    28 
    2922#siteNavigation
    3023{
    3124        top:                                    -5px;
    32         height:                                 45px;
     25        height:                                 44px;
    3326        padding:                                5px 5px 0 5px;
    3427        background-color:               #c2d7f8;
     
    206199
    207200
    208 #siteNavigationMenu
    209 {
    210         float: none;
    211 }
    212 
    213 
    214 
    215 
    216 
    217 #xxxuserMenu.Popup
    218 {
    219         top:                            40px;
    220 }
    221 
    222 
    223 
    224201#siteSearch
    225202{
     
    259236
    260237
    261 
    262 
    263 
    264 
    265 
    266 
    267 
    268 
    269 
    270 
    271 
    272 
    273 
    274238#content
    275239{
    276         min-width:                              420px;
    277 }
    278 
    279 
    280 
    281 
    282 
    283 .DataViz.Map,
    284 .DataViz.Chart
    285 {
    286         min-width: 600px;
     240        min-width:                              640px;
     241        padding: 0.2em 0.5rem 0.5em 0.5rem;
     242}
     243
     244
     245
     246
     247.Topic #page #content #contentSections
     248{
     249        width: calc(100% - 275px);
     250}
     251.Topic #page #content .Aside
     252{
     253        width: 250px;
     254    max-width: 250px;
    287255}
    288256
  • trunk/ibisph-view/src/main/webapp/xslt/html/SiteSpecific.xslt

    r20020 r20024  
    158158                </header>
    159159        </xsl:template>
    160 
    161 
    162 
    163 
    164 
    165 
    166         <xsl:template name="xxxxxxxxxxxMenuSelectionsList.additionalPrimaryListItems">
    167                         <form id="siteSearch" name="siteSearch" method="get" action="http://www.google.com/search" contenteditable="contenteditable" class="Search">
    168                                 <label for="siteSearchInput" accesskey="s" class="OffPage">Search the site:</label>
    169                                 <input id="siteSearchInput" name="q"
    170                                         placeholder="Search the Site..."
    171                                         type="text" autocomplete="on"
    172                                         dir="ltr" spellcheck="false" style="outline: none;"
    173                                 />
    174                                 <button type="submit" value="" alt="Search" title="Search" font-icon="&#xe13e;"></button>
    175                                 <input type="hidden" name="sitesearch" value="{$ibis.baseRequestPath}" title="site URL to be searched"/>
    176                         </form>
    177         </xsl:template>
    178 
    179 
    180 
    181 
    182 
    183 
    184 
    185 
    186160
    187161
     
    270244                                                </ul>
    271245                                        </div>
    272                                         <div class="Block" style="float: right; width: 270px; padding: 0.3em 1rem 1rem 1rem; background-color: #445566; margin-right: 0;">
    273                                                 <h3>Help us help you by providing feedback about this site or page:</h3>
    274                                                 <input type="button" value="Email Us..." style="width: 100%; font-size: 1rem; padding: 1rem; cursor: pointer; margin-top: 0.5em;"/>
    275                                         </div>
    276246                                </nav>
     247                                <div class="Block" style="float: right; width: 270px; padding: 0.3em 1rem 1rem 1rem; background-color: #445566; margin: 1em 0 0 1em;">
     248                                        <h3>Help us help you by providing feedback about this site or page:</h3>
     249                                        <input type="button" value="Email Us..." style="width: 100%; font-size: 1rem; padding: 1rem; cursor: pointer; margin-top: 0.5em;"/>
     250                                </div>
    277251
    278252                                <div class="Row">
  • trunk/ibisph-view/src/main/webapp/xslt/html/topic/SiteSpecific.xslt

    r19916 r20024  
    1212        <ibis:doc>
    1313                <name>html/topic/SiteSpecific</name>
    14                 <summary>Provides adopter 'query' core site specific template overrides</summary>
     14                <summary>Provides adopter 'topic' core site specific template overrides</summary>
    1515                <description>
    16                         Provides a query specific '_site_specific' API template
     16                        Provides a topic specific '_site_specific' API template
    1717                        implmentation of 'siteSpecific.topMenu' and default
    18                         query left nav menu.
     18                        topic left nav menu.
    1919                </description>
    2020        </ibis:doc>
    2121
    22         <xsl:param name="SiteSpecific.siteNavigationSelectedSelectionName" select="'queryMenu'"
    23                 ibis:doc="Element ID of the 'Query' top tab navigation menu element.  This allows
     22        <xsl:param name="SiteSpecific.siteNavigationSelectedSelectionName" select="'topicMenu'"
     23                ibis:doc="Element ID of the 'topic' top tab navigation menu element.  This allows
    2424                the tab to have its class set to the 'On' value thus showing the sub section of the
    2525                system that the user is in."
     
    2828        <xsl:param name="SiteSpecific.navigationPathSelections">
    2929                <SELECTION>
    30                         <TITLE>query</TITLE>
    31                         <LOCAL_URL>query</LOCAL_URL>
     30                        <TITLE>Topic</TITLE>
     31                        <LOCAL_URL>topic</LOCAL_URL>
    3232                </SELECTION>
    3333        </xsl:param>
Note: See TracChangeset for help on using the changeset viewer.