mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-23 15:36:52 +00:00
big overhaul. fixed-fluid adjustments, simplifying stylesheets, correcting calculations
This commit is contained in:
BurningTreeC
parent
c1e401958e
commit
dca7367d8b
@ -8,6 +8,7 @@ code-body: yes
|
||||
\function resizer.state() [{$:/state/sidebar}]
|
||||
\function resizer.class() tc-main-sidebar-resizer
|
||||
\function set.throttling() yes
|
||||
\function get.story-sidebar.offset() 42px
|
||||
\whitespace trim
|
||||
|
||||
<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
|
||||
|
||||
@ -107,3 +107,5 @@ code-body: yes
|
||||
\end
|
||||
|
||||
\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[))]]
|
||||
|
||||
@ -101,26 +101,85 @@ title: $:/core/procedures/sidebar-resizer
|
||||
<$action-deletetiddler $tiddler=<<get.resizer.state>>/>
|
||||
\end
|
||||
|
||||
\function get.story-width.result()
|
||||
[<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>]
|
||||
:else[<storyWidth>compare:number:gteq<storyMaxWidth>then<storyMaxWidthConverted>addsuffix<storyWidthMetric>]
|
||||
:else[<storyWidthConverted>addsuffix<storyWidthMetric>]
|
||||
\procedure set-storywidth-storyright-actions-inner-actions()
|
||||
<$let
|
||||
storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}}
|
||||
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
|
||||
|
||||
\function get.tiddler-width.result()
|
||||
[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:lt<storyMinWidth>then<tiddlerWidth>compare:number:gteq[0]then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>]
|
||||
:else[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:lt<storyMinWidth>then<tiddlerWidth>compare:number:lt[0]then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>]
|
||||
:else[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:gt<storyMaxWidth>then<tiddlerMaxWidthConverted>addsuffix<tiddlerWidthMetric>]
|
||||
:else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:lt<tiddlerMinWidth>then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>]
|
||||
:else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:gteq<tiddlerMaxWidth>then<tiddlerMaxWidthConverted>addsuffix<tiddlerWidthMetric>]
|
||||
:else[<tiddlerWidth>compare:number:lt[0]then[0]addsuffix<tiddlerWidthMetric>]
|
||||
:else[<tiddlerWidthConverted>addsuffix<tiddlerWidthMetric>]
|
||||
\end
|
||||
|
||||
\function get.story-right.result()
|
||||
[<storyWidth>compare:number:lt<storyMinWidth>then<storyMinRightConverted>addsuffix<storyRightMetric>]
|
||||
:else[<storyRiverWidth>compare:number:gteq<storyRightLimit>then<storyRightLimitConverted>addsuffix<storyRightMetric>]
|
||||
:else[<storyRiverWidthConverted>addsuffix<storyRightMetric>]
|
||||
\procedure set-storywidth-storyright-actions-inner()
|
||||
<$let
|
||||
storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}}
|
||||
storyWidth={{{ [<intermediateStoryWidth>subtract<clampedDiff>] }}}
|
||||
storyRight={{{ [<intermediateStoryRight>subtract<clampedDiff>] }}}
|
||||
storyRightCompare={{{ [<intermediateStoryRight>subtract<clampedDiff>] }}}
|
||||
storyWidthCompare={{{ [<storyWidth>] }}}
|
||||
innerStoryWidth={{{ [<intermediateInnerStoryWidth>subtract<clampedDiff>] }}}
|
||||
innerStoryWidthStart={{{ [<intermediateInnerStoryWidthStart>subtract<clampedDiff>] }}}
|
||||
innerStoryWidthMin={{{ [<intermediateInnerStoryWidthMin>subtract<clampedDiff>] }}}
|
||||
storyRightMax={{{ [<intermediateStoryRightMax>] }}}
|
||||
tiddlerWidthStartPixels={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthStart>multiply<innerStoryWidthStart>divide[100]] :else[convert.to.pixels.locally<tiddlerWidthStart>] }}}
|
||||
tiddlerWidthStoryWidthDiff={{{ [<storyWidthStart>subtract<tiddlerWidthStartPixels>] }}}
|
||||
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
|
||||
|
||||
\procedure set-storywidth-storyright-actions()
|
||||
@ -129,7 +188,6 @@ title: $:/core/procedures/sidebar-resizer
|
||||
storyWidthStart={{{ [<get.resizer.state>get[start-story-width]] }}}
|
||||
storyRightStart={{{ [convert.to.pixels.locally<storyRightStart>] }}}
|
||||
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>] }}}
|
||||
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>] }}}
|
||||
@ -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>] }}}
|
||||
storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}}
|
||||
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
|
||||
|
||||
sidebarMinWidthWithoutPadding={{{ [<sidebarMinWidth>subtract<sidebarPadding>] }}}
|
||||
|
||||
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>] }}}
|
||||
|
||||
storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.offset>] :else[[0]] }}}
|
||||
sidebarMinWidthWithoutOffset={{{ [<sidebarMinWidth>subtract<storySidebarOffset>] }}}
|
||||
tiddlerWidthMetric={{{ [<get.resizer.state>get[tiddler-width-metric]] }}}
|
||||
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>] }}}
|
||||
storyRiverWidth={{{ [<storyRiverWidth>subtract<newClampedDiff>] }}}>
|
||||
intermediateStoryWidthStart={{{ [<storyWidthStart>] }}}
|
||||
|
||||
intermediateStoryWidth={{{ [<storyWidthStart>add<dragDiff>] }}}
|
||||
intermediateStoryRight={{{ [<storyRightStart>add<dragDiff>] }}}
|
||||
|
||||
intermediateInnerStoryWidth={{{ [<intermediateStoryWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
|
||||
intermediateInnerStoryWidthStart={{{ [<storyWidthStart>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
|
||||
|
||||
intermediateStoryRightMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidthWithoutOffset>] }}}
|
||||
intermediateStoryRightMin={{{ [<storyMinWidth>add<storyleft>] }}}
|
||||
|
||||
intermediateStoryWidthMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidthWithoutOffset>subtract<storyLeft>] }}}
|
||||
|
||||
intermediateInnerStoryWidthMin={{{ [<storyMinWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
|
||||
intermediateInnerStoryWidthMax={{{ [<intermediateStoryWidthMax>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
|
||||
|
||||
storyWidthOverlap={{{ [<storyWidthStart>add<storyLeft>subtract<storyRightStart>] }}}
|
||||
storyRightOverlap={{{ [<storyRightStart>subtract<storyLeft>subtract<storyWidthStart>] }}}
|
||||
>
|
||||
|
||||
<%if [<storyWidthOverlap>compare:number:gteq[0]] %>
|
||||
<$let
|
||||
storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}}
|
||||
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]] %>
|
||||
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text=<<get.tiddler-width.result>>/>
|
||||
<%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>] }}}/>
|
||||
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 %>
|
||||
<$action-setfield $tiddler=<<storyWidthSetTiddler>> text=<<get.story-width.result>>/>
|
||||
|
||||
</$let>
|
||||
|
||||
<$let
|
||||
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>>/>
|
||||
|
||||
</$let>
|
||||
|
||||
</$let>
|
||||
\end
|
||||
|
||||
\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[<sidebarWidthConverted>addsuffix<sidebarWidthMetric>]
|
||||
\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()
|
||||
<$let
|
||||
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>] }}}
|
||||
sidebarWidthMetric={{{ [<get.resizer.state>get[sidebar-width-metric]] }}}
|
||||
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>] }}}
|
||||
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>] }}}
|
||||
storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>subtract<storyPaddingRight>] }}}
|
||||
sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>] }}}
|
||||
clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
|
||||
storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
|
||||
storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.offset>] :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>] }}}
|
||||
storyWidth={{{ [<widgetNodeWidth>subtract<sidebarWidth>subtract<storyLeft>] }}}
|
||||
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()
|
||||
[<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>]
|
||||
\end
|
||||
|
||||
@ -282,7 +305,7 @@ title: $:/core/procedures/sidebar-resizer
|
||||
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}] }}}
|
||||
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
|
||||
storyMaxWidth={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}}
|
||||
storyWidthMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}}
|
||||
dragDiffMultiplied={{{ [<dragDiff>multiply[2]] }}}
|
||||
storyWidthClamped={{{ [<storyWidthStart>add<sidebarMinWidth>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
|
||||
storyWidth={{{ [<storyWidthStart>add<dragDiffMultiplied>] }}}
|
||||
@ -292,7 +315,7 @@ title: $:/core/procedures/sidebar-resizer
|
||||
storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}}
|
||||
storyWidthConverted={{{ [function[convert.to.result],<storyWidth>,<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>] }}}>
|
||||
|
||||
<$action-setfield $tiddler=<<storyWidthSetTiddler>> text=<<get.story-width.centralised.result>>/>
|
||||
|
||||
@ -4,5 +4,7 @@ title: $:/themes/tiddlywiki/centralised/functions
|
||||
\function set.storywidth.storyright() no
|
||||
\function set.sidebarwidth() no
|
||||
|
||||
\function get.story-sidebar.overlap() 42px
|
||||
|
||||
\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[)]]
|
||||
|
||||
@ -4,5 +4,7 @@ title: $:/themes/tiddlywiki/example/functions
|
||||
\function set.storywidth.storyright() no
|
||||
\function set.sidebarwidth() no
|
||||
|
||||
\function get.story-sidebar.overlap() 0px
|
||||
|
||||
\function sidebar.resizer.maxwidth() 12px
|
||||
\function sidebar.resizer.width() [<sidebar.resizer.maxwidth>]
|
||||
|
||||
@ -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.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.width() [<sidebar.resizer.maxwidth>]
|
||||
|
||||
@ -55,6 +55,8 @@ $else$
|
||||
</$set>
|
||||
\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
|
||||
|
||||
/*
|
||||
@ -1019,24 +1021,23 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
||||
.tc-sidebar-scrollable {
|
||||
position: fixed;
|
||||
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;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
-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>>;
|
||||
}
|
||||
|
||||
.tc-sidebar-scrollable {
|
||||
left: <<get.theme.metric storyright>>;
|
||||
.tc-story-river {
|
||||
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 {
|
||||
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 -<<get.theme.metric sidebarpadding>> 0 0;
|
||||
margin: 0 -42px 0 0;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .tc-sidebar-scrollable {
|
||||
@ -1044,35 +1045,35 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
||||
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) {
|
||||
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 {
|
||||
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>>));
|
||||
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
||||
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>>;
|
||||
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>>));
|
||||
width: clamp(<<get.theme.metric storyminwidth>>,<<get.theme.metric storywidth>>,calc(100% - <<get.theme.metric sidebarminwidth>> + 42px - <<get.theme.metric storyleft>> + <<get.theme.storywidthoverlap>>));
|
||||
}
|
||||
|
||||
.tc-sidebar-left .tc-story-river {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
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>>));
|
||||
width: clamp(<<get.theme.metric storyminwidth>>,<<get.theme.metric storywidth>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>>));
|
||||
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>>);
|
||||
}
|
||||
|
||||
html[dir="rtl"] .tc-sidebar-left .tc-story-river {
|
||||
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>>);
|
||||
}
|
||||
|
||||
@ -1080,7 +1081,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
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 """
|
||||
@ -1090,8 +1091,8 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
||||
}
|
||||
|
||||
.tc-sidebar-left .tc-story-river {
|
||||
left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
|
||||
right: 0;
|
||||
right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
|
||||
left: 0;
|
||||
}
|
||||
|
||||
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}});
|
||||
}
|
||||
|
||||
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 {
|
||||
@ -1538,11 +1544,7 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
width: auto;
|
||||
left: 0;
|
||||
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>>));
|
||||
}
|
||||
|
||||
.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));
|
||||
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>>));
|
||||
}
|
||||
|
||||
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;
|
||||
bottom: 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 {
|
||||
left: 0;
|
||||
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 {
|
||||
padding-right: 42px;
|
||||
padding-right: <<get.theme.metric sidebarpadding>>;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -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.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.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[)]]
|
||||
|
||||
@ -112,20 +112,12 @@ code-body: yes
|
||||
<%if [<set.storywidth.storyright>match[yes]] %>
|
||||
|
||||
.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)));
|
||||
}
|
||||
|
||||
.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)));
|
||||
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-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
|
||||
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));
|
||||
}
|
||||
|
||||
.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)));
|
||||
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));
|
||||
}
|
||||
|
||||
<% endif %>
|
||||
@ -133,12 +125,12 @@ code-body: yes
|
||||
<%if [<set.sidebarwidth>match[yes]] %>
|
||||
|
||||
.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 {
|
||||
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 %>
|
||||
@ -146,13 +138,13 @@ code-body: yes
|
||||
<%if [<set.centralised>match[yes]] %>
|
||||
|
||||
.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 {
|
||||
left: auto;
|
||||
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 %>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user