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
TiddlyWiki · Sep 9, 2024 · e1b3308 · e1b3308
1 parent d827c57
commit e1b3308
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 30 deletions.
diff --git a/core/templates/server/static.tiddler.wikitext.tid b/core/templates/server/static.tiddler.wikitext.tid
@@ -1,23 +1,23 @@
 title: $:/core/templates/server/static.tiddler.wikitext
 
 \whitespace trim
-<div class="tc-tiddler-title">
+<div class="tc-tiddler-title tc-clearfix">
 <div class="tc-titlebar">
 <h2><$text text=<<currentTiddler>>/></h2>
 </div>
 </div>
-<div class="tc-subtitle">
+<div class="tc-subtitle tc-clearfix">
 <$link to={{!!modifier}}>
 <$view field="modifier"/>
 </$link> <$view field="modified" format="date" template={{$:/language/Tiddler/DateFormat}}/>
 </div>
-<div class="tc-tags-wrapper">
+<div class="tc-tags-wrapper" tc-clearfix>
 <$list filter="[all[current]tags[]sort[title]]">
 <a href={{{ [<currentTiddler>encodeuricomponent[]] }}}>
 <$macrocall $name="tag-pill" tag=<<currentTiddler>>/>
 </a>
 </$list>
 </div>
-<div class="tc-tiddler-body">
+<div class="tc-tiddler-body tc-clearfix">
 <$transclude mode="block"/>
 </div>
diff --git a/core/ui/EditTemplate/controls.tid b/core/ui/EditTemplate/controls.tid
@@ -3,7 +3,7 @@ tags: $:/tags/EditTemplate
 
 \define config-title() $:/config/EditToolbarButtons/Visibility/$(listItem)$
 \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"/>
 	<span class="tc-tiddler-controls tc-titlebar">
 		<$list filter="[all[shadows+tiddlers]tag[$:/tags/EditToolbar]!has[draft.of]]" variable="listItem">
@@ -14,5 +14,4 @@ tags: $:/tags/EditTemplate
 			</$let>
 		</$list>
 	</span>
-	<div style="clear: both;"></div>
 </div>
diff --git a/core/ui/ViewTemplate/body.tid b/core/ui/ViewTemplate/body.tid
@@ -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]]
 
-<$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]] }}} />
 

diff --git a/core/ui/ViewTemplate/subtitle/default.tid b/core/ui/ViewTemplate/subtitle/default.tid
@@ -2,7 +2,7 @@ title: $:/core/ui/ViewTemplate/subtitle/default
 
 \whitespace trim
 <$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">
 <$transclude tiddler=<<subtitleTiddler>> mode="inline"/><$list-join>&nbsp;</$list-join>
 </$list>

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

diff --git a/editions/tw5.com/tiddlers/definitions/Tiddlyhost.tid b/editions/tw5.com/tiddlers/definitions/Tiddlyhost.tid
@@ -1,12 +1,11 @@
-title: Tiddlyhost
-tags: Definitions
 created: 20230410105035569
 modified: 20230410105035569
+tags: Definitions
+title: Tiddlyhost
+type: text/vnd.tiddlywiki
 
 <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.
 
 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;"/>
diff --git a/editions/tw5.com/tiddlers/definitions/Xememex.tid b/editions/tw5.com/tiddlers/definitions/Xememex.tid
@@ -1,7 +1,8 @@
-title: Xememex
-tags: Definitions
 created: 20230410105035569
 modified: 20230410105035569
+tags: Definitions
+title: Xememex
+type: text/vnd.tiddlywiki
 
 <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/
 
 Xememex is currently only available under commercial terms from Intertwingled Innovations. Contact [[Jeremy Ruston at Intertwingled Innovations|mailto:[email protected]]] for more details.
-
-<div style="clear: both;"/>
diff --git a/editions/tw5.com/tiddlers/wikitext/Utility Classes.tid b/editions/tw5.com/tiddlers/wikitext/Utility Classes.tid
@@ -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-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-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
 
 |`tc-table-no-border` |Removes the borders of a table |

diff --git a/plugins/tiddlywiki/blog/templates/tiddler.tid b/plugins/tiddlywiki/blog/templates/tiddler.tid
@@ -1,8 +1,8 @@
 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">
 

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

diff --git a/plugins/tiddlywiki/tour/simplified-tiddler.tid b/plugins/tiddlywiki/tour/simplified-tiddler.tid
@@ -3,7 +3,7 @@ title: $:/plugins/tiddlywiki/tour/simplified-tiddler
 \whitespace trim
 <$let storyTiddler=<<currentTiddler>>>
 	<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">
 				<span class="tc-tiddler-controls">
 					<$list filter="[<tour-simplified-tiddler-close-button>match[yes]]" variable="ignore">
@@ -15,7 +15,7 @@ title: $:/plugins/tiddlywiki/tour/simplified-tiddler
 				</span>
 			</div>
 		</div>
-		<div class="tc-tiddler-body">
+		<div class="tc-tiddler-body tc-clearfix">
 			<$transclude field="text" mode="block"/>
 		</div>
 	</div>

diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
@@ -1350,10 +1350,6 @@ canvas.tc-edit-bitmapeditor  {
 	display: block;
 }
 
-.tc-tiddler-body {
-	clear: both;
-}
-
 .tc-single-tiddler-window .tc-tiddler-body,
 .tc-tiddler-frame .tc-tiddler-body {
 	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 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
 */
@@ -3524,3 +3530,4 @@ span.tc-translink > a:first-child {
 .tc-tiny-v-gap-bottom {
 	margin-bottom: 3px;
 }
+