Changeset 22575 in main


Ignore:
Timestamp:
02/22/21 10:18:08 (8 months ago)
Author:
GarthBraithwaite_STG
Message:

view - css tweaks.

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

Legend:

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

    r22567 r22575  
    11/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    22 * Help definitions for a link (LOCAL_URL), a browser alert box (USE_ALERT_FLAG)
    3  * and popups.  Most of these definitions are for the help popup which use the
    4  * Popup CSS definitions (these Help definitions are supplimental to Popup CSS).
     3 * and default mouse over hover popups.  Most of these definitions are for the
     4 * help popup which use the Popup hover CSS definitions (these Help definitions
     5 * are supplimental to Popup CSS).
    56 *
    6  * Help really could be called "Info" or something more generic.  The reason it
    7  * it left as Help is to more closely match the Help.XSLT templates.
     7 * Help really could be called "Info" or something more generic.  Left as Help
     8 * (which is processed by Help.XSLT) for historical and because no strong alt.
    89 *
    9  * Structure:
     10 * General XML Structure (processed via Help.xslt):
    1011 *              HELP
    1112 *                      [TITLE]
     
    1617 *                      TEXT
    1718 *                      [USE_ALERT_FLAG]
     19 *
     20 * HTML (from Help.xslt processing or directly implemented in HTML:
     21 *              .Help [Popup  FontIcon]
     22 *                      [Container]
     23 *                              [Content]
     24 *                                      html content...
    1825 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    1926.Help
    2027{
    21 display: inline-block;
     28        /* if span then height is font-size, ib uses line-height */
     29        display:                        inline-block;           
    2230/*vertical-align: bottom;*/
    2331        margin-left:            3px;
     
    2634        padding:                        0.15em 5px;     /* add a little mouse over margin */
    2735}
    28 xxxspan.Help
    29 {
    30         line-height:            1em;
    31 }
    3236
    3337.Help.Right
    3438{
     39        display:                        inline-block;
    3540        float:                          right;  /* can only float block elements */
    3641}
    3742.Help.Inline
    3843{
    39         float:                          none;   
    40         display:                        inline-block;
     44        display:                        inline;
     45        line-height:            1em;
    4146/* Use line height to center icon on line.  Below messes getting to content on mouse over.
    4247        top:                            2px;
     
    5055
    5156
    52 .Help.Popup
    53 {
    54         position:                       relative;
    55 }
    56 
    57 .Help.Popup::before,
    58 .Help.Info.FontIcon::before,
    59 .Help.Link.FontIcon::before,
    60 .Help.Alert.FontIcon::before
     57/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ F O N T   I C O N */
     58.Help.FontIcon::before
    6159{
    6260        background-color:       var(--button-background-color);
     
    7674
    7775
     76/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ P O P U P */
    7877.Help.Popup:hover  .Container,
    7978.Help.Popup:active .Container,
     
    8887.Help.Popup.ContainerRight:focus  .Container
    8988{
    90         top:                            calc(100% - 10px);
     89        top:                            -10px;
    9190        left:                           -25px;
    9291}
     
    9594.Help.Popup.ContainerCentered:focus  .Container
    9695{
    97         top:                            calc(100% - 10px);
     96        top:                            -10px;
    9897        left:                           -125px;
    9998}
     
    106105        max-height:             180px;
    107106}
    108  
     107
    109108.Help.Popup .Container .Content a,
    110109.Help.Popup .Container .Content a:visited
     
    114113
    115114/*============================ End of Style Sheet ============================*/
    116 
  • trunk/ibisph-view/src/main/webapp/css/HorizontalMenu-DropDown.css

    r19705 r22575  
    1212 * Structure:
    1313 * ---------------------------------------
    14  * ul class="HorizonalMenu"  (contains all)
     14 * ul.HorizonalMenu  (contains all)
    1515 *       li id="xxxxMenu" (horz top menu tab) - control
    1616 *              a  -  optional link to a page
    17  *              ul class="VerticalPopoutList" - sub dropdown menu container
     17 *              ul.VerticalPopoutList - sub dropdown menu container
    1818 *                      li - 
    1919 *                              a -or- div  -  link
  • trunk/ibisph-view/src/main/webapp/css/HorizontalMenu.css

    r22567 r22575  
    88 * Structure:
    99 * ---------------------------------------
    10  * [ul].HorizontalMenu
     10 *      ul.HorizontalMenu
    1111 *              li id="xxxxMenu"
    1212 *                      [a, .Title, label]
  • trunk/ibisph-view/src/main/webapp/css/Info.css

    r22240 r22575  
    55 * "Info" Class Structure:
    66 * ---------------------------------------
    7  *      <table class="Info">
    8  *              <thead>
    9  *              [<tr] - Title row for the table
    10  *                      [<th [class="Columns">] - table's columns title typically colspan=x
    11  *              [<tr] - Title row for the table
    12  *                      [<th [class="Column">] - table's column title
    13  *                      [<th [class="Row"]>] - table's row title
    14  *                      [<th>]
    15  *                              [<h2>] - H2 element for the overall table title
    16  *              <tfoot>
    17  *              [<tr]
    18  *                      <td colspan=# - white background container that is the same size as
     7 *      table.Info
     8 *              thead
     9 *              [tr] - Title row for the table
     10 *                      [th.Columns] - table's columns title typically colspan=x
     11 *              [tr] - Title row for the table
     12 *                      [th.Column] - table's column title
     13 *                      [th.Row] - table's row title
     14 *                      [th]
     15 *                              [h2] - H2 element for the overall table title
     16 *              tfoot
     17 *              [tr]
     18 *                      td colspan=# - white background container that is the same size as
    1919 *                              the table.  This typically contains a RecordCount div that is
    2020 *                              right aligned and other divs.  This class is not named "Footer"
    2121 *                              as this class name inherits from the Sections.Footer definition.
    22  *              <tbody>
    23  *              [<tr class="Section">]
    24  *                      [<th>] - Section title
    25  *                              [<h3>] - Title Row for a section
    26  *              [<tr>]
    27  *                      [<th class="Section">] - Provides section row title TH with indenturing
    28  *                      [<th class="Value"]>] - Title for data value column
    29  *                      [<td class="Value"]>] - standard data value cell - right align etc.
    30  *                      [<td class="[Value Total]">] - Row's total numeric data value
    31  *                      [<th>] - standard header - left aligned text diff background, bolded etc.
    32  *                      [<td>] - standard cell - left aligned text
    33  *              [<tr class="Total">]
    34  *                      [<th>] - Total row's title
    35  *                      [<td class="Value">] - Column's total's value.
     22 *              tbody
     23 *              [tr.Section]
     24 *                      [th] - Section title
     25 *                              [h3] - Title Row for a section
     26 *              [tr]
     27 *                      [th.Section] - Provides section row title TH with indenturing
     28 *                      [th.Value] - Title for data value column
     29 *                      [td.Value] - standard data value cell - right align etc.
     30 *                      [td.Value Total] - Row's total numeric data value
     31 *                      [th] - standard header - left aligned text diff background, bolded etc.
     32 *                      [td] - standard cell - left aligned text
     33 *              [tr.Total]
     34 *                      [th] - Total row's title
     35 *                      [td.Value] - Column's total's value.
    3636 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    3737
  • trunk/ibisph-view/src/main/webapp/css/Popup.css

    r22567 r22575  
    2828 *      .Popup    -    This is the control mechanism for the container.
    2929 *              [ --CLICKABLE POPUP--
    30  *              input type=checkbox or radio (actual control which css keys off of)
    31  *              label  (visual element)
     30 *              input type=checkbox/radio - "checked" controls container display via css.
     31 *              label visual element associated with the input via "for" "id" attribute.
    3232 *              ]
    3333 *              .Container    -    main content container - provides a border etc.
    3434 *                      [<h3>Title</h3>]    -    Optional Popup content window title
    35  *                      [<span or div class="Content [SelectorInput]">]
     35 *                      .Content [.SelectorInput]
    3636 *                  Actual content container that allows for a title and border
    3737 *                  formatting with a content section being able to have it's own
     
    7676}
    7777
    78 /* hover control.  If input and label then "click control" - doesn't match as
    79         the Container class is not the first child of the parent
    80 */
    81 .Popup:hover  .Container:first-child,
    82 .Popup:active .Container:first-child,
    83 .Popup:focus  .Container:first-child
    84 {
    85         visibility:                     visible;
    86         opacity:                        1;
    87         z-index:                        200;
    88 
    89         /* positioning HAS to be abs to get it to float over the top.  This attribute
    90                 MUST be set in with the hover or IE can't deal with it.
    91 
    92                 Read article about using margin and not positioning.  Issue dealt with
    93                 position, left, top, and z-index.  Didn't make a diff for overlaying
    94                 anchors.  z-index needs position to be set.
    95 
    96                 Can use position abs with margins and it works. However, positioning is
    97                 not correct between browsers AND since it doesn't resolve the abs
    98                 positioned blocks overlapping (like menus) there's not any advantage!
    99         */
    100 }
    101 
    10278.Popup .Container h2,
    10379.Popup .Container h3,
     
    149125        margin:                         0;
    150126        font-weight:            bold;
     127}
     128
     129
     130/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ H O V E R   C O N T R O L */
     131
     132/* Hover control - hover vs input is controlled via the css first-child selector. 
     133        If input and label then "click control" else if ".Popup" is followed directly
     134        by the container then popup.
     135*/
     136.Popup:hover  .Container:first-child,
     137.Popup:active .Container:first-child,
     138.Popup:focus  .Container:first-child
     139{
     140        visibility:                     visible;
     141        opacity:                        1;
     142        z-index:                        200;
     143
     144        /* positioning HAS to be abs to get it to float over the top.  This attribute
     145                MUST be set in with the hover or IE can't deal with it.
     146
     147                Read article about using margin and not positioning.  Issue dealt with
     148                position, left, top, and z-index.  Didn't make a diff for overlaying
     149                anchors.  z-index needs position to be set.
     150
     151                Can use position abs with margins and it works. However, positioning is
     152                not correct between browsers AND since it doesn't resolve the abs
     153                positioned blocks overlapping (like menus) there's not any advantage!
     154        */
    151155}
    152156
     
    171175.Popup > input:first-child:checked + label
    172176{
     177display:                        inline-block;
    173178        background-color:       var(--background-color-hover);
    174179        color:                          white;
     
    182187}
    183188
    184 .xxxxxxxxPopup > input:first-child + label::before,
    185189.Popup > input:first-child + label::after
    186190{
    187         display:                        inline-block;
     191        float:                          right;
    188192        padding:                        0px 6px 0 6px;         
    189193        color:                          inherit;
     
    234238    margin-top: 5px;
    235239}
     240
     241
     242.Popup.Below > input:first-child:checked ~ .Container
     243{
     244        left:                           25px;
     245        bottom:                         30px;
     246}
     247.Popup.Below > input:first-child ~ label.Button
     248{
     249        margin-top: 0.5em;
     250        width: 310px;
     251}
     252.Popup.Below:first-of-type > input:first-child ~ label.Button
     253{
     254        margin-top: 0.1em;
     255}
     256
     257
     258.Popup.Above
     259{
     260        display: inline-block;
     261}
     262
     263.Popup.Above > input:first-child:checked ~ .Container
     264{
     265        left: 25px;
     266        bottom: 30px;
     267}
     268
     269.Popup.Above > input:first-child ~ label.Button
     270{
     271        margin-top:             0.5em;
     272        width:                          310px;
     273}
     274.Popup.Above:first-of-type > input:first-child ~ label.Button
     275{
     276        margin-top:             0.1em;
     277}
     278
     279
    236280/*============================ End of Style Sheet ============================*/
    237281
  • trunk/ibisph-view/src/main/webapp/css/_general.css

    r22567 r22575  
    255255}
    256256button:hover,
    257 .Button
     257.Button:hover
    258258{       
    259259        color:                                  var(--color-hover);
     
    465465
    466466
    467 /* actual font is defined in Kendo and then path overridden in _kendo_overrides.css */
     467/*
     468        FontIcon's default to "before" characters.  This allows for selection list
     469        specific markers, button icons, and general icons for help etc. This also
     470        provides the action type icons to be combined as an "after" ie drop down
     471        popup icons etc.
     472
     473        Actual font include is defined in Kendo css.  The font path is overridden in
     474        _kendo_overrides.css
     475*/
    468476.FontIcon::before,
    469477[font-icon]::before
  • trunk/ibisph-view/src/main/webapp/xslt/html/HTMLContentPage.xslt

    r22567 r22575  
    160160                <xsl:call-template name="SelectionsList.processSelections">
    161161                        <xsl:with-param name="containerID"    select="@id"/>
    162                         <xsl:with-param name="containerClass" select="concat('Selections ', @class)"/>
     162                        <xsl:with-param name="containerClass" select="concat('Selections ', @additionalClasses)"/>
    163163                        <xsl:with-param name="controlType"    select="@controlType"/>
    164164<!--
     
    264264        </xsl:template>
    265265
     266
     267        <xsl:template match="ibis:xsltParamContent" mode="ibis.copy"
     268                ibis:doc="Provides access to XSLT param content."
     269        ><xsl:value-of select="@content"/></xsl:template>
     270
    266271</xsl:stylesheet>
    267272<!-- ============================= End of File ============================= -->
  • trunk/ibisph-view/src/main/webapp/xslt/html/SelectionsList.xslt

    r22567 r22575  
    381381                <xsl:param name="inputName"/>
    382382                <xsl:param name="inputID"/>
    383                 <xsl:param name="inputClass" select="'Control'"/>
     383                <xsl:param name="inputClass"/>
    384384                <xsl:param name="labelClass"/>
    385385                <xsl:param name="title"/>
     
    419419                                <xsl:attribute name="onclick">if('true'==this.getAttribute('showing')) this.checked=false; this.setAttribute('showing', this.checked);</xsl:attribute>
    420420                        </xsl:if>
    421 <!--
    422                         <xsl:if test="not($showOnHover) and ('radio' = $inputType)">
    423                                 <xsl:attribute name="onclick">this.checked = !this.checked;</xsl:attribute>
    424 
    425                                 <xsl:attribute name="onmouseenter">this.setAttribute('showing', this.checked);</xsl:attribute>
    426                                 <xsl:attribute name="onclick">if('true'==this.getAttribute('showing')) this.checked=false; this.setAttribute('showing', this.checked);</xsl:attribute>
    427                                 <xsl:attribute name="onmouseout">this.setAttribute('showing', false);</xsl:attribute>
    428 
    429                                 <xsl:attribute name="onclick">console.log('onclick:'+this.checked+this.getAttribute('showing')); if('true'==this.getAttribute('showing')) this.checked=false; this.setAttribute('showing', this.checked);</xsl:attribute>
    430                                 <xsl:attribute name="onclick">if('true'==this.getAttribute('showing')) this.checked=false; this.setAttribute('showing', this.checked);</xsl:attribute>
    431                         </xsl:if>
    432 
    433                                         <xsl:attribute name="onclick">var di=document.getElementById('<xsl:value-of select="$inputID"/>'); console.log(di.checked); di.checked = !di.checked; console.log(di.checked);</xsl:attribute>
    434 -->
    435421                </input>
    436422
  • trunk/ibisph-view/src/main/webapp/xslt/html/SiteSpecific.xslt

    r22450 r22575  
    7171
    7272        <xsl:param name="SiteSpecific.siteAuthenticatedUserSelectionXMLFilePathAndName"
    73                 select="ibis:getContentPath('xml/selection/navigation/AuthenticatedUserSelection.xml')"
     73                select="ibis:getContentPath('xml/selections/navigation/AuthenticatedUserSelection.xml')"
    7474        />
    7575        <xsl:param name="SiteSpecific.siteNonAuthenticatedUserSelectionXMLFilePathAndName"
    76                 select="ibis:getContentPath('xml/selection/navigation/UserSelection.xml')"
     76                select="ibis:getContentPath('xml/selections/navigation/UserSelection.xml')"
    7777        />
    7878        <xsl:param name="SiteSpecific.siteAuthenticatedUserSelections">
  • trunk/ibisph-view/src/main/webapp/xslt/xml/query/module/ConfigurationIncludeCriteriaExclude.xslt

    r22413 r22575  
    7676                        element as it could be excluded if the NAME matches.
    7777
    78 TODO: v3+ REMOVE THIS CODE - HANDLED VIA CONDITIONAL INCLUDE - Lois 1/27/2021.
     78GARTH TODO: v3+ REMOVE THIS CODE - HANDLED VIA CONDITIONAL INCLUDE - Lois 1/27/2021.
    7979                "
    8080        />
     
    8989                        displayed as a group by option then this dimension needs to have a
    9090                        dummy proxy dimension name set.
    91                        
    92 TODO: v3+ REMOVE THIS CODE - HANDLED VIA CONDITIONAL INCLUDE - Lois 1/27/2021.
     91
     92GARTH TODO: v3+ REMOVE THIS CODE - HANDLED VIA CONDITIONAL INCLUDE - Lois 1/27/2021.
    9393                "
    9494        />
Note: See TracChangeset for help on using the changeset viewer.