Difference between revisions of "Styling cheatsheet"

From TempusServa wiki
Jump to navigation Jump to search
old>Admin
m (80 revisions imported)
 
(42 intermediate revisions by one other user not shown)
Line 2: Line 2:


All pages are structured in the following CSS class structure  
All pages are structured in the following CSS class structure  
* TempusServaPage (root)
* .TempusServaPage (root)
** menuList
** .menuList
*** menuItem
*** .menuItem
** [''empty''|viewList] (content class)
** ... content ...
*** [tableForm|tableList|tableMaster] (content type)
**** ...


Content can easily be wrapped around the "TempusServaPage" by use of wrappers
Content can easily be wrapped around the "TempusServaPage" by use of wrappers
Line 21: Line 19:
=== List mode ===
=== List mode ===


...
* .TempusServaPage
* viewList
** .tableListHeader
** tableList  
** .viewList
*** tr (header)
*** .tableList  
*** tr [repeat]
**** tr
** pager
***** td (field names)  
*** pagerLink
**** '''tr [repeat]'''
*** pagerPagesize
***** td (field values)
*** .pager
**** .pagerLink
**** .pagerPagesize




Line 47: Line 48:


==== Variant views ====
==== Variant views ====
Most list related operations will have a structure like this.
* .TempusServaPage
** .tableListHeader
** '''[ .viewHeat | .tableStatistics | ...  ]'''
*** .tableList
Note the inner table "tableList", that is present in all list operations. Specific dialogue styling should use the outer tag - example: "tableStatistics".


=== Item mode ===
=== Item mode ===


...
* .TempusServaPage
* tableForm
** ''.tableForm''
** tbody [repeat]
*** .PAGE_[field PageID]
*** fieldLabel  
**** .fieldLabel  
*** fieldValue
**** .fieldValue
*** fieldNotes
**** .fieldNotes
 


Allthough the ".tableForm" is persent in the default template, there is no guarantee  taht the element can be found within the page.


{|
{|
Line 65: Line 75:
!id
!id
!content
!content
!template
|-
|-


Line 71: Line 82:
|
|
|Container for a single field
|Container for a single field
|{default_start} / {default_end}
|-
|-


Line 77: Line 89:
|NB_[system fieldname]
|NB_[system fieldname]
|Label for field
|Label for field
|{default_name}
|-
|-


Line 83: Line 96:
|VB_[system fieldname]
|VB_[system fieldname]
|Value of field / Input for field
|Value of field / Input for field
|{default_value}
|-
|div
|FieldNotes
|HB_[system fieldname]
|Optional help text for the field
|{default_help}
|-
|-


|}
|}
Further information on: [[Form templates]]


== Other element styling  ==
== Other element styling  ==
=== ITEM page selector ===
The page selctor may be placed anywhere within the template
* formpageselector
** tablePageSelector
*** <node>
**** tablePageSelectorElementLeftActive
**** tablePageSelectorElementActive
**** tablePageSelectorElementRightActive
*** <node>
**** tablePageSelectorElementLeft
**** tablePageSelectorElement
**** tablePageSelectorElementRight
=== Targetting mobile devices ===
The following example shows a '''script''' that dynamically assigns a red background to the menu, but only while using mobile devices.
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $('.menuList').css('background','red');
  }
=== Hiding form update elements ===
As of build 2345 there is no easy way to refer ALL the update elements (some browsers are not ble to collapse cells with hidden contents).
  <script>
  $('#NB_DATA_StatusID').parent().parent().hide();
  $('#NB_DATA_Revision').parent().parent().hide();
  $('.updateSubmit').parent().parent().parent().hide();
  </script>

Latest revision as of 11:55, 10 December 2021

Shared page styling

All pages are structured in the following CSS class structure

  • .TempusServaPage (root)
    • .menuList
      • .menuItem
    • ... content ...

Content can easily be wrapped around the "TempusServaPage" by use of wrappers

Command bases styling

Menu mode

Simple / Standard

Advanced / Accordion

List mode

  • .TempusServaPage
    • .tableListHeader
    • .viewList
      • .tableList
        • tr
          • td (field names)
        • tr [repeat]
          • td (field values)
      • .pager
        • .pagerLink
        • .pagerPagesize


type class content
tr customStyle_[item status name] Container for a single record line


Variant views

Most list related operations will have a structure like this.

  • .TempusServaPage
    • .tableListHeader
    • [ .viewHeat | .tableStatistics | ... ]
      • .tableList

Note the inner table "tableList", that is present in all list operations. Specific dialogue styling should use the outer tag - example: "tableStatistics".

Item mode

  • .TempusServaPage
    • .tableForm
      • .PAGE_[field PageID]
        • .fieldLabel
        • .fieldValue
        • .fieldNotes

Allthough the ".tableForm" is persent in the default template, there is no guarantee taht the element can be found within the page.

type class id content template
tbody PAGE_[field PageID] Container for a single field {default_start} / {default_end}
div FieldLabel NB_[system fieldname] Label for field {default_name}
div FieldValue VB_[system fieldname] Value of field / Input for field {default_value}
div FieldNotes HB_[system fieldname] Optional help text for the field {default_help}

Further information on: Form templates

Other element styling

ITEM page selector

The page selctor may be placed anywhere within the template

  • formpageselector
    • tablePageSelector
      • <node>
        • tablePageSelectorElementLeftActive
        • tablePageSelectorElementActive
        • tablePageSelectorElementRightActive
      • <node>
        • tablePageSelectorElementLeft
        • tablePageSelectorElement
        • tablePageSelectorElementRight

Targetting mobile devices

The following example shows a script that dynamically assigns a red background to the menu, but only while using mobile devices.

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $('.menuList').css('background','red');
 }


Hiding form update elements

As of build 2345 there is no easy way to refer ALL the update elements (some browsers are not ble to collapse cells with hidden contents).

 <script>
 $('#NB_DATA_StatusID').parent().parent().hide();
 $('#NB_DATA_Revision').parent().parent().hide();
 $('.updateSubmit').parent().parent().parent().hide();
 </script>