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

make fixed-fluid mode respect paddingleft and paddingright and add additional metrics sidebarpadding and previewsliderwidth

Browse Source
This commit is contained in:
BurningTreeC 2024-11-03 10:23:18 +01:00
parent 340375d0c0
commit 9b1d746ad3
9 changed files with 97 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/language/en-GB/ThemeTweaks.multids
View File

@ -28,6 +28,10 @@ Metrics/FontSize: Font size
Metrics/LineHeight: Line height Metrics/LineHeight: Line height
Metrics/BodyFontSize: Font size for tiddler body Metrics/BodyFontSize: Font size for tiddler body
Metrics/BodyLineHeight: Line height for tiddler body Metrics/BodyLineHeight: Line height for tiddler body
Metrics/PreviewSliderWidth: Preview slider width
Metrics/PreviewSliderWidth/Hint: the width of the slider between editor and editor preview
Metrics/SidebarPadding: Sidebar padding
Metrics/SidebarPadding/Hint: the padding of the sidebar between sidebar and story river - determines the position of the sidebar resizer
Metrics/SidebarResizer/Hint: the values for `storyleft`, `storyright`, `storywidth`, `storyminwidth`, `sidebarwidth` and `sidebarminwidth` need to be ''absolute'' CSS units, ''percentages'' or ''em'' units in order for the sidebar resizer to work Metrics/SidebarResizer/Hint: the values for `storyleft`, `storyright`, `storywidth`, `storyminwidth`, `sidebarwidth` and `sidebarminwidth` need to be ''absolute'' CSS units, ''percentages'' or ''em'' units in order for the sidebar resizer to work
Metrics/StoryLeft: Story left position Metrics/StoryLeft: Story left position
Metrics/StoryLeft/Hint: how far the left margin of the story river<br>(tiddler area) is from the left of the page Metrics/StoryLeft/Hint: how far the left margin of the story river<br>(tiddler area) is from the left of the page
@ -43,11 +47,11 @@ Metrics/StoryRight: Story right
Metrics/StoryRight/Hint: how far the left margin of the sidebar <br>is from the left of the page Metrics/StoryRight/Hint: how far the left margin of the sidebar <br>is from the left of the page
Metrics/StoryWidth: Story width Metrics/StoryWidth: Story width
Metrics/StoryWidth/Hint: the overall width of the story river Metrics/StoryWidth/Hint: the overall width of the story river
Metrics/TiddlerWidth: Tiddler width
Metrics/TiddlerWidth/Hint: within the story river
Metrics/SidebarBreakpoint: Sidebar breakpoint Metrics/SidebarBreakpoint: Sidebar breakpoint
Metrics/SidebarBreakpoint/Hint: the minimum page width at which the story<br>river and sidebar will appear side by side Metrics/SidebarBreakpoint/Hint: the minimum page width at which the story<br>river and sidebar will appear side by side
Metrics/SidebarMinWidth: Minimum Sidebar width Metrics/SidebarMinWidth: Minimum Sidebar width
Metrics/SidebarMinWidth/Hint: the minimum width of the sidebar Metrics/SidebarMinWidth/Hint: the minimum width of the sidebar
Metrics/SidebarWidth: Sidebar width Metrics/SidebarWidth: Sidebar width
Metrics/SidebarWidth/Hint: the width of the sidebar in fluid-fixed layout Metrics/SidebarWidth/Hint: the width of the sidebar in fluid-fixed layout
Metrics/TiddlerWidth: Tiddler width
Metrics/TiddlerWidth/Hint: within the story river

2
core/ui/EditTemplate/body/default.tid
View File

@ -68,7 +68,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
sliderCondition=<<get.slider.condition>> sliderCondition=<<get.slider.condition>>
mode="inline" mode="inline"
padding="0px" padding="0px"
sliderWidth="6px" sliderWidth=<<get.theme.metric previewsliderwidth>>
/> />
</div> </div>

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

