Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "Revert "add table utility classes and some docs how to use th…
…em. fix problem with control-panel basics tab shown in story river (#7039)"" See #7057 (comment) This reverts commit fba9efc.
- Loading branch information
Showing
7 changed files
with
162 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
editions/tw5.com/tiddlers/Tables in WikiText CSS Utility Classes.tid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
created: 20220817153236691 | ||
modified: 20221010074314452 | ||
tags: [[Tables in WikiText]] | ||
title: Tables in WikiText CSS Utility Classes | ||
type: text/vnd.tiddlywiki | ||
|
||
~WikiText tables can be styled by applying CSS classes. For basic information on wiktext tables and how to style them, see [[Tables in WikiText]]. | ||
|
||
{{Table Classes, Captions, Headers and Footers}} | ||
|
||
As seen above, the resulting table is left aligned and grows to fit the content. This is the browser default layout behaviour for tables. To get another behaviour, various CSS classes can be added into the "`k` row". | ||
|
||
! Utility Classes | ||
|
||
{{Utility Classes}} | ||
|
||
! Examples | ||
|
||
The following examples apply the style classes to tables but the "General Utility Classes" can as well be used on DIVs or other [[HTML block elements|HTML Block Elements]] | ||
|
||
!! Centred Table | ||
|
||
To center a table horizontally, use `tc-center`: | ||
|
||
<<wikitext-example-without-html src:"""|tc-center|k | ||
|This is a caption |c | ||
|Cell1 |Cell2 | | ||
|Cell3 |Cell4 | | ||
|Header|Header|h | ||
|Footer|Footer|f | ||
""">> | ||
|
||
!! Centred Table, 80% Width | ||
|
||
To add empty left and right margins to a table that is otherwise full-tiddler-width, you can use `tc-max-width-80` | ||
|
||
<<wikitext-example-without-html src:"""|tc-center tc-max-width-80|k | ||
|This is a caption |c | ||
|Cell1 |<<.lorem>> | | ||
|<<.lorem>> |Cell4 | | ||
|Header|Header|h | ||
""">> | ||
|
||
!! Table with Maximum Width | ||
|
||
To expand a table to full tiddler width, use `tc-max-width` | ||
|
||
<<wikitext-example-without-html src:"""|tc-max-width|k | ||
|Header|Header|h | ||
|Cell1 |Cell2 | | ||
|Cell3 |Cell4 | | ||
""">> | ||
|
||
!! Table with First Column Minimum Width | ||
|
||
The following example shows a simple "form" where the first columns width is adjusted to its content by means of `tc-first-col-min-width` | ||
|
||
<<wikitext-example-without-html src:"""|tc-max-width tc-first-col-min-width|k | ||
|Header|Header|h | ||
|Cell1 |<$edit-text tiddler="$:/temp/test-table-input" tag="input" field="test"/> | | ||
|Cell3 |<$edit-text tiddler="$:/temp/test-table-input" field="text"/> | | ||
""">> | ||
|
||
!! Table with Maximum Width ~TextWidgets | ||
|
||
Here, the previous "form" is styled further to give the [[TextWidget]]s full width by adding the class `tc-edit-max-width` | ||
|
||
<<wikitext-example-without-html src:"""|tc-max-width tc-first-col-min-width tc-edit-max-width|k | ||
|Header|Header|h | ||
|Cell1 |<$edit-text tiddler="$:/temp/test-table-input" tag="input" field="test"/> | | ||
|Cell3 |<$edit-text tiddler="$:/temp/test-table-input" field="text"/> | | ||
""">> | ||
|
||
!! Table with No Borders | ||
|
||
The following is a table with maximum width. It contains [[TextWidget]]s with maximum width. The first column is set to be minimum width. Further, all links in the first column are set to __not__ line break (wrap) regardless of window resize. | ||
|
||
<<wikitext-example-without-html src:"""|tc-max-width tc-first-col-min-width tc-edit-max-width tc-table-no-border tc-first-link-nowrap|k | ||
| Cell1|<$edit-text tiddler="$:/temp/test-table-input" tag="input" field="test"/> | | ||
|^ [[Link to a tiddler]]<br>some more text|<$edit-text tiddler="$:/temp/test-table-input" field="text"/> | | ||
""">> |
9 changes: 9 additions & 0 deletions
9
editions/tw5.com/tiddlers/definitions/HTML Block Elements.tid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
created: 20220818091959523 | ||
modified: 20220818092101307 | ||
tags: Definitions | ||
title: HTML Block Elements | ||
type: text/vnd.tiddlywiki | ||
|
||
<<< | ||
HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout. A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block". | ||
<<< https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements |
20 changes: 20 additions & 0 deletions
20
editions/tw5.com/tiddlers/wikitext/Table Classes Captions Headers and Footers.tid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
created: 20220819100636227 | ||
modified: 20220819101309072 | ||
tags: [[Tables in WikiText]] | ||
title: Table Classes, Captions, Headers and Footers | ||
type: text/vnd.tiddlywiki | ||
|
||
Table CSS classes, captions, headers and footers can be specified as special pseudo-rows. The following example: | ||
|
||
* `|myclass anotherClass|k` assigns the CSS classes "myclass" and "anotherClass" to the table | ||
* `|This is a caption |c` gives the table the caption "This is a caption" | ||
* `|Header|Header|h` adds a header row of cells with the text "Header" | ||
* `|Footer|Footer|f` adds a footer row of cells with the text "Footer" | ||
|
||
<<wikitext-example-without-html src:"""|myclass anotherClass|k | ||
|This is a caption |c | ||
|Cell1 |Cell2 | | ||
|Cell3 |Cell3 | | ||
|Header|Header|h | ||
|Footer|Footer|f | ||
""">> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
created: 20220818093624828 | ||
modified: 20221010074235929 | ||
tags: WikiText | ||
title: Utility Classes | ||
type: text/vnd.tiddlywiki | ||
|
||
<<.from-version "5.2.4">> The following outlines a few predefined CSS classes intended to make it simpler to style [[HTML block-elements|HTML Block Elements]] and [[wikitext tables|Tables in WikiText CSS Utility Classes]]. | ||
|
||
!! General Utility Classes | ||
|
||
|`tc-center` |Centres a block-element to the middle of the container | | ||
|`tc-max-width `|Expands a block-element to use the maximum width of the container | | ||
|`tc-max-width-80`|Sets the width of a block-element to use 80% of the maximum container width. This setting is useful with the `tc-center` class | | ||
|`tc-edit-max-width `|Expands [[TextWidget]]s to use the maximum available width. See [[ControlPanel -> Info -> Basics|$:/core/ui/ControlPanel/Basics]]| | ||
|`tc-first-link-nowrap` |Ensures that any links in the first table column will never wrap to the next line | | ||
|
||
!! Table Utility Classes | ||
|
||
|`tc-table-no-border` |Removes the borders of a table | | ||
|`tc-first-col-min-width` |The first column of a table will take up minimal possible width. It adapts to the content | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters