Difference between revisions of "Styling cheatsheet"
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 | ||
** | ** ... content ... | ||
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 ( | *** .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'' | ||
** | *** .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
All pages are structured in the following CSS class structure
- .TempusServaPage (root)
- .menuList
- .menuItem
- ... content ...
- .menuList
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)
- tr
- .pager
- .pagerLink
- .pagerPagesize
- .tableList
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
- .PAGE_[field PageID]
- .tableForm
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
- <node>
- tablePageSelector
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>