@ -108,8 +108,9 @@ title: $:/core/procedures/sidebar-resizer
\end \end
\function get.tiddler-width.result() \function get.tiddler-width.result()
[<tiddlerWidthMetric>match[%]then<storyWidth>compare:number:lt<storyMinWidth>then<get.theme.metric tiddlerwidth>compare:number:gteq[0]then<get.theme.metric tiddlerwidth>] [<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:gt<storyMaxWidth>then<get.theme.metric tiddlerwidth>] :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:lt<tiddlerMinWidth>then<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>]
:else[<tiddlerWidthMetric>!match[%]then<tiddlerWidth>compare:number:gteq<tiddlerMaxWidth>then<tiddlerMaxWidthConverted>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[<tiddlerWidth>compare:number:lt[0]then[0]addsuffix<tiddlerWidthMetric>]
@ -117,50 +118,55 @@ title: $:/core/procedures/sidebar-resizer
\end \end
\function get.story-right.result() \function get.story-right.result()
[<storyRiverWidth>compare:number:lt<storyMinWidthAddLeft>then<storyMinWidthAddLeftConverted>addsuffix<storyRightMetric>] [<storyWidth>compare:number:lt<storyMinWidth>then<storyMinRightConverted>addsuffix<storyRightMetric>]
:else[<storyRiverWidth>compare:number:gteq<storyRiverLimit>then<storyRiverLimitConverted>addsuffix<storyRightMetric>] :else[<storyRiverWidth>compare:number:gteq<storyRightLimit>then<storyRightLimitConverted>addsuffix<storyRightMetric>]
:else[<storyRiverWidthConverted>addsuffix<storyRightMetric>] :else[<storyRiverWidthConverted>addsuffix<storyRightMetric>]
\end \end
\function get.story-sidebar.padding()
[<get.theme.option sidebarposition>match[left]then<currentTiddler>subtract<storyPaddingLeft>]
:else[<currentTiddler>subtract<storyPaddingRight>]
\end
\procedure set-storywidth-storyright-actions() \procedure set-storywidth-storyright-actions()
<$let <$let
storyRightStart={{{ [<get.resizer.state>get[start-story-right]] }}} storyRightStart={{{ [<get.resizer.state>get[start-story-right]] }}}
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>] }}}
storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}} storyRiverWidth={{{ [<storyRightStart>add<dragDiff>] }}}
storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[<get.theme.metric sidebarminwidth>] }}}
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>] }}}
storyPaddingRight={{{ [convert.to.pixels.locally<storyPaddingRightValue>] }}} storyPaddingRight={{{ [convert.to.pixels.locally<storyPaddingRightValue>] }}}
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] :map[<get.story-sidebar.padding>] }}} storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}}
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]get[text]] :else[<get.theme.metric storyleft>] }}} storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>add<storyPaddingLeft>add<storyPaddingRight>] }}}
sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[<get.theme.metric sidebarminwidth>] }}}
sidebarPaddingValue={{{ [<sidebarPaddingTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarPaddingTiddler>!is[blank]is[missing]then<get.sidebar.padding>] :else[<get.theme.metric sidebarpadding>] }}}
sidebarPadding={{{ [convert.to.pixels.locally<sidebarPaddingValue>] }}}
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then<get.sidebar.minwidth>] :else[<get.theme.metric storyleft>] }}}
storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}} storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}}
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>subtract<sidebarPadding>subtract<storyLeft>] }}}
clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}} clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}} storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}}
storyRightStart={{{ [<storyRightStart>subtract<clampedDiff>] }}} storyRightStart={{{ [<storyRightStart>subtract<clampedDiff>] }}}
storyWidth={{{ [<storyWidthStart>add<dragDiff>] }}} storyWidth={{{ [<storyWidthStart>add<dragDiff>] }}}
innerStoryWidth={{{ [<storyWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}} innerStoryWidth={{{ [<storyWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
innerStoryWidthStart={{{ [<storyWidthStart>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}} innerStoryWidthStart={{{ [<storyWidthStart>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
storyMinWidth={{{ [<storyMinWidth>add<sidebarPadding>] }}}
storyMinWidthAddLeft={{{ [<storyMinWidth>add<storyLeft>] }}} storyMinWidthAddLeft={{{ [<storyMinWidth>add<storyLeft>] }}}
storyRiverLimit={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>] }}} storyRiverLimit={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>] }}}
storyMaxWidth={{{ [<storyRiverLimit>subtract<storyLeft>] }}} storyMaxWidth={{{ [<storyRiverLimit>subtract<storyLeft>] }}}
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>] }}} tiddlerWidthStartPixels={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthStart>multiply<innerStoryWidthStart>divide[100]] :else[convert.to.pixels.locally<tiddlerWidthStart>] }}}
tiddlerWidthClampedDiff={{{ [<tiddlerWidthStartPixels>add<storyPaddingLeft>add<storyPaddingRight>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}} tiddlerWidthClampedDiff={{{ [<tiddlerWidthStartPixels>add<storyPaddingLeft>add<storyPaddingRight>add<storyLeft>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
tiddlerWidth={{{ [<tiddlerWidthStartPixels>add<dragDiff>subtract<tiddlerWidthClampedDiff>] }}} tiddlerWidth={{{ [<storyWidth>compare:number:lteq<storyMaxWidth>then<storyWidth>compare:number:gteq<storyMinWidth>then<tiddlerWidthStartPixels>add<dragDiff>subtract<tiddlerWidthClampedDiff>] :else[[]] }}}
tiddlerWidthDiff={{{ [<storyWidth>subtract<tiddlerWidth>] }}} tiddlerWidthDiff={{{ [<storyWidthStart>subtract<tiddlerWidthStartPixels>] }}}
tiddlerMinWidth={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>] :else[<storyMinWidth>subtract<tiddlerWidthDiff>] }}} tiddlerMinWidth={{{ [<storyMinWidth>subtract<tiddlerWidthDiff>] }}}
tiddlerMaxWidth={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>] :else[<storyMaxWidth>subtract<tiddlerWidthDiff>] }}} tiddlerMaxWidth={{{ [<storyMaxWidth>subtract<tiddlerWidthDiff>] }}}
storyRiverWidth={{{ [<storyRiverWidth>subtract<clampedDiff>] }}}> storyWidthStoryRightStartDiff={{{ [<storyRightStart>subtract<storyWidthStart>] }}}
storyRiverWidth={{{ [<storyWidthStoryRightStartDiff>compare:number:eq<storyLeft>then<storyRiverWidth>] :else[<storyWidthStoryRightStartDiff>compare:number:gt[0]then<storyWidth>add<storyWidthStoryRightStartDiff>] :else[<storyWidthStoryRightStartDiff>compare:number:lt[0]then<storyWidth>subtract<storyWidthStoryRightStartDiff>] :else[<storyRiverWidth>] }}}
storyRiverWidth={{{ [<storyRiverWidth>subtract<clampedDiff>] }}}
storyRightLimit={{{ [<storyWidthStoryRightStartDiff>compare:number:eq[0]then<storyRiverLimit>subtract<storyLeft>] :else[<storyWidthStoryRightStartDiff>compare:number:gt[0]then<storyRiverLimit>] :else[<storyWidthStoryRightStartDiff>compare:number:lt[0]then<storyRiverLimit>] :else[<storyRiverLimit>] }}}
storyMinRight={{{ [<storyMinWidth>add<storyWidthStoryRightStartDiff>] }}}>
<$let <$let
storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}} storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}}
@ -168,12 +174,18 @@ title: $:/core/procedures/sidebar-resizer
storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}} storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}}
storyMaxWidthConverted={{{ [function[convert.to.result],<storyMaxWidth>,<storyWidthMetric>] }}} storyMaxWidthConverted={{{ [function[convert.to.result],<storyMaxWidth>,<storyWidthMetric>] }}}
tiddlerWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>multiply[100]divide<innerStoryWidth>] :else[function[convert.to.result],<tiddlerWidth>,<tiddlerWidthMetric>] }}} tiddlerWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>multiply[100]divide<innerStoryWidth>] :else[function[convert.to.result],<tiddlerWidth>,<tiddlerWidthMetric>] }}}
tiddlerMinWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerMinWidth>multiply[100]divide<innerStoryWidth>] :else[function[convert.to.result],<tiddlerMinWidth>,<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<innerStoryWidth>] :else[function[convert.to.result],<tiddlerMaxWidth>,<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>] }}} storyWidthSetTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<set.theme.metric storywidth>] }}}
tiddlerWidthSetTiddler={{{ [<tiddlerWidthTiddler>!is[blank]] :else[<set.theme.metric tiddlerwidth>] }}}> tiddlerWidthSetTiddler={{{ [<tiddlerWidthTiddler>!is[blank]] :else[<set.theme.metric tiddlerwidth>] }}}>
<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text=<<get.tiddler-width.result>>/> <%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>] }}}/>
<% endif %>
<$action-setfield $tiddler=<<storyWidthSetTiddler>> text=<<get.story-width.result>>/> <$action-setfield $tiddler=<<storyWidthSetTiddler>> text=<<get.story-width.result>>/>
</$let> </$let>
@ -181,7 +193,9 @@ title: $:/core/procedures/sidebar-resizer
<$let <$let
storyRightMetric={{{ [<get.resizer.state>get[story-right-metric]] }}} storyRightMetric={{{ [<get.resizer.state>get[story-right-metric]] }}}
storyRiverWidthConverted={{{ [function[convert.to.result],<storyRiverWidth>,<storyRightMetric>] }}} storyRiverWidthConverted={{{ [function[convert.to.result],<storyRiverWidth>,<storyRightMetric>] }}}
storyRiverLimitConverted={{{ [function[convert.to.result],<storyRiverLimit>,<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>] }}} storyMinWidthAddLeftConverted={{{ [function[convert.to.result],<storyMinWidthAddLeft>,<storyRightMetric>] }}}
storyRightSetTiddler={{{ [<storyRightTiddler>!is[blank]] :else[<set.theme.metric storyright>] }}}> storyRightSetTiddler={{{ [<storyRightTiddler>!is[blank]] :else[<set.theme.metric storyright>] }}}>
@ -193,7 +207,7 @@ title: $:/core/procedures/sidebar-resizer
\end \end
\function get.sidebar-width.result() \function get.sidebar-width.result()
[<sidebarWidth>compare:number:gteq<sidebarMaxWidth>then<sidebarMaxWidthConverted>addsuffix<sidebarWidthMetric>] [<innerStoryWidth>compare:number:lt<storyMinWidth>then<sidebarMaxWidthConverted>addsuffix<sidebarWidthMetric>]
:else[<sidebarWidth>compare:number:lt<sidebarMinWidth>then<sidebarMinWidthConverted>addsuffix<sidebarWidthMetric>] :else[<sidebarWidth>compare:number:lt<sidebarMinWidth>then<sidebarMinWidthConverted>addsuffix<sidebarWidthMetric>]
:else[<sidebarWidthConverted>addsuffix<sidebarWidthMetric>] :else[<sidebarWidthConverted>addsuffix<sidebarWidthMetric>]
\end \end
@ -206,21 +220,24 @@ title: $:/core/procedures/sidebar-resizer
\procedure set-sidebarwidth-actions() \procedure set-sidebarwidth-actions()
<$let <$let
storyPaddingLeftValue={{{ [<storyPaddingLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingLeftTiddler>!is[blank]is[missing]then[0px]] :else[<get.theme.metric storypaddingleft>] }}} startSidebarWidth={{{ [<get.resizer.state>get[start-sidebar-width]] }}}
startSidebarWidth={{{ [convert.to.pixels.locally<startSidebarWidth>] }}}
sidebarWidth={{{ [<startSidebarWidth>subtract<dragDiff>] }}}
storyPaddingLeftValue={{{ [<storyPaddingLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingLeftTiddler>!is[blank]is[missing]then<get.story-padding.left>] :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<get.story-padding.right>] :else[<get.theme.metric storypaddingright>] }}}
storyPaddingRight={{{ [convert.to.pixels.locally<storyPaddingRightValue>] }}} storyPaddingRight={{{ [convert.to.pixels.locally<storyPaddingRightValue>] }}}
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>] }}}
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]get[text]] :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>] }}} storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>add<get.fluid.padding>] }}} sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}} clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
sliderWidth={{{ [convert.to.pixels.locally<get.resizer.style.width>] }}} sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>] }}}
sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>subtract<sliderWidth>] }}}> innerStoryWidth={{{ [<widgetNodeWidth>subtract<sidebarWidth>subtract<storyLeft>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}>
<$let <$let
sidebarWidthConverted={{{ [function[convert.to.result],<sidebarWidth>,<sidebarWidthMetric>] }}} sidebarWidthConverted={{{ [function[convert.to.result],<sidebarWidth>,<sidebarWidthMetric>] }}}
@ -278,13 +295,7 @@ title: $:/core/procedures/sidebar-resizer
<$let <$let
startPosX={{{ [<get.resizer.state>get[start-posx]] }}} startPosX={{{ [<get.resizer.state>get[start-posx]] }}}
widgetNodeWidth={{{ [<get.resizer.state>get[widget-node-width]] }}} widgetNodeWidth={{{ [<get.resizer.state>get[widget-node-width]] }}}
dragDiff=<<get.drag.diff>> dragDiff=<<get.drag.diff>>>
startStoryRight={{{ [<get.resizer.state>get[start-story-right]] }}}
startStoryRight={{{ [convert.to.pixels.locally<startStoryRight>] }}}
storyRiverWidth={{{ [<startStoryRight>add<dragDiff>] }}}
startSidebarWidth={{{ [<get.resizer.state>get[start-sidebar-width]] }}}
startSidebarWidth={{{ [convert.to.pixels.locally<startSidebarWidth>] }}}
sidebarWidth={{{ [<startSidebarWidth>subtract<dragDiff>] }}}>
<%if [<tv-set-storywidth-storyright>match[yes]] %> <%if [<tv-set-storywidth-storyright>match[yes]] %>
<<set_theme_throttling storyright storyRightTiddler>> <<set_theme_throttling storyright storyRightTiddler>>
<<set_theme_throttling tiddlerwidth tiddlerWidthTiddler>> <<set_theme_throttling tiddlerwidth tiddlerWidthTiddler>>

5
core/wiki/macros/sliders.tid
View File

@ -6,13 +6,16 @@ code-body: yes
\import $:/core/procedures/sidebar-resizer \import $:/core/procedures/sidebar-resizer
\function get.resizer.style.position() absolute \function get.resizer.style.position() absolute
\function get.template-right.width() [<sidebarWidthTiddler>get[text]] :else[[50%]] \function get.template-right.width() [<sidebarWidthTiddler>get[text]] :else[[50%]]
\function get.resizer.style.left() [[calc(100% - ]addsuffix<get.template-right.width>addsuffix[ - 3px)]] \function get.resizer.style.left() [[calc(100% - ]addsuffix<get.template-right.width>addsuffix[ - ]addsuffix<get.resizer.style.width>addsuffix[)]]
\function get.resizer.style.width() [<sliderWidth>] \function get.resizer.style.width() [<sliderWidth>]
\function set.throttling() no \function set.throttling() no
\function get.template.left() \function get.template.left()
\function get.preview.slider.class() [<class>] \function get.preview.slider.class() [<class>]
\function get.left.minwidth() [<leftMinWidth>] \function get.left.minwidth() [<leftMinWidth>]
\function get.right.minwidth() [<rightMinWidth>] \function get.right.minwidth() [<rightMinWidth>]
\function get.story-padding.right() 0px
\function get.story-padding.left() 0px
\function get.story.left() 0
\whitespace trim \whitespace trim
<$let <$let

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

@ -35,6 +35,7 @@ tags: [[$:/tags/Stylesheet]]
margin-left: 0; margin-left: 0;
right: 50%; right: 50%;
left: 0; left: 0;
z-index: 1;
margin-right: min(calc((100% - (2 * <<get.theme.metric sidebarminwidth>>)) / 2 - <<get.theme.metric storypaddingleft>>),calc(<<get.theme.metric storywidth>> / 2 - <<get.theme.metric storypaddingleft>>)); margin-right: min(calc((100% - (2 * <<get.theme.metric sidebarminwidth>>)) / 2 - <<get.theme.metric storypaddingleft>>),calc(<<get.theme.metric storywidth>> / 2 - <<get.theme.metric storypaddingleft>>));
padding-right: 0px; padding-right: 0px;
padding-left: 42px; padding-left: 42px;

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

@ -83,3 +83,5 @@ caption: {{$:/language/ThemeTweaks/ThemeTweaks}}
|<$link to=<<get.theme sidebarbreakpoint>>><<lingo Metrics/SidebarBreakpoint>></$link><br>//<<lingo Metrics/SidebarBreakpoint/Hint>>// |^<$edit-text tiddler=<<get.theme sidebarbreakpoint>> default="" tag="input"/> | |<$link to=<<get.theme sidebarbreakpoint>>><<lingo Metrics/SidebarBreakpoint>></$link><br>//<<lingo Metrics/SidebarBreakpoint/Hint>>// |^<$edit-text tiddler=<<get.theme sidebarbreakpoint>> default="" tag="input"/> |
|<$link to=<<get.theme sidebarwidth>>><<lingo Metrics/SidebarWidth>></$link><br>//<<lingo Metrics/SidebarWidth/Hint>>// |^<$edit-text tiddler=<<get.theme sidebarwidth>> default="" tag="input"/> | |<$link to=<<get.theme sidebarwidth>>><<lingo Metrics/SidebarWidth>></$link><br>//<<lingo Metrics/SidebarWidth/Hint>>// |^<$edit-text tiddler=<<get.theme sidebarwidth>> default="" tag="input"/> |
|<$link to=<<get.theme sidebarminwidth>>><<lingo Metrics/SidebarMinWidth>></$link><br>//<<lingo Metrics/SidebarMinWidth/Hint>>// |^<$edit-text tiddler=<<get.theme sidebarminwidth>> default="" tag="input"/> | |<$link to=<<get.theme sidebarminwidth>>><<lingo Metrics/SidebarMinWidth>></$link><br>//<<lingo Metrics/SidebarMinWidth/Hint>>// |^<$edit-text tiddler=<<get.theme sidebarminwidth>> default="" tag="input"/> |
|<$link to=<<get.theme sidebarpadding>>><<lingo Metrics/SidebarPadding>></$link><br>//<<lingo Metrics/SidebarPadding/Hint>>// |^<$edit-text tiddler=<<get.theme sidebarpadding>> default="" tag="input"/> |
|<$link to=<<get.theme previewsliderwidth>>><<lingo Metrics/PreviewSliderWidth>></$link><br>//<<lingo Metrics/PreviewSliderWidth/Hint>>// |^<$edit-text tiddler=<<get.theme previewsliderwidth>> default="" tag="input"/> |

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

@ -1019,37 +1019,38 @@ button.tc-btn-invisible.tc-remove-tag-button {
.tc-sidebar-scrollable { .tc-sidebar-scrollable {
position: fixed; position: fixed;
top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}}; top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),<<get.theme.metric storyright>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + <<get.theme.metric storypaddingright>>)); left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> + <<get.theme.metric sidebarpadding>>));
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 storypaddingright>>; margin: 0 0 0 -<<get.theme.metric sidebarpadding>>;
padding: 71px 0 28px 42px; padding: 71px 0 28px <<get.theme.metric sidebarpadding>>;
} }
.tc-sidebar-left .tc-sidebar-scrollable { .tc-sidebar-left .tc-sidebar-scrollable {
left: 0; left: 0;
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}),<<get.theme.metric storyright>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + <<get.theme.metric storypaddingleft>>)); right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> + <<get.theme.metric sidebarpadding>>));
margin: 0 -<<get.theme.metric storypaddingleft>> 0 0; margin: 0 -<<get.theme.metric sidebarpadding>> 0 0;
z-index: 1;
} }
html[dir="rtl"] .tc-sidebar-scrollable { html[dir="rtl"] .tc-sidebar-scrollable {
padding-right: <<get.theme.metric storypaddingleft>>; padding-right: <<get.theme.metric sidebarpadding>>;
padding-left: 0; padding-left: 0;
} }
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: <<get.theme.metric storypaddingright>>; padding-right: <<get.theme.metric sidebarpadding>>;
padding-left: 0; padding-left: 0;
} }
.tc-story-river { .tc-story-river {
left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}); left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - <<get.theme.metric storywidth>> - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + <<get.theme.metric storypaddingright>>)); 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}}; top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
width: clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},<<get.theme.metric storywidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} + <<get.theme.metric storypaddingright>>)); 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>>; padding: 42px <<get.theme.metric storypaddingright>> 42px <<get.theme.metric storypaddingleft>>;
} }
@ -1057,9 +1058,9 @@ 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;
left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - <<get.theme.metric storypaddingleft>>),calc(100% - <<get.theme.metric storywidth>> - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}})); 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({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},<<get.theme.metric storywidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} + <<get.theme.metric storypaddingleft>>)); width: clamp(<<get.theme.metric storyminwidth>>,<<get.theme.metric storywidth>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>>));
right: max(0px,calc({{$:/themes/tiddlywiki/vanilla/metrics/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 {
@ -1281,6 +1282,10 @@ button.tc-btn-invisible.tc-remove-tag-button {
padding: 3px; /* make space for outline */ padding: 3px; /* make space for outline */
} }
html[dir="rtl"] .tc-tiddler-frame .tc-tiddler-controls {
float: left;
}
.tc-tiddler-controls .tc-drop-down { .tc-tiddler-controls .tc-drop-down {
font-size: 0.6em; font-size: 0.6em;
} }
@ -1438,6 +1443,8 @@ html body.tc-body.tc-single-tiddler-window {
background-color: <<colour tiddler-background>>; background-color: <<colour tiddler-background>>;
z-index: 1; z-index: 1;
padding-top: 8px; padding-top: 8px;
margin-left: -3px;
margin-right: -3px;
} }
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar, .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,
@ -1516,22 +1523,19 @@ html body.tc-body.tc-single-tiddler-window {
<<if-fluid-fixed text:""" <<if-fluid-fixed text:"""
.tc-story-river { .tc-story-river {
padding-right: 0;
position: relative; position: relative;
width: auto; width: auto;
left: 0; left: 0;
margin-left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}); margin-left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
margin-right: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + <<get.theme.metric storypaddingright>>)); margin-right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - <<get.theme.metric sidebarpadding>>),calc(<<get.theme.metric sidebarwidth>> - <<get.theme.metric sidebarpadding>>),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}));
} }
.tc-sidebar-left .tc-story-river { .tc-sidebar-left .tc-story-river {
margin-right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}); margin-right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
margin-left: clamp({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}},<<get.theme.metric sidebarwidth>>,calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} + <<get.theme.metric storypaddingleft>>)); margin-left: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarminwidth}} - <<get.theme.metric sidebarpadding>>),calc(<<get.theme.metric sidebarwidth>> - <<get.theme.metric sidebarpadding>>),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}}));
left: auto; left: auto;
width: auto; width: auto;
right: 0; right: 0;
padding-right: <<get.theme.metric storypaddingright>>;
padding-left: 0;
} }
html[dir="rtl"] .tc-story-river:not(.tc-sidebar-left .tc-story-river) { html[dir="rtl"] .tc-story-river:not(.tc-sidebar-left .tc-story-river) {
@ -1717,9 +1721,10 @@ html body.tc-body.tc-single-tiddler-window {
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview { .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {
grid-area: preview; grid-area: preview;
overflow-wrap: anywhere; overflow-wrap: anywhere;
min-height: 100px;
word-break: normal; word-break: normal;
border: 1px solid <<colour tiddler-editor-border>>; border: 1px solid <<colour tiddler-editor-border>>;
margin: 4px 0 3px 3px; margin: 4px 0 3px 0;
padding: 3px 3px 3px 3px; padding: 3px 3px 3px 3px;
} }

2
themes/tiddlywiki/vanilla/metrics.multids
View File

@ -4,8 +4,10 @@ bodyfontsize: 15px
bodylineheight: 22px bodylineheight: 22px
fontsize: 14px fontsize: 14px
lineheight: 20px lineheight: 20px
previewsliderwidth: 6px
sidebarbreakpoint: 960px sidebarbreakpoint: 960px
sidebarminwidth: 350px sidebarminwidth: 350px
sidebarpadding: 42px
sidebarwidth: 350px sidebarwidth: 350px
storyleft: 0px storyleft: 0px
storypaddingleft: 42px storypaddingleft: 42px

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

@ -108,12 +108,13 @@ code-body: yes
<%if [<set.storywidth.storyright>match[yes]] %> <%if [<set.storywidth.storyright>match[yes]] %>
.tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-resizer.tc-main-sidebar-resizer {
left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingright>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storypaddingright>> - (2 * <<get.theme.metric storypaddingright>> / 3))); left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),clamp(calc(<<get.theme.metric storywidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)));
} }
.tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer { .tc-sidebar-left .tc-sidebar-resizer.tc-main-sidebar-resizer {
left: auto; left: auto;
right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric storypaddingleft>> / 3)),clamp(calc(<<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingleft>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric storypaddingleft>> / 3)),calc(<<get.theme.metric storyright>> - (2 * <<get.theme.metric storypaddingleft>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingleft>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingleft>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storypaddingleft>> - (2 * <<get.theme.metric storypaddingleft>> / 3))); z-index: 1;
right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),clamp(calc(<<get.theme.metric storywidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),max(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3)),calc(<<get.theme.metric storyright>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3))),max(calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric sidebarpadding>> / 3) + (<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - <<get.theme.metric storyright>>)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)))),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.theme.metric sidebarpadding>> + <<get.theme.metric storyleft>> - (2 * <<get.theme.metric sidebarpadding>> / 3)));
} }
<% endif %> <% endif %>
@ -121,12 +122,13 @@ 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 storypaddingright>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingright>> / 3))); 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)));
} }
.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 storypaddingleft>> + (<<get.theme.metric storypaddingleft>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.theme.metric storypaddingleft>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.theme.metric storypaddingleft>> / 3))); z-index: 1;
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)));
} }
<% endif %> <% endif %>
@ -134,12 +136,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 storypaddingright>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingright>> / 3))); 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)));
} }
.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: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.theme.metric storypaddingleft>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.theme.metric storypaddingleft>> / 3))); 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)));
} }
<% endif %> <% endif %>
@ -168,7 +171,7 @@ code-body: yes
.tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor, .tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor,
.tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor, .tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor,
.tc-tiddler-frame contenteditable[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor { .tc-tiddler-frame contenteditable[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor {
width: calc(100% - 3px); width: calc(100% - <<get.theme.metric previewsliderwidth>>);
min-width: 0px; min-width: 0px;
} }