mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-01-09 17:00:27 +00:00
Code Issues Releases Wiki Activity

big WIP: keeping the values in fixed-fluid mode fixed-fluid

Browse Source
This commit is contained in:
BurningTreeC 2024-11-06 08:25:08 +01:00
parent 3b9b535b36
commit a609ffe5e0
5 changed files with 65 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
core/wiki/macros/sidebar-resizer.tid
View File

@ -135,38 +135,54 @@ title: $:/core/procedures/sidebar-resizer
storyPaddingRightValue={{{ [<storyPaddingRightTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingRightTiddler>!is[blank]is[missing]then[0px]] :else[<get.theme.metric storypaddingright>] }}} storyPaddingRightValue={{{ [<storyPaddingRightTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingRightTiddler>!is[blank]is[missing]then[0px]] :else[<get.theme.metric storypaddingright>] }}}
storyPaddingRight={{{ [convert.to.pixels.locally<storyPaddingRightValue>] }}} storyPaddingRight={{{ [convert.to.pixels.locally<storyPaddingRightValue>] }}}
storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}} storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}}
storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>add<storyPaddingLeft>add<storyPaddingRight>] }}} storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[<get.theme.metric sidebarminwidth>] }}} sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[<get.theme.metric sidebarminwidth>] }}}
sidebarPaddingValue={{{ [<sidebarPaddingTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarPaddingTiddler>!is[blank]is[missing]then<get.sidebar.padding>] :else[<get.theme.metric sidebarpadding>] }}} sidebarPaddingValue={{{ [<sidebarPaddingTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarPaddingTiddler>!is[blank]is[missing]then<get.sidebar.padding>] :else[<get.theme.metric sidebarpadding>] }}}
sidebarPadding={{{ [convert.to.pixels.locally<sidebarPaddingValue>] }}} sidebarPadding={{{ [convert.to.pixels.locally<sidebarPaddingValue>] }}}
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then<get.sidebar.minwidth>] :else[<get.theme.metric storyleft>] }}} storyLeftValue={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then<get.sidebar.minwidth>] :else[<get.theme.metric storyleft>] }}}
storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}} storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}}
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>subtract<sidebarPadding>subtract<storyLeft>] }}} sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
sidebarMinWidthWithoutPadding={{{ [<sidebarMinWidth>subtract<sidebarPadding>] }}}
clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}} clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}} newClampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidthWithoutPadding>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
storyRightStart={{{ [<storyRightStart>subtract<clampedDiff>] }}}
storyWidthStart={{{ [<storyWidthStart>subtract<newClampedDiff>] }}}
storyRightStart={{{ [<storyRightStart>subtract<newClampedDiff>] }}}
storyWidth={{{ [<storyWidthStart>add<dragDiff>] }}} storyWidth={{{ [<storyWidthStart>add<dragDiff>] }}}
innerStoryWidth={{{ [<storyWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}} innerStoryWidth={{{ [<storyWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
innerStoryWidthStart={{{ [<storyWidthStart>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}} innerStoryWidthStart={{{ [<storyWidthStart>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
storyMinWidth={{{ [<storyMinWidth>add<sidebarPadding>] }}}
storyMinWidthAddLeft={{{ [<storyMinWidth>add<storyLeft>] }}} storyMinWidthAddLeft={{{ [<storyMinWidth>add<storyLeft>] }}}
storyRiverLimit={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>] }}}
startStoryRightStartStoryWidthDiff={{{ [<storyRightStart>subtract<storyWidthStart>] }}}
storyRiverLimit={{{ [<widgetNodeWidth>subtract<sidebarMinWidthWithoutPadding>] }}}
storyMaxWidth={{{ [<storyRiverLimit>subtract<storyLeft>] }}} storyMaxWidth={{{ [<storyRiverLimit>subtract<storyLeft>] }}}
storyStartWidthStoryMaxWidthDiff={{{ [<storyWidthStart>add<newClampedDiff>subtract<storyMaxWidth>] }}}
storyMaxWidth={{{ [<storyStartWidthStoryMaxWidthDiff>compare:number:gt[0]then<storyMaxWidth>add<storyStartWidthStoryMaxWidthDiff>] :else[<storyMaxWidth>] }}}
storyRightLimit={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>add<storyPaddingRight>add<startStoryRightStartStoryWidthDiff>subtract<storyLeft>] }}}
storyRightLimit={{{ [<storyStartWidthStoryMaxWidthDiff>compare:number:gt[0]then<storyRightLimit>add<storyStartWidthStoryMaxWidthDiff>] :else[<storyRightLimit>] }}}
storyWidth={{{ [<storyStartWidthStoryMaxWidthDiff>compare:number:gt[0]then<storyWidth>add<storyStartWidthStoryMaxWidthDiff>] :else[<storyWidth>] }}}
innerStoryWidth={{{ [<storyStartWidthStoryMaxWidthDiff>compare:number:gt[0]then<innerStoryWidth>add<storyStartWidthStoryMaxWidthDiff>] :else[<innerStoryWidth>] }}}
storyRiverWidth={{{ [<storyStartWidthStoryMaxWidthDiff>compare:number:gt[0]then<storyRiverWidth>add<storyStartWidthStoryMaxWidthDiff>] :else[<storyRiverWidth>] }}}
storyRightStartStoryWidthStartDiff={{{ [<storyRightStart>subtract<storyLeft>subtract<storyWidthStart>] }}}
innerStoryWidthMin={{{ [<storyMinWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}} innerStoryWidthMin={{{ [<storyMinWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
innerStoryWidthMax={{{ [<storyMaxWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}} innerStoryWidthMax={{{ [<storyMaxWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
tiddlerWidthMetric={{{ [<get.resizer.state>get[tiddler-width-metric]] }}} tiddlerWidthMetric={{{ [<get.resizer.state>get[tiddler-width-metric]] }}}
tiddlerWidthStart={{{ [<get.resizer.state>get[start-tiddler-width]] }}} tiddlerWidthStart={{{ [<get.resizer.state>get[start-tiddler-width]] }}}
tiddlerWidthStartPixels={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthStart>multiply<innerStoryWidthStart>divide[100]] :else[convert.to.pixels.locally<tiddlerWidthStart>] }}} tiddlerWidthStartPixels={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthStart>multiply<innerStoryWidthStart>divide[100]] :else[convert.to.pixels.locally<tiddlerWidthStart>] }}}
tiddlerWidthClampedDiff={{{ [<tiddlerWidthStartPixels>add<storyPaddingLeft>add<storyPaddingRight>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}} tiddlerWidthClampedDiff={{{ [<tiddlerWidthStartPixels>add<storyPaddingLeft>add<storyPaddingRight>add<storyLeft>add<sidebarMinWidthWithoutPadding>add<storyRightStartStoryWidthStartDiff>subtract<storyLeft>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
tiddlerWidth={{{ [<storyWidth>compare:number:lteq<storyMaxWidth>then<storyWidth>compare:number:gteq<storyMinWidth>then<tiddlerWidthStartPixels>add<dragDiff>subtract<tiddlerWidthClampedDiff>] :else[[]] }}} tiddlerWidth={{{ [<storyWidth>compare:number:lteq<storyMaxWidth>then<storyWidth>compare:number:gteq<storyMinWidth>then<tiddlerWidthStartPixels>add<dragDiff>subtract<tiddlerWidthClampedDiff>] :else[[]] }}}
tiddlerWidthDiff={{{ [<storyWidthStart>subtract<tiddlerWidthStartPixels>] }}} tiddlerWidthDiff={{{ [<storyWidthStart>add<newClampedDiff>subtract<tiddlerWidthStartPixels>] }}}
tiddlerMinWidth={{{ [<storyMinWidth>subtract<tiddlerWidthDiff>] }}} tiddlerMinWidth={{{ [<storyMinWidth>subtract<tiddlerWidthDiff>] }}}
tiddlerMaxWidth={{{ [<storyMaxWidth>subtract<tiddlerWidthDiff>] }}} tiddlerMaxWidth={{{ [<storyMaxWidth>subtract<tiddlerWidthDiff>] }}}
storyWidthStoryRightStartDiff={{{ [<storyRightStart>subtract<storyWidthStart>] }}}
storyRiverWidth={{{ [<storyWidthStoryRightStartDiff>compare:number:eq<storyLeft>then<storyRiverWidth>] :else[<storyWidthStoryRightStartDiff>compare:number:gt[0]then<storyWidth>add<storyWidthStoryRightStartDiff>] :else[<storyWidthStoryRightStartDiff>compare:number:lt[0]then<storyWidth>subtract<storyWidthStoryRightStartDiff>] :else[<storyRiverWidth>] }}} storyMinRight={{{ [<storyMinWidth>add<storyLeft>add<storyRightStartStoryWidthStartDiff>] }}}
storyRiverWidth={{{ [<storyRiverWidth>subtract<clampedDiff>] }}} storyRiverWidth={{{ [<storyRiverWidth>subtract<newClampedDiff>] }}}>
storyRightLimit={{{ [<storyWidthStoryRightStartDiff>compare:number:eq[0]then<storyRiverLimit>subtract<storyLeft>] :else[<storyWidthStoryRightStartDiff>compare:number:gt[0]then<storyRiverLimit>] :else[<storyWidthStoryRightStartDiff>compare:number:lt[0]then<storyRiverLimit>] :else[<storyRiverLimit>] }}}
storyMinRight={{{ [<storyMinWidth>add<storyWidthStoryRightStartDiff>] }}}>
<$let <$let
storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}} storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}}
@ -207,7 +223,7 @@ title: $:/core/procedures/sidebar-resizer
\end \end
\function get.sidebar-width.result() \function get.sidebar-width.result()
[<innerStoryWidth>compare:number:lt<storyMinWidth>then<sidebarMaxWidthConverted>addsuffix<sidebarWidthMetric>] [<storyWidth>compare:number:lt<storyMinWidth>then<sidebarMaxWidthConverted>addsuffix<sidebarWidthMetric>]
:else[<sidebarWidth>compare:number:lt<sidebarMinWidth>then<sidebarMinWidthConverted>addsuffix<sidebarWidthMetric>] :else[<sidebarWidth>compare:number:lt<sidebarMinWidth>then<sidebarMinWidthConverted>addsuffix<sidebarWidthMetric>]
:else[<sidebarWidthConverted>addsuffix<sidebarWidthMetric>] :else[<sidebarWidthConverted>addsuffix<sidebarWidthMetric>]
\end \end
@ -234,9 +250,10 @@ title: $:/core/procedures/sidebar-resizer
storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}} storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}}
storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}} storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}}
storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}} storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}} sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>] }}}
clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}} clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>] }}} sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>] }}}
storyWidth={{{ [<widgetNodeWidth>subtract<sidebarWidth>subtract<storyLeft>] }}}
innerStoryWidth={{{ [<widgetNodeWidth>subtract<sidebarWidth>subtract<storyLeft>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}> innerStoryWidth={{{ [<widgetNodeWidth>subtract<sidebarWidth>subtract<storyLeft>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}>
<$let <$let

4
themes/tiddlywiki/centralised/styles.tid
View File

@ -9,7 +9,7 @@ tags: [[$:/tags/Stylesheet]]
text-align: center; text-align: center;
} }
html .tc-story-river { html .tc-story-river, html .tc-sidebar-left .tc-story-river {
position: relative; position: relative;
width: min(<<get.theme.metric storywidth>>,calc(100% - (2 * <<get.theme.metric sidebarminwidth>>))); width: min(<<get.theme.metric storywidth>>,calc(100% - (2 * <<get.theme.metric sidebarminwidth>>)));
padding: 42px <<get.theme.metric storypaddingright>> 42px <<get.theme.metric storypaddingleft>>; padding: 42px <<get.theme.metric storypaddingright>> 42px <<get.theme.metric storypaddingleft>>;
@ -41,7 +41,7 @@ tags: [[$:/tags/Stylesheet]]
padding-left: 42px; padding-left: 42px;
} }
html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable { html[dir="rtl"] body.tc-body .tc-sidebar-left .tc-sidebar-scrollable {
padding-right: 42px; padding-right: 42px;
padding-left: 0; padding-left: 0;
} }

1
themes/tiddlywiki/tight/metrics.multids
View File

@ -1,5 +1,6 @@
title: $:/themes/tiddlywiki/tight/metrics/ title: $:/themes/tiddlywiki/tight/metrics/
sidebarpadding: 0px
sidebarwidth: 350px sidebarwidth: 350px
storypaddingleft: 0px storypaddingleft: 0px
storypaddingright: 0px storypaddingright: 0px

33
themes/tiddlywiki/vanilla/base.tid
View File

@ -1019,7 +1019,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
.tc-sidebar-scrollable { .tc-sidebar-scrollable {
position: fixed; position: fixed;
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}}; top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> + <<get.theme.metric sidebarpadding>>)); left: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>>)),calc(100% - <<get.theme.metric sidebarpadding>>));
bottom: 0; bottom: 0;
right: 0; right: 0;
overflow-y: auto; overflow-y: auto;
@ -1029,11 +1029,14 @@ button.tc-btn-invisible.tc-remove-tag-button {
padding: 71px 0 28px <<get.theme.metric sidebarpadding>>; padding: 71px 0 28px <<get.theme.metric sidebarpadding>>;
} }
.tc-sidebar-scrollable {
left: <<get.theme.metric storyright>>;
}
html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable, .tc-sidebar-left .tc-sidebar-scrollable { html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable, .tc-sidebar-left .tc-sidebar-scrollable {
left: 0; left: 0;
right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>>),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> + <<get.theme.metric sidebarpadding>>)); right: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>>),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> + <<get.theme.metric sidebarpadding>>)),<<get.theme.metric sidebarpadding>>);
margin: 0 -<<get.theme.metric sidebarpadding>> 0 0; margin: 0 -<<get.theme.metric sidebarpadding>> 0 0;
z-index: 1;
} }
html[dir="rtl"] .tc-sidebar-scrollable { html[dir="rtl"] .tc-sidebar-scrollable {
@ -1042,8 +1045,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
} }
html[dir="rtl"] .tc-sidebar-scrollable:not(.tc-sidebar-left .tc-sidebar-scrollable) { html[dir="rtl"] .tc-sidebar-scrollable:not(.tc-sidebar-left .tc-sidebar-scrollable) {
z-index: 1; left: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>>),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> + <<get.theme.metric sidebarpadding>>)),calc(100% - <<get.theme.metric sidebarpadding>>));
left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>>),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> + <<get.theme.metric sidebarpadding>>));
} }
.tc-story-river { .tc-story-river {
@ -1054,6 +1056,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
padding: 42px <<get.theme.metric storypaddingright>> 42px <<get.theme.metric storypaddingleft>>; padding: 42px <<get.theme.metric storypaddingright>> 42px <<get.theme.metric storypaddingleft>>;
} }
.tc-story-river {
right: calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>);
width: <<get.theme.metric storywidth>>;
}
.tc-sidebar-left .tc-story-river { .tc-sidebar-left .tc-story-river {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -1530,13 +1537,13 @@ html body.tc-body.tc-single-tiddler-window {
position: relative; position: relative;
width: auto; width: auto;
left: 0; left: 0;
margin-left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}); margin-left: max(0px,<<get.theme.metric storyleft>>);
margin-right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - <<get.theme.metric sidebarpadding>>),calc(<<get.theme.metric sidebarwidth>> - <<get.theme.metric sidebarpadding>>),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}})); margin-right: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.metric sidebarpadding>>),calc(<<get.theme.metric sidebarwidth>> - <<get.theme.metric sidebarpadding>>),calc(100% - <<get.theme.metric storyleft>> - <<get.theme.metric storyminwidth>>));
} }
html[dir="rtl"] .tc-sidebar-left .tc-story-river, .tc-sidebar-left .tc-story-river { html[dir="rtl"] .tc-sidebar-left .tc-story-river, .tc-sidebar-left .tc-story-river {
margin-right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}); margin-right: max(0px,<<get.theme.metric storyleft>>);
margin-left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - <<get.theme.metric sidebarpadding>>),calc(<<get.theme.metric sidebarwidth>> - <<get.theme.metric sidebarpadding>>),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}})); margin-left: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.metric sidebarpadding>>),calc(<<get.theme.metric sidebarwidth>> - <<get.theme.metric sidebarpadding>>),calc(100% - <<get.theme.metric storyleft>> - <<get.theme.metric storyminwidth>>));
left: auto; left: auto;
width: auto; width: auto;
right: 0; right: 0;
@ -1555,13 +1562,13 @@ html body.tc-body.tc-single-tiddler-window {
left: auto; left: auto;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + <<get.theme.metric storypaddingright>>)); width: clamp(<<get.theme.metric sidebarminwidth>>,<<get.theme.metric sidebarwidth>>,(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>> + <<get.theme.metric storypaddingright>>));
} }
.tc-sidebar-left .tc-sidebar-scrollable { .tc-sidebar-left .tc-sidebar-scrollable {
left: 0; left: 0;
right: auto; right: auto;
width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + <<get.theme.metric storypaddingleft>>)); width: clamp(<<get.theme.metric sidebarminwidth>>,<<get.theme.metric sidebarwidth>>,(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>> + <<get.theme.metric storypaddingleft>>));
} }
html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable { html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable {
@ -1586,13 +1593,13 @@ html body.tc-body.tc-single-tiddler-window {
} }
.tc-sidebar-left .tc-story-river { .tc-sidebar-left .tc-story-river {
margin-left: max(<<get.theme.metric storypaddingleft>>,calc(<<get.theme.metric storypaddingleft>> + {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})); margin-left: max(<<get.theme.metric storypaddingleft>>,calc(<<get.theme.metric storypaddingleft>> + <<get.theme.metric storyleft>>));
margin-right: 0; margin-right: 0;
} }
html[dir="rtl"] .tc-sidebar-left .tc-story-river { html[dir="rtl"] .tc-sidebar-left .tc-story-river {
margin-left: 0; margin-left: 0;
margin-right: max(<<get.theme.metric storypaddingleft>>,calc(<<get.theme.metric storypaddingleft>> + {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}})); margin-right: max(<<get.theme.metric storypaddingleft>>,calc(<<get.theme.metric storypaddingleft>> + <<get.theme.metric storyleft>>));
} }
body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame { body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {

12
themes/tiddlywiki/vanilla/sidebar-resizer.tid
View File

@ -112,12 +112,20 @@ code-body: yes
<%if [<set.storywidth.storyright>match[yes]] %> <%if [<set.storywidth.storyright>match[yes]] %>
.tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-resizer.tc-main-sidebar-resizer {
left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),clamp(calc(<<get.theme.metric storywidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))); left: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),clamp(calc(<<get.theme.metric storywidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),calc(100% - (2 * <<get.theme.metric sidebarpadding>> / 3)));
}
.tc-sidebar-resizer.tc-main-sidebar-resizer {
left: min(max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),calc(100% - (2 * <<get.theme.metric sidebarpadding>> / 3)));
} }
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
left: auto; left: auto;
right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),clamp(calc(<<get.theme.metric storywidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))); right: max(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),clamp(calc(<<get.theme.metric storywidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),calc(2 * <<get.theme.metric sidebarpadding>> / 3));
}
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
right: min(max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),calc(100% - (2 * <<get.theme.metric sidebarpadding>> / 3)));
} }
<% endif %> <% endif %>