1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +00:00

add table utility classes and some docs how to use them. fix problem with control-panel basics tab shown in story river (#7039)

This commit is contained in:
Mario Pietsch 2022-11-20 18:48:10 +01:00 committed by GitHub
parent 6955f14c3c
commit b8a30091ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 162 additions and 16 deletions

View File

@ -20,15 +20,16 @@ caption: {{$:/language/ControlPanel/Basics/Caption}}
\end
\whitespace trim
|tc-max-width tc-edit-max-width|k
|<<lingo Version/Prompt>> |''<<version>>'' |
|<$link to="$:/SiteTitle"><<lingo Title/Prompt>></$link> |<$edit-text tiddler="$:/SiteTitle" default="" tag="input"/> |
|<$link to="$:/SiteSubtitle"><<lingo Subtitle/Prompt>></$link> |<$edit-text tiddler="$:/SiteSubtitle" default="" tag="input"/> |
|<$link to="$:/status/UserName"><<lingo Username/Prompt>></$link> |<$edit-text tiddler="$:/status/UserName" default="" tag="input"/> |
|<$link to="$:/config/AnimationDuration"><<lingo AnimDuration/Prompt>></$link> |<$edit-text tiddler="$:/config/AnimationDuration" default="" tag="input"/> |
|<$link to="$:/DefaultTiddlers"><<lingo DefaultTiddlers/Prompt>></$link> |<<lingo DefaultTiddlers/TopHint>><br> <$edit tag="textarea" tiddler="$:/DefaultTiddlers" class="tc-edit-texteditor"/><br>//<<lingo DefaultTiddlers/BottomHint>>// |
|<$link to="$:/DefaultTiddlers"><<lingo DefaultTiddlers/Prompt>></$link> |<<lingo DefaultTiddlers/TopHint>><br> <$edit class="tc-edit-texteditor" tiddler="$:/DefaultTiddlers"/><br>//<<lingo DefaultTiddlers/BottomHint>>// |
|<$link to="$:/language/DefaultNewTiddlerTitle"><<lingo NewTiddler/Title/Prompt>></$link> |<$edit-text tiddler="$:/language/DefaultNewTiddlerTitle" default="" tag="input"/> |
|<$link to="$:/config/NewJournal/Title"><<lingo NewJournal/Title/Prompt>></$link> |<$edit-text tiddler="$:/config/NewJournal/Title" default="" tag="input"/> |
|<$link to="$:/config/NewJournal/Text"><<lingo NewJournal/Text/Prompt>></$link> |<$edit tiddler="$:/config/NewJournal/Text" tag="textarea" class="tc-edit-texteditor" default=""/> |
|<$link to="$:/config/NewJournal/Text"><<lingo NewJournal/Text/Prompt>></$link> |<$edit tiddler="$:/config/NewJournal/Text" class="tc-edit-texteditor" default=""/> |
|<$link to="$:/config/NewTiddler/Tags"><<lingo NewTiddler/Tags/Prompt>></$link> |<$vars currentTiddler="$:/config/NewTiddler/Tags" tagField="text">{{||$:/core/ui/EditTemplate/tags}}<$list filter="[<currentTiddler>tags[]] +[limit[1]]" variable="ignore"><$button tooltip={{$:/language/ControlPanel/Basics/RemoveTags/Hint}}><<lingo RemoveTags>><$action-listops $tiddler=<<currentTiddler>> $field="text" $subfilter={{{ [<currentTiddler>get[tags]] }}}/><$action-setfield $tiddler=<<currentTiddler>> tags=""/></$button></$list></$vars> |
|<$link to="$:/config/NewJournal/Tags"><<lingo NewJournal/Tags/Prompt>></$link> |<$vars currentTiddler="$:/config/NewJournal/Tags" tagField="text">{{||$:/core/ui/EditTemplate/tags}}<$list filter="[<currentTiddler>tags[]] +[limit[1]]" variable="ignore"><$button tooltip={{$:/language/ControlPanel/Basics/RemoveTags/Hint}}><<lingo RemoveTags>><$action-listops $tiddler=<<currentTiddler>> $field="text" $subfilter={{{ [<currentTiddler>get[tags]] }}}/><$action-setfield $tiddler=<<currentTiddler>> tags=""/></$button></$list></$vars> |
|<$link to="$:/config/AutoFocus"><<lingo AutoFocus/Prompt>></$link> |{{$:/snippets/minifocusswitcher}} |

View File

@ -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"/> |
""">>

View File

@ -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

View File

@ -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
""">>

View File

@ -1,6 +1,6 @@
caption: Tables
created: 20130914132100000
modified: 20220513115945053
modified: 20220819103416274
tags: WikiText
title: Tables in WikiText
type: text/vnd.tiddlywiki
@ -66,17 +66,7 @@ To merge a table cell with the one above, use the special cell text `~`. To merg
! Table Classes, Captions, Headers and Footers
Table CSS classes, captions, headers and footers can be specified as special pseudo-rows. The following example:
{{Table Classes, Captions, Headers and Footers}}
* assigns the CSS classes "myclass" and "anotherClass" to the table
* gives the table the caption "This is a caption"
* adds a header row of cells with the text "Header"
* 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
""">>
More examples can be found at: [[Tables in WikiText CSS Utility Classes]]

View File

@ -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 |

View File

@ -326,7 +326,7 @@ table {
}
table th, table td {
padding: 0 7px 0 7px;
padding: 4px 6px 4px 6px;
border-top: 1px solid <<colour table-border>>;
border-left: 1px solid <<colour table-border>>;
}
@ -357,11 +357,36 @@ Table utility classes
width: 1%;
}
/*
** Utility classes work well with tables but also for other containers
*/
/* First link A element will not wrap */
.tc-first-link-nowrap:first-of-type a {
white-space: nowrap;
}
/* Move the table to the center of the container */
.tc-center {
margin-left: auto;
margin-right: auto;
}
.tc-max-width {
width: 100%;
}
.tc-max-width-80 {
max-width: 80%;
}
/* Allow input and textarea to look like the ControlPanel inputs */
.tc-edit-max-width input,
.tc-edit-max-width textarea {
width: 100%;
padding: 3px;
}
/*
CSV parser plugin
*/