mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-04-08 19:56:39 +00:00
Code Issues Releases Wiki Activity

NO vw usage - vw is bad

Browse Source
This commit is contained in:
BurningTreeC 2024-09-27 15:40:34 +02:00
parent cdd4eb0d1d
commit cc297ed758
3 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/ui/PageTemplate/story.tid
View File

@ -2,7 +2,7 @@ title: $:/core/ui/PageTemplate/story
tags: $:/tags/PageTemplate
\whitespace trim
<section class="tc-story-river" role="main">
<%if [{$:/state/sidebar}!match[no]] %>
<$eventcatcher tag="div" class="tc-sidebar-resizer-pointerdown-eventcatcher" selector=".tc-sidebar-resizer" matchSelector=".tc-sidebar-resizer" $pointerdown=<<sidebar-resizer-pointerdown-actions>> $pointerup=<<sidebar-resizer-pointerup-actions>>>
@ -16,6 +16,10 @@ tags: $:/tags/PageTemplate
</$eventcatcher>
<% endif %>
<section class="tc-story-river" role="main">
<section class="story-backdrop">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/AboveStory]!has[draft.of]]">

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

@ -3,7 +3,7 @@ tags: $:/tags/Global
\procedure sidebar-resizer-pointerdown-actions()
<%if [[$:/state/sidebar/resizing]is[missing]then<event-mousebutton>match[left]] %>
<$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} dragDiff=<<event-fromselected-posx>> storyRiverWidth={{{ [<event-fromviewport-posx>subtract<dragDiff>] }}} sidebarWidth={{{ [<viewportWidth>subtract<event-fromviewport-posx>add<dragDiff>] }}}>
<$let leftOffset={{{ [<event-fromviewport-posx>subtract<event-fromcatcher-posx>] }}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} dragDiff=<<event-fromselected-posx>> storyRiverWidth={{{ [<event-fromcatcher-posx>subtract<dragDiff>] }}} sidebarWidth={{{ [<viewportWidth>subtract<event-fromcatcher-posx>add<dragDiff>] }}}>
<$action-setfield $tiddler="$:/state/sidebar/dimensions"
drag-diff=<<dragDiff>>
left-offset=<<leftOffset>>
@ -20,7 +20,7 @@ tags: $:/tags/Global
\end
\procedure sidebar-resizer-pointermove-actions()
<%if [[$:/state/sidebar/resizing]!is[missing]] %>
<$let leftOffset={{$:/state/sidebar/dimensions!!left-offset}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} storyRiverWidth={{{ [<event-fromviewport-posx>subtract{$:/state/sidebar/dimensions!!drag-diff}] }}} sidebarWidth={{{ [<viewportWidth>subtract<event-fromviewport-posx>add{$:/state/sidebar/dimensions!!drag-diff}] }}}>
<$let leftOffset={{$:/state/sidebar/dimensions!!left-offset}} viewportWidth={{{ [<leftOffset>add<tv-widgetnode-width>] }}} storyRiverWidth={{{ [<event-fromcatcher-posx>subtract{$:/state/sidebar/dimensions!!drag-diff}] }}} sidebarWidth={{{ [<viewportWidth>subtract<event-fromcatcher-posx>add{$:/state/sidebar/dimensions!!drag-diff}] }}}>
<$action-setfield $tiddler="$:/state/sidebar/dimensions"
story-river-width=<<storyRiverWidth>>
sidebar-width=<<sidebarWidth>>/>

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

@ -18,14 +18,14 @@ code-body: yes
}
.tc-story-river {
width: calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
width: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
}
.tc-sidebar-resizer-pointerdown-eventcatcher {
position: absolute;
top: calc(0px - {{$:/themes/tiddlywiki/vanilla/metrics/storytop}});
top: 0;
left: 0;
right: calc(-{{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}});
right: 0;
height: 100%;
min-height: 100vh;
z-index: 0;
@ -45,9 +45,9 @@ code-body: yes
.tc-sidebar-resizer-pointermove {
position: absolute;
top: 0;
left: calc(100% - 100vw);
left: 0;
right: 0;
width: 100vw;
width: 100%;
height: 100%;
min-height: 100vh;
z-index: -1;
@ -76,7 +76,7 @@ code-body: yes
width: calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px);
}
<% elseif [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
<% elseif [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
.tc-story-river {
padding-right: 0px;
@ -87,12 +87,8 @@ code-body: yes
left: calc({{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} + 22px);
}
.tc-sidebar-resizer-pointerdown-eventcatcher {
right: calc(-100vw + {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} - 42px + {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
}
.tc-sidebar-resizer {
right: calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} + 20px);
right: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}} + 20px);
}
<% endif %>
@ -139,7 +135,6 @@ code-body: yes
}
.tc-sidebar-scrollable {
left: auto;
bottom: 0;
right: 0;
}
@ -149,41 +144,42 @@ code-body: yes
<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
.tc-story-river {
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc({{$:/state/sidebar/dimensions!!story-river-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc({{$:/state/sidebar/dimensions!!story-river-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
}
.tc-sidebar-scrollable {
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px),calc(100vw - 22px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 22px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
left: auto;
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px),calc(100% - 22px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 22px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
}
.tc-sidebar-resizer-pointerdown-eventcatcher {
right: auto;
min-width: clamp(calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% + (100vw - {{$:/state/sidebar/dimensions!!story-river-width}}px) - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
max-width: clamp(calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% + (100vw - {{$:/state/sidebar/dimensions!!story-river-width}}px) - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
min-width: clamp(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
max-width: clamp(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
}
.tc-sidebar-resizer {
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px),calc(100vw - 22px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 22px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px),calc(100% - 22px - {{$:/state/sidebar/dimensions!!story-river-width}}px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 22px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
}
<% else %>
.tc-story-river {
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc(100vw - {{$:/state/sidebar/dimensions!!sidebar-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
width: clamp(0px,clamp({{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}},calc(100% - {{$:/state/sidebar/dimensions!!sidebar-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}})),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}} - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}}));
}
.tc-sidebar-scrollable {
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px - 22px),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 22px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
width: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px - 22px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 22px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
}
.tc-sidebar-resizer-pointerdown-eventcatcher {
right: auto;
min-width: clamp(calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% + {{$:/state/sidebar/dimensions!!sidebar-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
max-width: clamp(calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% + {{$:/state/sidebar/dimensions!!sidebar-width}}px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
min-width: clamp(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
max-width: clamp(calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
}
.tc-sidebar-resizer {
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px - 22px),calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 22px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
right: clamp(calc({{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 22px),calc({{$:/state/sidebar/dimensions!!sidebar-width}}px - 22px),calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyminwidth}} - 22px - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
}
<% endif %>