mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-01-23 15:36:52 +00:00
Code Issues Releases Wiki Activity

big overhaul. fixed-fluid adjustments, simplifying stylesheets, correcting calculations

Browse Source
This commit is contained in:
BurningTreeC 2024-11-10 10:40:43 +01:00
parent c1e401958e
commit dca7367d8b
9 changed files with 172 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/ui/PageTemplate/sidebar-resizer.tid
View File

@ -8,6 +8,7 @@ code-body: yes
\function resizer.state() [{$:/state/sidebar}] \function resizer.state() [{$:/state/sidebar}]
\function resizer.class() tc-main-sidebar-resizer \function resizer.class() tc-main-sidebar-resizer
\function set.throttling() yes \function set.throttling() yes
\function get.story-sidebar.offset() 42px
\whitespace trim \whitespace trim
<%if [<get.theme.explicit.option sidebarresizer>match[show]] %> <%if [<get.theme.explicit.option sidebarresizer>match[show]] %>

2
core/wiki/functions/themes.tid
View File

@ -107,3 +107,5 @@ code-body: yes
\end \end
\function get.current.theme() [{$:/theme}!is[blank]] :else[all[tiddlers+shadows]plugin-type[theme]plugin-priority[0]first[]] \function get.current.theme() [{$:/theme}!is[blank]] :else[all[tiddlers+shadows]plugin-type[theme]plugin-priority[0]first[]]
\function get.theme.storywidthoverlap() [[calc(abs(]addsuffix<get.theme.metric storyright>addsuffix[ - ]addsuffix<get.theme.metric storywidth>addsuffix[ - ]addsuffix<get.theme.metric storyleft>addsuffix[))]]

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

@ -101,26 +101,85 @@ title: $:/core/procedures/sidebar-resizer
<$action-deletetiddler $tiddler=<<get.resizer.state>>/> <$action-deletetiddler $tiddler=<<get.resizer.state>>/>
\end \end
\function get.story-width.result() \procedure set-storywidth-storyright-actions-inner-actions()
[<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>] <$let
:else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>] storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}}
:else[<storyWidthConverted>addsuffix<storyWidthMetric>] storyWidthConverted={{{ [function[convert.to.result],<storyWidth>,<storyWidthMetric>] }}}
storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}}
storyWidthMaxConverted={{{ [function[convert.to.result],<storyWidthMax>,<storyWidthMetric>] }}}
tiddlerWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>multiply[100]divide<innerStoryWidth>] :else[function[convert.to.result],<tiddlerWidth>,<tiddlerWidthMetric>] }}}
tiddlerMinWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerMinWidth>multiply[100]divide<innerStoryWidthMin>] :else[function[convert.to.result],<tiddlerMinWidth>,<tiddlerWidthMetric>] }}}
tiddlerWidthMaxConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthMax>multiply[100]divide<innerStoryWidthMax>] :else[function[convert.to.result],<tiddlerWidthMax>,<tiddlerWidthMetric>] }}}
storyWidthSetTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<set.theme.metric storywidth>] }}}
tiddlerWidthSetTiddler={{{ [<tiddlerWidthTiddler>!is[blank]] :else[<set.theme.metric tiddlerwidth>] }}}>
<%if [<tiddlerWidth>!is[blank]] %>
<%if [<tiddlerWidth>compare:number:lt<tiddlerMinWidth>] %>
<%if [<tiddlerWidthMetric>match[%]] %>
<$set name="tiddlerMinWidthConverted" value={{{ [<tiddlerMinWidth>multiply[100]divide<innerStoryWidth>] }}}>
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
</$set>
<% else %>
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
<% endif %>
<% else %>
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
<% endif %>
<%elseif [<storyWidthCompare>compare:number:lteq<storyMinWidth>] %>
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
<%elseif [<storyWidthCompare>compare:number:gteq<storyWidthMax>] %>
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerWidthMaxConverted>addsuffix<tiddlerWidthMetric>] }}}/>
<% endif %>
<%if [<storyWidth>!is[blank]] %>
<$action-setfield $tiddler=<<storyWidthSetTiddler>> text={{{ [<storyWidthConverted>addsuffix<storyWidthMetric>] }}}/>
<%elseif [<storyWidthCompare>compare:number:lt<storyMinWidth>] %>
<$action-setfield $tiddler=<<storyWidthSetTiddler>> text={{{ [<storyMinWidthConverted>addsuffix<storyWidthMetric>] }}}/>
<%elseif [<storyWidthCompare>compare:number:gt<storyWidthMax>] %>
<$action-setfield $tiddler=<<storyWidthSetTiddler>> text={{{ [<storyWidthMaxConverted>addsuffix<storyWidthMetric>] }}}/>
<% endif %>
</$let>
<$let
storyRightMetric={{{ [<get.resizer.state>get[story-right-metric]] }}}
storyRightConverted={{{ [function[convert.to.result],<storyRight>,<storyRightMetric>] }}}
storyRightMaxConverted={{{ [function[convert.to.result],<storyRightMax>,<storyRightMetric>] }}}
storyRightMinConverted={{{ [function[convert.to.result],<storyRightMin>,<storyRightMetric>] }}}
storyRightSetTiddler={{{ [<storyRightTiddler>!is[blank]] :else[<set.theme.metric storyright>] }}}>
<%if [<storyRight>!is[blank]] %>
<$action-setfield $tiddler=<<storyRightSetTiddler>> text={{{ [<storyRightConverted>addsuffix<storyRightMetric>] }}}/>
<%elseif [<storyRightCompare>compare:number:lt<storyRightMin>] %>
<$action-setfield $tiddler=<<storyRightSetTiddler>> text={{{ [<storyRightMinConverted>addsuffix<storyRightMetric>] }}}/>
<%elseif [<storyRightCompare>compare:number:gt<storyRightMax>] %>
<$action-setfield $tiddler=<<storyRightSetTiddler>> text={{{ [<storyRightMaxConverted>addsuffix<storyRightMetric>] }}}/>
<% endif %>
</$let>
\end \end
\function get.tiddler-width.result() \procedure set-storywidth-storyright-actions-inner()
[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:lt<storyMinWidth>then<tiddlerWidth>compare:number:gteq[0]then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] <$let
:else[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:lt<storyMinWidth>then<tiddlerWidth>compare:number:lt[0]then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}}
:else[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:gt<storyMaxWidth>then<tiddlerMaxWidthConverted>addsuffix<tiddlerWidthMetric>] storyWidth={{{ [<intermediateStoryWidth>subtract<clampedDiff>] }}}
:else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:lt<tiddlerMinWidth>then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] storyRight={{{ [<intermediateStoryRight>subtract<clampedDiff>] }}}
:else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:gteq<tiddlerMaxWidth>then<tiddlerMaxWidthConverted>addsuffix<tiddlerWidthMetric>] storyRightCompare={{{ [<intermediateStoryRight>subtract<clampedDiff>] }}}
:else[<tiddlerWidth>compare:number:lt[0]then[0]addsuffix<tiddlerWidthMetric>] storyWidthCompare={{{ [<storyWidth>] }}}
:else[<tiddlerWidthConverted>addsuffix<tiddlerWidthMetric>] innerStoryWidth={{{ [<intermediateInnerStoryWidth>subtract<clampedDiff>] }}}
\end innerStoryWidthStart={{{ [<intermediateInnerStoryWidthStart>subtract<clampedDiff>] }}}
innerStoryWidthMin={{{ [<intermediateInnerStoryWidthMin>subtract<clampedDiff>] }}}
\function get.story-right.result() storyRightMax={{{ [<intermediateStoryRightMax>] }}}
[<storyWidth>compare:number:lt<storyMinWidth>then<storyMinRightConverted>addsuffix<storyRightMetric>] tiddlerWidthStartPixels={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthStart>multiply<innerStoryWidthStart>divide[100]] :else[convert.to.pixels.locally<tiddlerWidthStart>] }}}
:else[<storyRiverWidth>compare:number:gteq<storyRightLimit>then<storyRightLimitConverted>addsuffix<storyRightMetric>] tiddlerWidthStoryWidthDiff={{{ [<storyWidthStart>subtract<tiddlerWidthStartPixels>] }}}
:else[<storyRiverWidthConverted>addsuffix<storyRightMetric>] tiddlerMinWidth={{{ [<storyMinWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
tiddlerWidthMax={{{ [<storyWidthMax>subtract<tiddlerWidthStoryWidthDiff>] }}}
tiddlerWidth={{{ [<tiddlerWidthStartPixels>add<dragDiff>] }}}
tiddlerWidth={{{ [<storyWidth>compare:number:gt<storyMinWidth>compare:number:lt<storyWidthMax>then<tiddlerWidth>] :else[[]] }}}
storyRight={{{ [<storyRight>compare:number:lt<storyRightMax>compare:number:gt<storyRightMin>] :else[[]] }}}
storyWidth={{{ [<storyWidth>compare:number:lt<storyWidthMax>compare:number:gt<storyMinWidth>] :else[[]] }}}
>
<<set-storywidth-storyright-actions-inner-actions>>
</$let>
\end \end
\procedure set-storywidth-storyright-actions() \procedure set-storywidth-storyright-actions()
@ -129,7 +188,6 @@ title: $:/core/procedures/sidebar-resizer
storyWidthStart={{{ [<get.resizer.state>get[start-story-width]] }}} storyWidthStart={{{ [<get.resizer.state>get[start-story-width]] }}}
storyRightStart={{{ [convert.to.pixels.locally<storyRightStart>] }}} storyRightStart={{{ [convert.to.pixels.locally<storyRightStart>] }}}
storyWidthStart={{{ [convert.to.pixels.locally<storyWidthStart>] }}} storyWidthStart={{{ [convert.to.pixels.locally<storyWidthStart>] }}}
storyRiverWidth={{{ [<storyRightStart>add<dragDiff>] }}}
storyPaddingLeftValue={{{ [<storyPaddingLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingLeftTiddler>!is[blank]is[missing]then[0px]] :else[<get.theme.metric storypaddingleft>] }}} storyPaddingLeftValue={{{ [<storyPaddingLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingLeftTiddler>!is[blank]is[missing]then[0px]] :else[<get.theme.metric storypaddingleft>] }}}
storyPaddingLeft={{{ [convert.to.pixels.locally<storyPaddingLeftValue>] }}} storyPaddingLeft={{{ [convert.to.pixels.locally<storyPaddingLeftValue>] }}}
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>] }}}
@ -142,98 +200,60 @@ title: $:/core/procedures/sidebar-resizer
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>] }}} sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.offset>] :else[[0]] }}}
sidebarMinWidthWithoutPadding={{{ [<sidebarMinWidth>subtract<sidebarPadding>] }}} sidebarMinWidthWithoutOffset={{{ [<sidebarMinWidth>subtract<storySidebarOffset>] }}}
clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
newClampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidthWithoutPadding>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
storyWidthStart={{{ [<storyWidthStart>subtract<newClampedDiff>] }}}
storyRightStart={{{ [<storyRightStart>subtract<newClampedDiff>] }}}
storyWidth={{{ [<storyWidthStart>add<dragDiff>] }}}
innerStoryWidth={{{ [<storyWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
innerStoryWidthStart={{{ [<storyWidthStart>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
storyMinWidthAddLeft={{{ [<storyMinWidth>add<storyLeft>] }}}
startStoryRightStartStoryWidthDiff={{{ [<storyRightStart>subtract<storyWidthStart>] }}}
storyRiverLimit={{{ [<widgetNodeWidth>subtract<sidebarMinWidthWithoutPadding>] }}}
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>] }}}
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>] }}}
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[[]] }}}
tiddlerWidthDiff={{{ [<storyWidthStart>add<newClampedDiff>subtract<tiddlerWidthStartPixels>] }}}
tiddlerMinWidth={{{ [<storyMinWidth>subtract<tiddlerWidthDiff>] }}}
tiddlerMaxWidth={{{ [<storyMaxWidth>subtract<tiddlerWidthDiff>] }}}
storyMinRight={{{ [<storyMinWidth>add<storyLeft>add<storyRightStartStoryWidthStartDiff>] }}} intermediateStoryWidthStart={{{ [<storyWidthStart>] }}}
storyRiverWidth={{{ [<storyRiverWidth>subtract<newClampedDiff>] }}}>
<$let intermediateStoryWidth={{{ [<storyWidthStart>add<dragDiff>] }}}
storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}} intermediateStoryRight={{{ [<storyRightStart>add<dragDiff>] }}}
storyWidthConverted={{{ [function[convert.to.result],<storyWidth>,<storyWidthMetric>] }}}
storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}}
storyMaxWidthConverted={{{ [function[convert.to.result],<storyMaxWidth>,<storyWidthMetric>] }}}
tiddlerWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>multiply[100]divide<innerStoryWidth>] :else[function[convert.to.result],<tiddlerWidth>,<tiddlerWidthMetric>] }}}
tiddlerMinWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerMinWidth>multiply[100]divide<innerStoryWidthMin>] :else[function[convert.to.result],<tiddlerMinWidth>,<tiddlerWidthMetric>] }}}
tiddlerMaxWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerMaxWidth>multiply[100]divide<innerStoryWidthMax>] :else[function[convert.to.result],<tiddlerMaxWidth>,<tiddlerWidthMetric>] }}}
storyWidthSetTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<set.theme.metric storywidth>] }}}
tiddlerWidthSetTiddler={{{ [<tiddlerWidthTiddler>!is[blank]] :else[<set.theme.metric tiddlerwidth>] }}}>
<%if [<tiddlerWidth>!is[blank]] %> intermediateInnerStoryWidth={{{ [<intermediateStoryWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text=<<get.tiddler-width.result>>/> intermediateInnerStoryWidthStart={{{ [<storyWidthStart>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
<%elseif [<storyWidth>compare:number:gt<storyMaxWidth>] %>
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerMaxWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
<%elseif [<storyWidth>compare:number:lt<storyMinWidth>] %>
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
<% endif %>
<$action-setfield $tiddler=<<storyWidthSetTiddler>> text=<<get.story-width.result>>/>
</$let> intermediateStoryRightMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidthWithoutOffset>] }}}
intermediateStoryRightMin={{{ [<storyMinWidth>add<storyleft>] }}}
<$let intermediateStoryWidthMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidthWithoutOffset>subtract<storyLeft>] }}}
storyRightMetric={{{ [<get.resizer.state>get[story-right-metric]] }}}
storyRiverWidthConverted={{{ [function[convert.to.result],<storyRiverWidth>,<storyRightMetric>] }}}
storyRightLimitConverted={{{ [function[convert.to.result],<storyRightLimit>,<storyRightMetric>] }}}
storyMinRightConverted={{{ [function[convert.to.result],<storyMinRight>,<storyRightMetric>] }}}
storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyRightMetric>] }}}
storyMinWidthAddLeftConverted={{{ [function[convert.to.result],<storyMinWidthAddLeft>,<storyRightMetric>] }}}
storyRightSetTiddler={{{ [<storyRightTiddler>!is[blank]] :else[<set.theme.metric storyright>] }}}>
<$action-setfield $tiddler=<<storyRightSetTiddler>> text=<<get.story-right.result>>/> intermediateInnerStoryWidthMin={{{ [<storyMinWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
intermediateInnerStoryWidthMax={{{ [<intermediateStoryWidthMax>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
</$let> storyWidthOverlap={{{ [<storyWidthStart>add<storyLeft>subtract<storyRightStart>] }}}
storyRightOverlap={{{ [<storyRightStart>subtract<storyLeft>subtract<storyWidthStart>] }}}
>
<%if [<storyWidthOverlap>compare:number:gteq[0]] %>
<$let
clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidthWithoutOffset>subtract<storyWidthOverlap>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
innerStoryWidthMax={{{ [<intermediateInnerStoryWidthMax>add<storyWidthOverlap>] }}}
storyRightMin={{{ [<intermediateStoryRightMin>subtract<storyWidthOverlap>add<storyLeft>] }}}
storyWidthMax={{{ [<intermediateStoryWidthMax>add<storyWidthOverlap>] }}}
>
<<set-storywidth-storyright-actions-inner>>
</$let>
<% else %>
<$let
clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidthWithoutOffset>add<storyRightOverlap>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
innerStoryWidthMax={{{ [<intermediateInnerStoryWidthMax>add<storyRightOverlap>] }}}
storyRightMin={{{ [<intermediateStoryRightMin>add<storyRightOverlap>add<storyLeft>] }}}
storyWidthMax={{{ [<intermediateStoryWidthMax>add<storyRightOverlap>] }}}
>
<<set-storywidth-storyright-actions-inner>>
</$let>
<% endif %>
</$let> </$let>
\end \end
\function get.sidebar-width.result() \function get.sidebar-width.result()
[<storyWidth>compare:number:lt<storyMinWidth>then<sidebarMaxWidthConverted>addsuffix<sidebarWidthMetric>] [<sidebarWidth>compare:number:gt<sidebarMaxWidth>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
\function get.fluid.padding()
[<get.theme.option sidebarposition>match[left]then<storyPaddingLeft>]
:else[<get.theme.option sidebarposition>match[right]then<storyPaddingRight>]
:else[[0]]
\end
\procedure set-sidebarwidth-actions() \procedure set-sidebarwidth-actions()
<$let <$let
startSidebarWidth={{{ [<get.resizer.state>get[start-sidebar-width]] }}} startSidebarWidth={{{ [<get.resizer.state>get[start-sidebar-width]] }}}
@ -246,12 +266,15 @@ title: $:/core/procedures/sidebar-resizer
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>] }}}
sidebarWidthMetric={{{ [<get.resizer.state>get[sidebar-width-metric]] }}} sidebarWidthMetric={{{ [<get.resizer.state>get[sidebar-width-metric]] }}}
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}} sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
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>] }}}
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then<get.story.left>] :else[<get.theme.metric storyleft>] }}} storyLeftValue={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then<get.story.left>] :else[<get.theme.metric storyleft>] }}}
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>subtract<storyPaddingRight>] }}} storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>] }}} storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.offset>] :else[[0]] }}}
clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}} sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>add<storySidebarOffset>] }}}
clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<storySidebarOffset>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>] }}} sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>] }}}
storyWidth={{{ [<widgetNodeWidth>subtract<sidebarWidth>subtract<storyLeft>] }}} 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>] }}}>
@ -270,7 +293,7 @@ title: $:/core/procedures/sidebar-resizer
\function get.story-width.centralised.result() \function get.story-width.centralised.result()
[<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>] [<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>]
:else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidth>compare:number:gteq<storyWidthMax>then<storyWidthMaxConverted>addsuffix<storyWidthMetric>]
:else[<storyWidthConverted>addsuffix<storyWidthMetric>] :else[<storyWidthConverted>addsuffix<storyWidthMetric>]
\end \end
@ -282,7 +305,7 @@ title: $:/core/procedures/sidebar-resizer
storyWidthStart={{{ [convert.to.pixels.locally<storyWidthStart>] }}} storyWidthStart={{{ [convert.to.pixels.locally<storyWidthStart>] }}}
sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}] }}} sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}] }}}
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}} sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
storyMaxWidth={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}} storyWidthMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}}
dragDiffMultiplied={{{ [<dragDiff>multiply[2]] }}} dragDiffMultiplied={{{ [<dragDiff>multiply[2]] }}}
storyWidthClamped={{{ [<storyWidthStart>add<sidebarMinWidth>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}} storyWidthClamped={{{ [<storyWidthStart>add<sidebarMinWidth>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
storyWidth={{{ [<storyWidthStart>add<dragDiffMultiplied>] }}} storyWidth={{{ [<storyWidthStart>add<dragDiffMultiplied>] }}}
@ -292,7 +315,7 @@ title: $:/core/procedures/sidebar-resizer
storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}} storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}}
storyWidthConverted={{{ [function[convert.to.result],<storyWidth>,<storyWidthMetric>] }}} storyWidthConverted={{{ [function[convert.to.result],<storyWidth>,<storyWidthMetric>] }}}
storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}} storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}}
storyMaxWidthConverted={{{ [function[convert.to.result],<storyMaxWidth>,<storyWidthMetric>] }}} storyWidthMaxConverted={{{ [function[convert.to.result],<storyWidthMax>,<storyWidthMetric>] }}}
storyWidthSetTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<set.theme.metric storywidth>] }}}> storyWidthSetTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<set.theme.metric storywidth>] }}}>
<$action-setfield $tiddler=<<storyWidthSetTiddler>> text=<<get.story-width.centralised.result>>/> <$action-setfield $tiddler=<<storyWidthSetTiddler>> text=<<get.story-width.centralised.result>>/>

