1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-09-21 03:39:43 +00:00

Fix float right overflow (#8557)

* tc-subtitle is not a sibling to tc-body,
So tc-subtitle needs a clearfix to contains float:right

* add clearfix to all tiddler elements that could contain floats

* add clearfix to tc-tiddler-title in ViewTemplate

* add clearfix to plugin/blog/templates

* add clearfix to plugin/tour/templates

* remove test tiddler

* rename draft title class to tc-tiddler-title-draft

* undo title field covering

* move tc-clearfix to tc-float-right in the base CSS file

* rename clearfix CSS class to tc-clearfix

* update documentation tiddlers
This commit is contained in:
Mario Pietsch 2024-09-09 10:48:57 +02:00 committed by GitHub
parent d827c57dcf
commit e1b3308a9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 34 additions and 30 deletions

View File

@ -1,23 +1,23 @@
title: $:/core/templates/server/static.tiddler.wikitext title: $:/core/templates/server/static.tiddler.wikitext
\whitespace trim \whitespace trim
<div class="tc-tiddler-title"> <div class="tc-tiddler-title tc-clearfix">
<div class="tc-titlebar"> <div class="tc-titlebar">
<h2><$text text=<<currentTiddler>>/></h2> <h2><$text text=<<currentTiddler>>/></h2>
</div> </div>
</div> </div>
<div class="tc-subtitle"> <div class="tc-subtitle tc-clearfix">
<$link to={{!!modifier}}> <$link to={{!!modifier}}>
<$view field="modifier"/> <$view field="modifier"/>
</$link> <$view field="modified" format="date" template={{$:/language/Tiddler/DateFormat}}/> </$link> <$view field="modified" format="date" template={{$:/language/Tiddler/DateFormat}}/>
</div> </div>
<div class="tc-tags-wrapper"> <div class="tc-tags-wrapper" tc-clearfix>
<$list filter="[all[current]tags[]sort[title]]"> <$list filter="[all[current]tags[]sort[title]]">
<a href={{{ [<currentTiddler>encodeuricomponent[]] }}}> <a href={{{ [<currentTiddler>encodeuricomponent[]] }}}>
<$macrocall $name="tag-pill" tag=<<currentTiddler>>/> <$macrocall $name="tag-pill" tag=<<currentTiddler>>/>
</a> </a>
</$list> </$list>
</div> </div>
<div class="tc-tiddler-body"> <div class="tc-tiddler-body tc-clearfix">
<$transclude mode="block"/> <$transclude mode="block"/>
</div> </div>

View File

@ -3,7 +3,7 @@ tags: $:/tags/EditTemplate
\define config-title() $:/config/EditToolbarButtons/Visibility/$(listItem)$ \define config-title() $:/config/EditToolbarButtons/Visibility/$(listItem)$
\whitespace trim \whitespace trim
<div class="tc-tiddler-title tc-tiddler-edit-title"> <div class="tc-tiddler-title tc-tiddler-edit-title tc-clearfix">
<$view field="title"/> <$view field="title"/>
<span class="tc-tiddler-controls tc-titlebar"> <span class="tc-tiddler-controls tc-titlebar">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/EditToolbar]!has[draft.of]]" variable="listItem"> <$list filter="[all[shadows+tiddlers]tag[$:/tags/EditToolbar]!has[draft.of]]" variable="listItem">
@ -14,5 +14,4 @@ tags: $:/tags/EditTemplate
</$let> </$let>
</$list> </$list>
</span> </span>
<div style="clear: both;"></div>
</div> </div>

View File

@ -3,7 +3,7 @@ tags: $:/tags/ViewTemplate
\import [all[shadows+tiddlers]tag[$:/tags/Macro/View/Body]!is[draft]] [all[shadows+tiddlers]tag[$:/tags/Global/View/Body]!is[draft]] \import [all[shadows+tiddlers]tag[$:/tags/Macro/View/Body]!is[draft]] [all[shadows+tiddlers]tag[$:/tags/Global/View/Body]!is[draft]]
<$reveal tag="div" class="tc-tiddler-body" type="nomatch" stateTitle=<<folded-state>> text="hide" retain="yes" animate="yes"> <$reveal tag="div" class="tc-tiddler-body tc-clearfix" type="nomatch" stateTitle=<<folded-state>> text="hide" retain="yes" animate="yes">
<$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/ViewTemplateBodyFilter]!is[draft]get[text]] :and[!is[blank]else[$:/core/ui/ViewTemplate/body/default]] }}} /> <$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/ViewTemplateBodyFilter]!is[draft]get[text]] :and[!is[blank]else[$:/core/ui/ViewTemplate/body/default]] }}} />

View File

