Changeset 20025 in main


Ignore:
Timestamp:
03/12/20 15:32:53 (2 years ago)
Author:
GarthBraithwaite_STG
Message:

nm content - responsive css.

Location:
adopters/nm/trunk/src/main/webapps/nmibis-content/xml/html_content
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • adopters/nm/trunk/src/main/webapps/nmibis-content/xml/html_content/about/Welcome.xml

    r19917 r20025  
    1717                        }
    1818
     19                        #content .TopImageNavigation #healthstatus
     20                        {
     21                                background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthstatus.jpg");
     22                        }
     23                        #content .TopImageNavigation #healthcare
     24                        {
     25                                background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthcare.jpg");
     26                        }
     27                        #content .TopImageNavigation #lifestyle
     28                        {
     29                                background-image: url("<ibis:baseRequestPath/>view/image/topic/category/lifestyle.jpg");
     30                        }
     31                        #content .TopImageNavigation #population
     32                        {
     33                                background-image: url("<ibis:baseRequestPath/>view/image/topic/category/population.jpg");
     34                        }
     35
     36                        #content .TopImageNavigation #healthstatus:hover,
     37                        #content .TopicHealthStatus .TopImageNavigation #healthstatus
     38                        {
     39                                background-color: transparent;
     40                                background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthstatus-bw.jpg");
     41                        }
     42                        #content .TopImageNavigation #healthcare:hover,
     43                        #content .TopicHealthCare .TopImageNavigation #healthcare
     44                        {
     45                                background-color: transparent;
     46                                background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthcare-bw.jpg");
     47                        }
     48                        #content .TopImageNavigation #lifestyle:hover,
     49                        #content .TopicLifestyle .TopImageNavigation #lifestyle
     50                        {
     51                                background-color: transparent;
     52                                background-image: url("<ibis:baseRequestPath/>view/image/topic/category/lifestyle-bw.jpg");
     53                        }
     54                        #content .TopImageNavigation #population:hover,
     55                        #content .TopicPopulation .TopImageNavigation #population
     56                        {
     57                                background-color: transparent;
     58                                background-image: url("<ibis:baseRequestPath/>view/image/topic/category/population-bw.jpg");
     59                        }
     60
    1961                        #content .ColumnContainer .Column
    2062                        {
    21                                 width: 60%;
     63                                width: calc(100% - 325px);
     64                                min-width: 500px;
     65                                max-width: 700px;
    2266                        }
    2367
    … …  
    4892
    4993
    50                         #videosColumn
    51                         {
    52                                 float: right;
    53                                 max-width: 300px;
     94                        #content #videosColumn
     95                        {
     96                                float:                          right;
     97                                max-width:                      300px;
     98                                min-width:                      250px;
    5499                        }
    55100
    56101                        #videosColumn h3
    57102                        {
    58                                 margin-bottom:          3px;
    59                         }
    60 
     103                                margin-bottom: 3px;
     104                        }
     105
     106                        #videosColumn ul
     107                        {
     108                                display:                        flex;
     109                                justify-content:        center;
     110                                flex-flow:                      wrap;
     111                        }
     112       
    61113                        #videosColumn li
    62114                        {
    … …  
    96148                                width: 200px;
    97149                        }
     150
     151                        @media only screen and (max-width:  890px)
     152                        {
     153                                #content .ColumnContainer .Column
     154                                {
     155                                        width: auto;
     156                                }
     157                               
     158                                #content #videosColumn
     159                                {
     160                                        max-width: none;
     161                                }
     162                                #videosColumn li
     163                                {
     164                                        display: inline-block;
     165                                        min-width: 300px;
     166                                }
     167                        }
    98168                </style>
    99                
    100169        </OTHER_HEAD_CONTENT>
    101170
    … …  
    114183                <h2>Get Started by Choosing a Health Topic Area:</h2>
    115184                <ibis:include href="../topic/_introduction.xml" children-only-flag="true"/>
    116                 <style>
    117                         <!-- STYLE INCLUDION NOTE:
    118                                 This has to be placed after the include to override those css defs
    119                         -->
    120                         .TopImageNavigation #healthstatus
    121                         {
    122                                 background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthstatus.jpg");
    123                         }
    124                         .TopImageNavigation #healthcare
    125                         {
    126                                 background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthcare.jpg");
    127                         }
    128                         .TopImageNavigation #lifestyle
    129                         {
    130                                 background-image: url("<ibis:baseRequestPath/>view/image/topic/category/lifestyle.jpg");
    131                         }
    132                         .TopImageNavigation #population
    133                         {
    134                                 background-image: url("<ibis:baseRequestPath/>view/image/topic/category/population.jpg");
    135                         }
    136 
    137                         .TopImageNavigation #healthstatus:hover,
    138                         .TopicHealthStatus .TopImageNavigation #healthstatus
    139                         {
    140                                 background-color: transparent;
    141                                 background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthstatus-bw.jpg");
    142                         }
    143                         .TopImageNavigation #healthcare:hover,
    144                         .TopicHealthCare .TopImageNavigation #healthcare
    145                         {
    146                                 background-color: transparent;
    147                                 background-image: url("<ibis:baseRequestPath/>view/image/topic/category/healthcare-bw.jpg");
    148                         }
    149                         .TopImageNavigation #lifestyle:hover,
    150                         .TopicLifestyle .TopImageNavigation #lifestyle
    151                         {
    152                                 background-color: transparent;
    153                                 background-image: url("<ibis:baseRequestPath/>view/image/topic/category/lifestyle-bw.jpg");
    154                         }
    155                         .TopImageNavigation #population:hover,
    156                         .TopicPopulation .TopImageNavigation #population
    157                         {
    158                                 background-color: transparent;
    159                                 background-image: url("<ibis:baseRequestPath/>view/image/topic/category/population-bw.jpg");
    160                         }
    161                 </style>
    162185
    163186                <div class="ColumnContainer">

  • adopters/nm/trunk/src/main/webapps/nmibis-content/xml/html_content/topic/_introduction.xml

    r19917 r20025  
    1515                        margin:                         0;
    1616                        padding:                        0;
    17                         width:                          235px;
     17                        width:                          24%;
    1818                        height:                         235px;
     19                        max-width:                      235px;
    1920                        background:                     transparent 0 0 no-repeat;
    2021                        background-size:        contain;
    2122                }
    22 /* if implemented as img then can use width 24% and height: auto */
     23
     24@media only screen and (max-width:  790px)
     25{
     26                h1 {font-size: 2em;}
     27                .TopImageNavigation .Container
     28                {
     29                        width:                          50%;
     30                        height:                         235px;
     31                }
     32}
     33
     34
     35                /* if implemented as img then can use width 24% and height: auto */
    2336                .TopImageNavigation .Container .Overlay
    2437                {
    … …  
    93106                        max-width:                      900px;
    94107                }
    95                 .TextIconBlocks li
     108                nav.TextIconBlocks li
    96109                {
    97110                        display:                        inline-block;
    98111                        vertical-align:         top;
    99112                }
    100                 .TextIconBlocks li > a 
     113                nav.TextIconBlocks li > a 
    101114                {
    102115                        display:                        inline-block;
    103116                        display:                        block;
    104                         background-color:       #336699;
     117                        background-color:       #225588;
    105118                        width:                          170px;
    106119                        height:                         170px;
    … …  
    111124                        color:                          white;
    112125                }
    113                 .TextIconBlocks li a:hover
     126                nav.TextIconBlocks li a:hover
    114127                {
    115128                        background-color:       var(--background-color-hover);
    116129                        color:                          var(--color-hover);
    117130                }
    118                 .TextIconBlocks li a img
     131                nav.TextIconBlocks li a img
    119132                {
    120133                        display:                        block;
Note: See TracChangeset for help on using the changeset viewer.