Changeset 20061 in main


Ignore:
Timestamp:
03/18/20 13:54:31 (2 weeks ago)
Author:
GarthBraithwaite_STG
Message:

view - Tweak that allows for IE on windows 7 to display menus better. Moved font icon @fontface from general to kendo overrides. Changed PanelList? to Megamenu css. Removed some blank versioned kendo css files. css tweaks to pass validation. Changed load saved query to output to excel. Updated docs associated with commonWebAppBasePathModelMap.

Location:
trunk/ibisph-view/src/main/webapp
Files:
1 deleted
12 edited
2 moved

Legend:

Unmodified
Added
Removed
  • trunk/ibisph-view/src/main/webapp/WEB-INF/config/spring/common.xml

    r19927 r20061  
    8383                        The path value is optional.  It is only required in those instances 
    8484                        when the default internal servlet's request URL is not sufficient to
    85                         get HTTP requsts to the webapp (e.g. when the webapp is behind a
     85                        get HTTP requests to the webapp (i.e. when the webapp is behind a
    8686                        proxy etc.).  When specified the value MUST be the complete root URL
    8787                        prefix value consisting of the protocol, server name/address
     
    329329                        explicit, fully qualified request paths for content and links.
    330330
    331                         If the webappBaseRequestPath is blank then this model map will build
    332                         the value using the webapp's server path and servlet context. 
    333 
    334                         Why Needed ?:  IBIS tries to be a build once deploy many webapp.  The
    335                         webapp can be deployed into different enviros stand along server or
    336                         the recommended reverse proxy.  The request paths can't be root
    337                         relative because if app server only with mulitple apps or non dns
    338                         specific mapping proxy the context is needed.  If generic, hard coded
    339                         context is added (ibisph-view) then all deployments would need "that"
    340                         mapping.  The implemented solution for all non relative requests is 
    341                         to use a variable requset prefix value.  This is more complex when
    342                         building page UI request URLs but not much more work compared with
    343                         hard coding a context in the request's URL. 
     331                        If the webappBaseRequestPath is blank then the value is built based
     332                        on the first HTTP request's URL and optional injected properties.
     333                        The reason for building based on the first HTTP request is so that
     334                        a real path is captured for use. 
     335
     336                        Why Needed ?:  IBIS is a build once deploy many webapp.  The  webapp
     337                        can be deployed into different enviros - local dev, stand alone server,
     338                        or behind the recommended reverse proxy.  Request paths can't simply
     339                        be root relative because app can be deployed into a multiuse app
     340                        server enviro.  If generic, hard coded context is used (ibisph-view)
     341                        then all deployments would need "that" mapping.  The implemented
     342                        solution for all non relative requests is to use a variable requset
     343                        prefix value.  This is more complex because all page request URLs
     344                        must be prefixed with the value to reliably work. 
     345
     346                        Issue: If not specified ie. blank and built from first HTTP request
     347                        and the first request is NOT the wanted value then is set wrong. 
     348                        An example of this being a problem is in a local dev environment where
     349                        a developer also want to access the app from another PC for testing.
     350                        The first request is made from the localhost which results in a path
     351                        "http://localhost/ibisph-view/".  When the request is made from the
     352                        2nd PC the page content will return but all links to other pages
     353                        and resources (like css and graphic files) will not work.  The solution
     354                        for this is to always access the webapp on the dev PC with the IP
     355                        or the PC's DNS name.
    344356                </description>
    345357                <property name="modelMapKey" value="WebAppBaseRequestPath"/>
  • trunk/ibisph-view/src/main/webapp/css/ContentOptions.css

    r20035 r20061  
    5959{
    6060        margin:                         0.5em auto 0.2em auto;
    61     flex-wrap: nowrap;
    62         justify-content: center;
    63 }
    64 .xContentOptions .Container.Buttons
    65 {
    66         grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    67         margin:                         0.3em auto 0.5em auto;
    68         text-align:             center;
     61    flex-wrap:                  nowrap;
     62        justify-content:        center;
    6963}
    7064.ContentOptions .Container .Block label
     
    7670{
    7771        display:                        inline-block;
    78 align-self: flex-end;
     72        align-self: flex-end;
    7973        width:                  calc(25% - 1rem);
    8074        padding: 0.5em 1rem 0 0;
     
    183177{
    184178    top:                                -8px;
    185     left:                               calc(100% + 10px);
     179    left:                               30px;
     180}
     181.ContentOptions button:last-of-type .Help.Popup:hover .Container
     182{
     183    left:                               auto;
     184        right:                          30px;
    186185}
    187186
     
    198197}
    199198
     199.ContentOptions button:last-of-type .Help.Popup .Container::after
     200{
     201        right:                          auto;
     202        left:                           100%;
     203        border-color:           transparent transparent transparent #c2d7f8;
     204}
    200205/*============================ End of Style Sheet ============================*/
  • trunk/ibisph-view/src/main/webapp/css/DataViz.css

    r19882 r20061  
    259259
    260260
    261 .lvml {behavior: url("../image/"#default#VML);}
     261/* This is from leaflet - template??? */
     262.lvml { behavior: url("../image/#default#VML"); }
    262263
    263264.DataViz.Map .leaflet-control-layers-toggle { background-image: url("../image/icon/leaflet/layers.png"); }
  • trunk/ibisph-view/src/main/webapp/css/HorizontalMenu-MegaMenu-input_control.css

    r20060 r20061  
    11/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    2  * Horizontal tabbed Menu with a pull down columns panel (mega menu).  The tabs
    3  * are based on the HorizontalMenu with the ColumnsPanel being
    4  * based on the VerticalPopoutList css definitions.
     2 * Horizontal tabbed Menu with a pull down MegaMenu container. 
    53 *
    64 * This file contains the specific top tab and sub menu css definition overrides
    75 * and supplements.  The main css definitions are based on/contained within:
    8  * HorizontalMenu.css and VerticalPopoutList.css.  See
    9  * the XSLT code that creates the approp HTML menu structure.   Tab menu item
    10  * IDs are set via the menu XML NAME element and the XSLT code.
    11  *
     6 * HorizontalMenu.css and MegaMenu.css.  See  *
    127 * Structure:
    138 * ---------------------------------------
    149 *      nav
    15  *              ul class="HorizontalMenu PanalList"
     10 *              ul.HorizontalMenu some-child-block.MegaMenu
    1611 *                      li id="xxxxMenu" - tab
    1712 *                              input id="columnPanelControl1"
  • trunk/ibisph-view/src/main/webapp/css/HorizontalMenu-MegaMenu.css

    r20060 r20061  
    11/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    2  * General Horizontal tabbed Menu with panel (mega menu).  The top tabs are
     2 * General Horizontal tabbed Menu with mega menu (panel).  The top tabs are
    33 * based on the HorizontalMenu with the core Panel css definitions included
    44 * here.  The default mechanism to show a panel is for NO INPUT controls/label
     
    1010 * ---------------------------------------
    1111 *      nav
    12  *              ul class="HorizontalMenu PanalList"
     12 *              ul.HorizontalMenu
    1313 *                      li id="xxxxMenu" - tab
    1414 *                              span.Title or input/label struct
    15  *                              div.Panel
     15 *                              div.MegaMenu
    1616 *                                      div.Header
    1717 *                                      div.Body [.Grid .Flex]
  • trunk/ibisph-view/src/main/webapp/css/MegaMenu.css

    r19902 r20061  
    22 * MegaMenu/Panel with Grid selections list CSS definitions for the IBIS-PH
    33 * web site.  The panel's selections list is NOT based on any existing CSS
    4  * definitions but does relies on the standard UL/LI mechanism.
     4 * definitions but does rely on the standard UL/LI mechanism.
    55 *
    66 * Structure:
     
    5959
    6060
    61 
    62 
    6361nav .MegaMenu .Body
    6462{
    65         /* grid in IE: https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
    66         /* setup grid with equal columns */
    67         display:                        -ms-grid; /* IE 10 */
    68         display:                        grid;
    69         grid-auto-columns:      auto;
    70         grid-auto-flow:         column;
     63        /* grid in IE:
     64                https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
     65                https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/
     66                https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/
     67                horrible early spec: display:                   -ms-grid; 
     68
     69                Easiest ie on W7 alternative is simply use flex for the container:
     70        */
     71        display:                        flex;
     72
     73        display:                        grid;   
     74        grid-auto-columns:      auto;   
     75        grid-auto-flow:         column;
    7176        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    7277
    73 /* if use flex need to set block widths - so not much diff than inline blocks.
     78/* IE doesn't work great with flex options that would be needed.
     79        if use flex need to set block widths - so not much diff than inline blocks.
    7480        display: flex;
    7581        flex-direction: row;
     
    8086        flex-flow: row wrap;
    8187        align-items: stretch;
    82         display: -webkit-flex;
    83         display: -ms-flexbox;
    84         display: flex;
    8588        overflow: hidden;
    8689 
     
    9093*/
    9194}
    92 
    93 
    9495
    9596nav .MegaMenu .Body .Block
  • trunk/ibisph-view/src/main/webapp/css/_SiteSpecific.css

    r20024 r20061  
    2424*/
    2525@import url("HorizontalMenu.css");
    26 @import url("HorizontalMenu-PanelList.css");
    27 @import url("HorizontalMenu-PanelList-input_control.css");
     26@import url("HorizontalMenu-MegaMenu.css");
     27@import url("HorizontalMenu-MegaMenu-input_control.css");
    2828@import url("MegaMenu.css");
    2929
  • trunk/ibisph-view/src/main/webapp/css/_effects.css

    r19700 r20061  
    2121        background-clip:                padding-box;
    2222}
    23 
    24 .BackgroundGradient
    25 {
    26         background-color:       #eeeeee;
    27         background-image:       -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
    28         background-image:       -webkit-linear-gradient(top, #eeeeee, #999999);
    29         background-image:       -moz-linear-gradient(top, #eeeeee, #999999);
    30         background-image:       -ms-linear-gradient(top, #eeeeee, #999999);
    31         background-image:       -o-linear-gradient(top, #eeeeee, #999999);
    32 }
    33 /*
    34         looks better without the gradient in IE 8&9
    35 filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr="#ffffff", endColorstr="#bbb");
    36 
    37 background: url("../image/header_background.png") no-repeat 5px 5px, -moz-linear-gradient(right, black, white);
    38 background: url("../image/header_background.png") no-repeat 5px 5px, -webkit-gradient(linear, right, left, from(black), to(white));
    39 background: url("../image/header_background.png") no-repeat 5px 5px, -webkit-linear-gradient(right, black, white);
    40 background: url("../image/header_background.png") no-repeat 5px 5px, -o-linear-gradient(right, black, white);
    41 background: url("../image/header_background.png") no-repeat 5px 5px, linear-gradient(to left, black, white);
    42 */
    43 
    4423
    4524
  • trunk/ibisph-view/src/main/webapp/css/_general.css

    r20020 r20061  
    4444{
    4545        font-family:            "Courier New", courier, monospace;
    46         font-size:                      interit;
    4746        white-space:            pre;
    4847}
     
    413412
    414413
    415 /*
    416 https://css-tricks.com/examples/IconFont/
    417 
    418 <h3>
    419   <span aria-hidden="true" data-icon="&#x21dd;"></span>
    420   Stats
    421 </h3>
    422 
    423 [data-icon]::before {
    424   font-family: icons; / * BYO icon font, mapped smartly * /
    425   content: attr(data-icon);
    426   speak: none; / * Not to be trusted, but hey. * /
    427 }
    428 */
    429 @font-face
    430 {
    431         font-family:"WebComponentsIcons";
    432         src:url("../font/WebComponentsIcons.eot?gedxeo");
    433         src:url("../font/WebComponentsIcons.eot?gedxeo#iefix") format('embedded-opentype')
    434                 ,url("../font/WebComponentsIcons.ttf?gedxeo") format('truetype')
    435                 ,url("../font/WebComponentsIcons.woff?gedxeo") format('woff')
    436                 ,url("../font/WebComponentsIcons.svg?gedxeo#WebComponentsIcons") format('svg');
    437         font-weight:400;
    438         font-style:normal;
    439 }
    440 
     414/* actual font is defined in Kendo and then path overridden in _kendo_overrides.css */
    441415.FontIcon::before,
    442416[font-icon]::before
  • trunk/ibisph-view/src/main/webapp/css/_kendo_overrides.css

    r19890 r20061  
    190190}
    191191
     192
     193/* This is defined in the _general.css but is needed here because the main kendo
     194        css is imported after _general.
     195*/
     196@font-face
     197{
     198        font-family: WebComponentsIcons;
     199        src:url("../font/WebComponentsIcons.eot?gedxeo");
     200        src:url("../font/WebComponentsIcons.eot?gedxeo#iefix")  format('embedded-opentype'),
     201                url("../font/WebComponentsIcons.ttf?gedxeo")            format('truetype'),
     202                url("../font/WebComponentsIcons.woff?gedxeo")           format('woff'),
     203                url("../font/WebComponentsIcons.svg?gedxeo#WebComponentsIcons") format('svg');
     204}
     205
     206
    192207/*
    193208@font-face
  • trunk/ibisph-view/src/main/webapp/css/_layout-header.css

    r20035 r20061  
    8989        z-index:                        1;
    9090    background-color:   #f2f2f2;
    91         /* Need to be explicit with z-index for for IE 7.  Needs to be put here
    92                 because this is the menu's first container with position specified. 
     91        /* see: https://www.w3schools.com/css/css3_gradients.asp
     92                background-image: linear-gradient(red, yellow);
    9393        */
    9494}
     
    271271}
    272272
     273/* NOT SURE????
    273274:not(#userMenu.Popup):hover  .Container,
    274275:not(#userMenu.Popup):active .Container,
     
    278279        left:                           -220px;
    279280}
    280 
     281*/
    281282
    282283
     
    308309#navigationPath li:not(:first-child)::before
    309310{
     311        padding:                        0 5px 0 5px;
    310312        content:                        "\0BB";
    311313}
  • trunk/ibisph-view/src/main/webapp/css/_print.css

    r19882 r20061  
    3939{
    4040        font-family:            georgia, serif;
    41         color:  `                       black;
     41        color:                          black;
    4242}
    4343
  • trunk/ibisph-view/src/main/webapp/css/stylesheet.css

    r19890 r20061  
    3030@import url("kendo.default.min.css");
    3131@import url("kendo.dataviz.min.css");
    32 @import url("kendo.dataviz.default.min.css");
    3332@import url("_kendo_overrides.css");
    3433
  • trunk/ibisph-view/src/main/webapp/xslt/html/query/module/result/Page.xslt

    r20035 r20061  
    161161                                </button>
    162162
    163                                 <button type="button" accesskey="D" id="loadDefinition"
    164                                         onclick="location.href='{concat($ibis.baseRequestPath, 'query/definition/index/MyDefinitions.html')}'"
    165                                 >
    166                                         Load Query Definition
    167                                         <xsl:call-template name="Help.content">
    168                                                 <xsl:with-param name="help">
    169                                                         <TEXT>
    170                                                                 Takes you to a page that shows a list of all of your
    171                                                                 saved query defintions.  You can then choose several
    172                                                                 options to run the definition, refine it, or delete it.
    173 
    174                                                                 NOTE: you will need to be logged in to be able to see
    175                                                                 your definitions.
     163                                <button type="button" accesskey="E" id="openInExcel"
     164                                        onclick="location.href='{concat($ibis.baseRequestPath, 'query/result/', /QUERY_MODULE/REQUEST/CONFIGURATION_PATH, '.xls')}'"
     165                                >
     166                                        Output to Excel
     167                                        <xsl:call-template name="Help.content">
     168                                                <xsl:with-param name="help">
     169                                                        <TEXT>
     170                                                                This open is not a true Microsoft Excel export. 
     171                                                                Selecting this option simply tells your browser
     172                                                                to open the resultant HTML with whatever application
     173                                                                your PC/device has associated with an ".xls" file. 
     174                                                                Depending on how your browser is configured this
     175                                                                will either open the query result in MS-Excel or
     176                                                                it will prompt you to save the file to you local
     177                                                                device where you can then open it with the desired
     178                                                                application. 
     179
     180                                                                NOTE: this option displays the basicaly formatted
     181                                                                numeric and contextual data.  Maps and/or charts
     182                                                                are not included.
    176183                                                        </TEXT>
    177184                                                </xsl:with-param>
Note: See TracChangeset for help on using the changeset viewer.