Allow $:/core/ui/ControlPanel/Basics to work in the story river + some docs about utility classes (#6912)

* allow $:/core/ui/ControlPanel/Basics to work in the story river + some docs about utility classes

* apply changes suggested by twMat

* fix some typos and change the base padding for tables

* fix a typo and remove whitespace

* remove TODO in base CSS

core/ui/ControlPanel/Basics.tid

@@ -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 tag="textarea" 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" tag="textarea" 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}} |

editions/tw5.com/tiddlers/$__StoryList.tid

@@ -1,5 +1,5 @@
-created: 20220728145919904
+created: 20221010074222386
-list: Brackets Base64 HelloThere GettingStarted Community
+list: [[HTML Block Elements]] [[Table Classes, Captions, Headers and Footers]] [[Tables in WikiText]] [[Tables in WikiText CSS Utility Classes]]
-modified: 20220728145919904
+modified: 20221010074406819
 title: $:/StoryList
 type: text/vnd.tiddlywiki

editions/tw5.com/tiddlers/Tables in WikiText CSS Utility Classes.tid

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

editions/tw5.com/tiddlers/definitions/HTML Block Elements.tid

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

editions/tw5.com/tiddlers/wikitext/Table Classes Captions Headers and Footers.tid

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

editions/tw5.com/tiddlers/wikitext/Tables in WikiText.tid

@@ -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
+More examples can be found at: [[Tables in WikiText CSS Utility Classes]]
-|This is a caption |c
-|Cell1 |Cell2 |
-|Cell3 |Cell3 |
-|Header|Header|h
-|Footer|Footer|f
-""">>

editions/tw5.com/tiddlers/wikitext/Utility Classes.tid

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

themes/tiddlywiki/vanilla/base.tid

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