diff --git a/core/ui/ControlPanel/Basics.tid b/core/ui/ControlPanel/Basics.tid index 46df7e77c..dd5580ad5 100644 --- a/core/ui/ControlPanel/Basics.tid +++ b/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 |<> |''<>'' | |<$link to="$:/SiteTitle"><> |<$edit-text tiddler="$:/SiteTitle" default="" tag="input"/> | |<$link to="$:/SiteSubtitle"><> |<$edit-text tiddler="$:/SiteSubtitle" default="" tag="input"/> | |<$link to="$:/status/UserName"><> |<$edit-text tiddler="$:/status/UserName" default="" tag="input"/> | |<$link to="$:/config/AnimationDuration"><> |<$edit-text tiddler="$:/config/AnimationDuration" default="" tag="input"/> | -|<$link to="$:/DefaultTiddlers"><> |<>
<$edit tag="textarea" tiddler="$:/DefaultTiddlers" class="tc-edit-texteditor"/>
//<>// | +|<$link to="$:/DefaultTiddlers"><> |<>
<$edit class="tc-edit-texteditor" tiddler="$:/DefaultTiddlers"/>
//<>// | |<$link to="$:/language/DefaultNewTiddlerTitle"><> |<$edit-text tiddler="$:/language/DefaultNewTiddlerTitle" default="" tag="input"/> | |<$link to="$:/config/NewJournal/Title"><> |<$edit-text tiddler="$:/config/NewJournal/Title" default="" tag="input"/> | -|<$link to="$:/config/NewJournal/Text"><> |<$edit tiddler="$:/config/NewJournal/Text" tag="textarea" class="tc-edit-texteditor" default=""/> | +|<$link to="$:/config/NewJournal/Text"><> |<$edit tiddler="$:/config/NewJournal/Text" class="tc-edit-texteditor" default=""/> | |<$link to="$:/config/NewTiddler/Tags"><> |<$vars currentTiddler="$:/config/NewTiddler/Tags" tagField="text">{{||$:/core/ui/EditTemplate/tags}}<$list filter="[tags[]] +[limit[1]]" variable="ignore"><$button tooltip={{$:/language/ControlPanel/Basics/RemoveTags/Hint}}><><$action-listops $tiddler=<> $field="text" $subfilter={{{ [get[tags]] }}}/><$action-setfield $tiddler=<> tags=""/> | |<$link to="$:/config/NewJournal/Tags"><> |<$vars currentTiddler="$:/config/NewJournal/Tags" tagField="text">{{||$:/core/ui/EditTemplate/tags}}<$list filter="[tags[]] +[limit[1]]" variable="ignore"><$button tooltip={{$:/language/ControlPanel/Basics/RemoveTags/Hint}}><><$action-listops $tiddler=<> $field="text" $subfilter={{{ [get[tags]] }}}/><$action-setfield $tiddler=<> tags=""/> | |<$link to="$:/config/AutoFocus"><> |{{$:/snippets/minifocusswitcher}} | diff --git a/editions/tw5.com/tiddlers/Tables in WikiText CSS Utility Classes.tid b/editions/tw5.com/tiddlers/Tables in WikiText CSS Utility Classes.tid new file mode 100644 index 000000000..14abc1c86 --- /dev/null +++ b/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`: + +<> + +!! 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` + +<> | +|<<.lorem>> |Cell4 | +|Header|Header|h +""">> + +!! Table with Maximum Width + +To expand a table to full tiddler width, use `tc-max-width` + +<> + +!! 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` + +< | +|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` + +< | +|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. + +< | +|^ [[Link to a tiddler]]
some more text|<$edit-text tiddler="$:/temp/test-table-input" field="text"/> | +""">> diff --git a/editions/tw5.com/tiddlers/definitions/HTML Block Elements.tid b/editions/tw5.com/tiddlers/definitions/HTML Block Elements.tid new file mode 100644 index 000000000..373ce9b45 --- /dev/null +++ b/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 diff --git a/editions/tw5.com/tiddlers/wikitext/Table Classes Captions Headers and Footers.tid b/editions/tw5.com/tiddlers/wikitext/Table Classes Captions Headers and Footers.tid new file mode 100644 index 000000000..9e09827a2 --- /dev/null +++ b/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" + +<> diff --git a/editions/tw5.com/tiddlers/wikitext/Tables in WikiText.tid b/editions/tw5.com/tiddlers/wikitext/Tables in WikiText.tid index 9c1d83ed4..c7af206d7 100644 --- a/editions/tw5.com/tiddlers/wikitext/Tables in WikiText.tid +++ b/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" -<> +More examples can be found at: [[Tables in WikiText CSS Utility Classes]] diff --git a/editions/tw5.com/tiddlers/wikitext/Utility Classes.tid b/editions/tw5.com/tiddlers/wikitext/Utility Classes.tid new file mode 100644 index 000000000..4a291e34b --- /dev/null +++ b/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 | diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 74274595a..6ff10e040 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/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 <>; border-left: 1px solid <>; } @@ -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 */