@ -2,7 +2,7 @@ title: $:/core/ui/ViewTemplate/subtitle/default
\whitespace trim \whitespace trim
<$reveal type="nomatch" stateTitle=<<folded-state>> text="hide" tag="div" retain="yes" animate="yes"> <$reveal type="nomatch" stateTitle=<<folded-state>> text="hide" tag="div" retain="yes" animate="yes">
<div class="tc-subtitle"> <div class="tc-subtitle tc-clearfix">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate/Subtitle]!has[draft.of]]" variable="subtitleTiddler"> <$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate/Subtitle]!has[draft.of]]" variable="subtitleTiddler">
<$transclude tiddler=<<subtitleTiddler>> mode="inline"/><$list-join>&nbsp;</$list-join> <$transclude tiddler=<<subtitleTiddler>> mode="inline"/><$list-join>&nbsp;</$list-join>
</$list> </$list>

View File

@ -4,7 +4,7 @@ tags: $:/tags/ViewTemplate
\whitespace trim \whitespace trim
\define title-styles() fill:$(foregroundColor)$; \define title-styles() fill:$(foregroundColor)$;
<div class="tc-tiddler-title"> <div class="tc-tiddler-title tc-clearfix">
<div class="tc-titlebar"> <div class="tc-titlebar">
<span class="tc-tiddler-controls"> <span class="tc-tiddler-controls">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewToolbar]!has[draft.of]] :filter[lookup[$:/config/ViewToolbarButtons/Visibility/]!match[hide]]" <$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewToolbar]!has[draft.of]] :filter[lookup[$:/config/ViewToolbarButtons/Visibility/]!match[hide]]"

View File

