mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-02-04 05:09:10 +00:00
Code Issues Releases Wiki Activity

take into account that story-padding left and story-padding right changes sidebar maxwidth, storyright min

Browse Source
This commit is contained in:
BurningTreeC 2024-11-10 11:45:53 +01:00
parent 6aaea70eba
commit fe31cd3866
5 changed files with 26 additions and 21 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,7 +8,6 @@ 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]] %>

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

@ -109,3 +109,7 @@ code-body: yes
\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[))]] \function get.theme.storywidthoverlap() [[calc(abs(]addsuffix<get.theme.metric storyright>addsuffix[ - ]addsuffix<get.theme.metric storywidth>addsuffix[ - ]addsuffix<get.theme.metric storyleft>addsuffix[))]]
\function get.theme.storyleftpadding.excess() [[calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ - ]addsuffix<get.story-sidebar.overlap>addsuffix[)]]
\function get.theme.storyrightpadding.excess() [[calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ - ]addsuffix<get.story-sidebar.overlap>addsuffix[)]]

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

@ -200,12 +200,13 @@ 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]] }}} storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.overlap>] :else[[0]] }}}
storyPaddingLeftExcess={{{ [<storyPaddingLeft>subtract<storySidebarOffset>] }}}
storyPaddingRightExcess={{{ [<storyPaddingRight>subtract<storySidebarOffset>] }}}
sidebarMinWidthWithoutOffset={{{ [<sidebarMinWidth>subtract<storySidebarOffset>] }}} sidebarMinWidthWithoutOffset={{{ [<sidebarMinWidth>subtract<storySidebarOffset>] }}}
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]] }}}
storyMinWidth={{{ [<storyMinWidth>add<storyPaddingLeftExcess>add<storyPaddingRightExcess>] }}}
intermediateStoryWidthStart={{{ [<storyWidthStart>] }}}
intermediateStoryWidth={{{ [<storyWidthStart>add<dragDiff>] }}} intermediateStoryWidth={{{ [<storyWidthStart>add<dragDiff>] }}}
intermediateStoryRight={{{ [<storyRightStart>add<dragDiff>] }}} intermediateStoryRight={{{ [<storyRightStart>add<dragDiff>] }}}
@ -266,14 +267,14 @@ 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>] }}} storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.offset>] :else[[0]] }}} storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.overlap>] :else[[0]] }}}
sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>add<storySidebarOffset>] }}} storyPaddingLeftExcess={{{ [<storyPaddingLeft>subtract<storySidebarOffset>] }}}
storyPaddingRightExcess={{{ [<storyPaddingRight>subtract<storySidebarOffset>] }}}
sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>add<storySidebarOffset>subtract<storyPaddingLeftExcess>subtract<storyPaddingRightExcess>] }}}
clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<storySidebarOffset>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}} 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>] }}}

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

@ -1046,34 +1046,34 @@ button.tc-btn-invisible.tc-remove-tag-button {
} }
.tc-sidebar-scrollable { .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)); left: clamp(calc(<<get.theme.metric storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>>));
} }
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 {
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)); right: clamp(calc(<<get.theme.metric storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>>));
} }
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: clamp(calc(<<get.theme.metric storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + 42px)); left: clamp(calc(<<get.theme.metric storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>>),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>>));
} }
.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 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: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.storywidthoverlap>> - <<get.story-sidebar.overlap>>),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>>)); width: clamp(<<get.theme.metric storyminwidth>>,<<get.theme.metric storywidth>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> - <<get.theme.metric storyleft>> + <<get.theme.storywidthoverlap>>));
} }
.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.storywidthoverlap>> - 42px),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>> - <<get.story-sidebar.overlap>>),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>>);
} }
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>> - <<get.theme.storywidthoverlap>> - 42px),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>> - <<get.story-sidebar.overlap>>),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>>);
} }
@ -1081,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.storywidthoverlap>> - 42px),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>> - <<get.story-sidebar.overlap>>),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 """
@ -1568,12 +1568,13 @@ 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.story-sidebar.overlap>>)); width: clamp(<<get.theme.metric sidebarminwidth>>,<<get.theme.metric sidebarwidth>>,(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>> + <<get.story-sidebar.overlap>> - <<get.theme.storyleftpadding.excess>> - <<get.theme.storyrightpadding.excess>>));
} }
.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.story-sidebar.overlap>> - <<get.theme.storyleftpadding.excess>> - <<get.theme.storyrightpadding.excess>>));
} }
html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable { html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable {

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

@ -112,12 +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: 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)); left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (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 { .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.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)); right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (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 %> <% endif %>
@ -125,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.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))); left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<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.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))); right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<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 %>