2
themes/tiddlywiki/centralised/functions.tid
View File

@ -4,5 +4,7 @@ title: $:/themes/tiddlywiki/centralised/functions
\function set.storywidth.storyright() no \function set.storywidth.storyright() no
\function set.sidebarwidth() no \function set.sidebarwidth() no
\function get.story-sidebar.overlap() 42px
\function sidebar.resizer.maxwidth() 21px \function sidebar.resizer.maxwidth() 21px
\function sidebar.resizer.width() [<get.theme.option sidebarposition>!match[left]then[min(calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] :else[[min(calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] \function sidebar.resizer.width() [<get.theme.option sidebarposition>!match[left]then[min(calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] :else[[min(calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]]

2
themes/tiddlywiki/example/functions.tid
View File

@ -4,5 +4,7 @@ title: $:/themes/tiddlywiki/example/functions
\function set.storywidth.storyright() no \function set.storywidth.storyright() no
\function set.sidebarwidth() no \function set.sidebarwidth() no
\function get.story-sidebar.overlap() 0px
\function sidebar.resizer.maxwidth() 12px \function sidebar.resizer.maxwidth() 12px
\function sidebar.resizer.width() [<sidebar.resizer.maxwidth>] \function sidebar.resizer.width() [<sidebar.resizer.maxwidth>]

2
themes/tiddlywiki/tight/functions.tid
View File

@ -4,5 +4,7 @@ title: $:/themes/tiddlywiki/tight/functions
\function set.storywidth.storyright() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]] \function set.storywidth.storyright() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]]
\function set.sidebarwidth() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]] \function set.sidebarwidth() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]]
\function get.story-sidebar.overlap() 0px
\function sidebar.resizer.maxwidth() 12px \function sidebar.resizer.maxwidth() 12px
\function sidebar.resizer.width() [<sidebar.resizer.maxwidth>] \function sidebar.resizer.width() [<sidebar.resizer.maxwidth>]

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