@ -1,12 +1,11 @@
title: Tiddlyhost
tags: Definitions
created: 20230410105035569 created: 20230410105035569
modified: 20230410105035569 modified: 20230410105035569
tags: Definitions
title: Tiddlyhost
type: text/vnd.tiddlywiki
<span style="float:right;">[img width=140 [Tiddlyhost Logo]]</span> <span style="float:right;">[img width=140 [Tiddlyhost Logo]]</span>
[[Tiddlyhost.com|https://tiddlyhost.com/]] is a hosting service for TiddlyWiki created by Simon Baird. Once you sign up and confirm your email you can create "sites", (i.e. ~TiddlyWikis), with support for online saving. Sites can be private or public, and you can optionally list them on the taggable and searchable [[Tiddlyhost Hub|https://tiddlyhost.com/hub]] where they'll be discoverable by others. [[Tiddlyhost.com|https://tiddlyhost.com/]] is a hosting service for TiddlyWiki created by Simon Baird. Once you sign up and confirm your email you can create "sites", (i.e. ~TiddlyWikis), with support for online saving. Sites can be private or public, and you can optionally list them on the taggable and searchable [[Tiddlyhost Hub|https://tiddlyhost.com/hub]] where they'll be discoverable by others.
Unlike [[TiddlySpot|Saving on TiddlySpot]], [[Tiddlyhost|https://tiddlyhost.com]] is secure, open source, and has proper support for TiddlyWiki5. It also allows uploading existing ~TiddlyWiki files, supports TiddlyWikiClassic, and lets you claim ownership of your ~TiddlySpot sites. For more information see the [[FAQ|https://github.com/simonbaird/tiddlyhost/wiki/FAQ]] and the [[About|https://tiddlyhost.com/about]] page. Unlike [[TiddlySpot|Saving on TiddlySpot]], [[Tiddlyhost|https://tiddlyhost.com]] is secure, open source, and has proper support for TiddlyWiki5. It also allows uploading existing ~TiddlyWiki files, supports TiddlyWikiClassic, and lets you claim ownership of your ~TiddlySpot sites. For more information see the [[FAQ|https://github.com/simonbaird/tiddlyhost/wiki/FAQ]] and the [[About|https://tiddlyhost.com/about]] page.
<div style="clear: both;"/>

View File

@ -1,7 +1,8 @@
title: Xememex
tags: Definitions
created: 20230410105035569 created: 20230410105035569
modified: 20230410105035569 modified: 20230410105035569
tags: Definitions
title: Xememex
type: text/vnd.tiddlywiki
<span style="float:right;">[img width=340 [Xememex Logo]]</span> <span style="float:right;">[img width=340 [Xememex Logo]]</span>
@ -10,5 +11,3 @@ Xememex is a multiuser TiddlyWiki from [[Intertwingled Innovations]]. It allows
The largest customer implementation has hundreds of online wikis with thousands of users. See https://manuals.annafreud.org/ The largest customer implementation has hundreds of online wikis with thousands of users. See https://manuals.annafreud.org/
Xememex is currently only available under commercial terms from Intertwingled Innovations. Contact [[Jeremy Ruston at Intertwingled Innovations|mailto:jeremy@intertwingledinnovations.com]] for more details. Xememex is currently only available under commercial terms from Intertwingled Innovations. Contact [[Jeremy Ruston at Intertwingled Innovations|mailto:jeremy@intertwingledinnovations.com]] for more details.
<div style="clear: both;"/>

View File

@ -13,7 +13,7 @@ type: text/vnd.tiddlywiki
|`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-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-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 | |`tc-first-link-nowrap` |Ensures that any links in the first table column will never wrap to the next line |
|`tc-clearfix`|<<.from-version "5.3.6">> This class can be used to prevent elements, that have a `class="tc-float-right"` from overflowing their container elements. tc-clearfix is already assigned to all major ViewTemplate and EditTemplate elements. So it only needs to be used where the default does not work out of the box.|
!! Table Utility Classes !! Table Utility Classes
|`tc-table-no-border` |Removes the borders of a table | |`tc-table-no-border` |Removes the borders of a table |

View File

@ -1,8 +1,8 @@
title: $:/plugins/tiddlywiki/blog/templates/tiddler title: $:/plugins/tiddlywiki/blog/templates/tiddler
<div class="tc-tiddler-frame tc-tiddler-view-frame"> <div class="tc-tiddler-frame tc-tiddler-view-frame tc-clearfix">
<div class="tc-tiddler-title"> <div class="tc-tiddler-title tc-clearfix">
<div class="tc-titlebar"> <div class="tc-titlebar">

View File

@ -81,8 +81,8 @@ color:$(foregroundColor)$;
\end \end
<$let storyTiddler=<<currentTiddler>>> <$let storyTiddler=<<currentTiddler>>>
<div class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tiddler-shadow " role="article"> <div class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tiddler-shadow tc-clearfix" role="article">
<div class="tc-tiddler-title"> <div class="tc-tiddler-title tc-clearfix">
<div class="tc-titlebar"> <div class="tc-titlebar">
<span class="tc-tiddler-controls"> <span class="tc-tiddler-controls">
<$list filter="[<tour-simplified-tiddler-close-button>match[yes]]" variable="ignore"> <$list filter="[<tour-simplified-tiddler-close-button>match[yes]]" variable="ignore">
@ -94,12 +94,12 @@ color:$(foregroundColor)$;
</span> </span>
</div> </div>
</div> </div>
<div class="tc-tags-wrapper"> <div class="tc-tags-wrapper tc-clearfix">
<$list filter="[all[current]tags[]sort[title]]" storyview="pop"> <$list filter="[all[current]tags[]sort[title]]" storyview="pop">
<<simplified-tag "$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/">> <<simplified-tag "$:/plugins/tiddlywiki/tour/introduction-to-tiddlywiki/tiddlers/">>
</$list> </$list>
</div> </div>
<div class="tc-tiddler-body"> <div class="tc-tiddler-body tc-clearfix">
<$transclude field="text" mode="block"/> <$transclude field="text" mode="block"/>
</div> </div>
</div> </div>

View File

@ -3,7 +3,7 @@ title: $:/plugins/tiddlywiki/tour/simplified-tiddler
\whitespace trim \whitespace trim
<$let storyTiddler=<<currentTiddler>>> <$let storyTiddler=<<currentTiddler>>>
<div class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tiddler-shadow " role="article"> <div class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tiddler-shadow " role="article">
<div class="tc-tiddler-title"> <div class="tc-tiddler-title tc-clearfix">
<div class="tc-titlebar"> <div class="tc-titlebar">
<span class="tc-tiddler-controls"> <span class="tc-tiddler-controls">
<$list filter="[<tour-simplified-tiddler-close-button>match[yes]]" variable="ignore"> <$list filter="[<tour-simplified-tiddler-close-button>match[yes]]" variable="ignore">
@ -15,7 +15,7 @@ title: $:/plugins/tiddlywiki/tour/simplified-tiddler
</span> </span>
</div> </div>
</div> </div>
<div class="tc-tiddler-body"> <div class="tc-tiddler-body tc-clearfix">
<$transclude field="text" mode="block"/> <$transclude field="text" mode="block"/>
</div> </div>
</div> </div>

View File

@ -1350,10 +1350,6 @@ canvas.tc-edit-bitmapeditor {
display: block; display: block;
} }
.tc-tiddler-body {
clear: both;
}
.tc-single-tiddler-window .tc-tiddler-body, .tc-single-tiddler-window .tc-tiddler-body,
.tc-tiddler-frame .tc-tiddler-body { .tc-tiddler-frame .tc-tiddler-body {
font-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}}; font-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};
@ -2773,6 +2769,16 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
float: right; float: right;
} }
/* Float tc-clearfix. Needs to be used by elements that allow float:right in their content.
** So the floating element does not overflow
*/
.tc-clearfix:after {
content: "";
clear: both;
display: table;
}
/* /*
** Chooser ** Chooser
*/ */
@ -3524,3 +3530,4 @@ span.tc-translink > a:first-child {
.tc-tiny-v-gap-bottom { .tc-tiny-v-gap-bottom {
margin-bottom: 3px; margin-bottom: 3px;
} }