@ -55,6 +55,8 @@ $else$
</$set> </$set>
\end \end
\import [function[get.base.functions.theme],<get.current.theme>first[]is[tiddler]] :else[function[get.base.functions.theme],<get.current.theme>first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]]
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
/* /*
@ -1019,24 +1021,23 @@ 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: 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;
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
margin: 0 0 0 -<<get.theme.metric sidebarpadding>>; margin: 0 0 0 -42px;
padding: 71px 0 28px <<get.theme.metric sidebarpadding>>; padding: 71px 0 28px <<get.theme.metric sidebarpadding>>;
} }
.tc-sidebar-scrollable { .tc-story-river {
left: <<get.theme.metric storyright>>; top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
padding: 42px <<get.theme.metric storypaddingright>> 42px <<get.theme.metric storypaddingleft>>;
} }
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: 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 -42px 0 0;
margin: 0 -<<get.theme.metric sidebarpadding>> 0 0;
} }
html[dir="rtl"] .tc-sidebar-scrollable { html[dir="rtl"] .tc-sidebar-scrollable {
@ -1044,35 +1045,35 @@ button.tc-btn-invisible.tc-remove-tag-button {
padding-left: 0; padding-left: 0;
} }
.tc-sidebar-scrollable {
left: clamp(calc(<<get.theme.metric storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + 42px));
}
html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable, .tc-sidebar-left .tc-sidebar-scrollable {
right: clamp(calc(<<get.theme.metric storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + 42px));
}
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) {
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 storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + 42px));
} }
.tc-story-river { .tc-story-river {
left: max(0px,<<get.theme.metric storyleft>>); left: max(0px,<<get.theme.metric storyleft>>);
right: clamp(calc(<<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storywidth>>),calc(100% - <<get.theme.metric sidebarminwidth>>)); right: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.storywidthoverlap>> - 42px),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>));
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}}; width: clamp(<<get.theme.metric storyminwidth>>,<<get.theme.metric storywidth>>,calc(100% - <<get.theme.metric sidebarminwidth>> + 42px - <<get.theme.metric storyleft>> + <<get.theme.storywidthoverlap>>));
width: clamp(<<get.theme.metric storyminwidth>>,<<get.theme.metric storywidth>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>>));
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;
flex-direction: column; flex-direction: column;
left: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.metric storyleft>> - <<get.theme.metric storypaddingleft>>),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>>)); left: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.storywidthoverlap>> - 42px),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>));
width: clamp(<<get.theme.metric storyminwidth>>,<<get.theme.metric storywidth>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>>));
right: max(0px,<<get.theme.metric storyleft>>); right: max(0px,<<get.theme.metric storyleft>>);
} }
html[dir="rtl"] .tc-sidebar-left .tc-story-river { html[dir="rtl"] .tc-sidebar-left .tc-story-river {
align-items: flex-start; align-items: flex-start;
left: clamp(calc(<<get.theme.metric sidebarminwidth>>),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>)); left: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.storywidthoverlap>> - 42px),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>));
right: max(0px,<<get.theme.metric storyleft>>); right: max(0px,<<get.theme.metric storyleft>>);
} }
@ -1080,7 +1081,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
flex-direction: column; flex-direction: column;
right: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.metric storyleft>> - <<get.theme.metric sidebarpadding>>),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>)); right: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.storywidthoverlap>> - 42px),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>));
} }
<<if-no-sidebar """ <<if-no-sidebar """
@ -1090,8 +1091,8 @@ button.tc-btn-invisible.tc-remove-tag-button {
} }
.tc-sidebar-left .tc-story-river { .tc-sidebar-left .tc-story-river {
left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}); right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
right: 0; left: 0;
} }
html[dir="rtl"] .tc-sidebar-left .tc-story-river { html[dir="rtl"] .tc-sidebar-left .tc-story-river {
@ -1099,6 +1100,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}); right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
} }
html[dir="rtl"] .tc-story-river:not(.tc-sidebar-left .tc-story-river) {
right: 0;
left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
}
""">> """>>
.tc-story-river.tc-static-story-river { .tc-story-river.tc-static-story-river {
@ -1538,11 +1544,7 @@ html body.tc-body.tc-single-tiddler-window {
width: auto; width: auto;
left: 0; left: 0;
margin-left: max(0px,<<get.theme.metric storyleft>>); margin-left: max(0px,<<get.theme.metric storyleft>>);
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>>)); margin-right: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.story-sidebar.overlap>>),calc(<<get.theme.metric sidebarwidth>> - <<get.story-sidebar.overlap>>),calc(100% - <<get.theme.metric storyleft>> - <<get.theme.metric storyminwidth>> + <<get.story-sidebar.overlap>>));
}
.tc-story-river {
margin-right: clamp(calc(<<get.theme.metric sidebarminwidth>> - 42px),calc(<<get.theme.metric sidebarwidth>> - 42px),calc(100% - <<get.theme.metric storyleft>> - <<get.theme.metric storyminwidth>> + 42px));
} }
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 {
@ -1566,21 +1568,21 @@ html body.tc-body.tc-single-tiddler-window {
left: auto; left: auto;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: clamp(<<get.theme.metric sidebarminwidth>>,<<get.theme.metric sidebarwidth>>,(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric 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.story-sidebar.overlap>>));
} }
.tc-sidebar-left .tc-sidebar-scrollable { .tc-sidebar-left .tc-sidebar-scrollable {
left: 0; left: 0;
right: auto; right: auto;
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 {
padding-right: 42px; padding-right: <<get.theme.metric sidebarpadding>>;
right: auto;
} }
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) {
padding-right: 42px; padding-right: <<get.theme.metric sidebarpadding>>;
padding-left: 0; padding-left: 0;
} }

2
themes/tiddlywiki/vanilla/functions.tid
View File

@ -4,5 +4,7 @@ title: $:/themes/tiddlywiki/vanilla/functions
\function set.storywidth.storyright() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]] \function set.storywidth.storyright() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]]
\function set.sidebarwidth() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]] \function set.sidebarwidth() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]]
\function get.story-sidebar.overlap() 42px
\function sidebar.resizer.maxwidth() 21px \function sidebar.resizer.maxwidth() 21px
\function sidebar.resizer.width() [<get.theme.option sidebarposition>!match[left]then[min(calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] :else[[min(calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] \function sidebar.resizer.width() [<get.theme.option sidebarposition>!match[left]then[min(calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] :else[[min(calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]]

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

@ -112,20 +112,12 @@ 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: 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))); left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>>) - (2 * <<get.story-sidebar.overlap>> / 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: 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)); right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>>) - (2 * <<get.story-sidebar.overlap>> / 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 %>
@ -133,12 +125,12 @@ code-body: yes
<%if [<set.sidebarwidth>match[yes]] %> <%if [<set.sidebarwidth>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>> - <<get.theme.metric sidebarpadding>> + (<<get.theme.metric sidebarpadding>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric sidebarpadding>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric sidebarpadding>> / 3))); left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 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>> - <<get.theme.metric sidebarpadding>> + (<<get.theme.metric sidebarpadding>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric sidebarpadding>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric sidebarpadding>> / 3))); right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3)));
} }
<% endif %> <% endif %>
@ -146,13 +138,13 @@ code-body: yes
<%if [<set.centralised>match[yes]] %> <%if [<set.centralised>match[yes]] %>
.tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-resizer.tc-main-sidebar-resizer {
left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3))); left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 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;
z-index: 1; z-index: 1;
right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3))); right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3)));
} }
<% endif %> <% endif %>