mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-01-10 09:20:26 +00:00
fix tiddler editor resizer not shown on small screens
This commit is contained in:
BurningTreeC
parent
5b66e0b203
commit
91af04dc3c
@ -6,11 +6,7 @@ code-body: yes
|
||||
|
||||
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional html
|
||||
|
||||
<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
|
||||
|
||||
@media (min-width: <<sidebarbreakpoint>>) {
|
||||
|
||||
.tc-sidebar-resizer {
|
||||
.tc-sidebar-resizer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
@ -19,15 +15,73 @@ code-body: yes
|
||||
opacity: 0.1;
|
||||
cursor: ew-resize;
|
||||
background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer:hover {
|
||||
.tc-sidebar-resizer:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer.tc-main-sidebar-resizer {
|
||||
z-index: 1;
|
||||
}
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tc-edit-texteditor-slider > .tc-sidebar-resizer-pointerdown-eventcatcher.tc-editor-preview-eventcatcher {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-resizer-active {
|
||||
z-index: 801;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher.tc-resizer-active {
|
||||
z-index: 802;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove.tc-resizer-active {
|
||||
z-index: 803;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer.tc-resizer-active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
|
||||
|
||||
@media (min-width: <<sidebarbreakpoint>>) {
|
||||
|
||||
@media (pointer: coarse) {
|
||||
|
||||
@ -40,64 +94,6 @@ code-body: yes
|
||||
}
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher, .tc-sidebar-resizer-pointermove-eventcatcher-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tc-edit-texteditor-slider > .tc-sidebar-resizer-pointerdown-eventcatcher.tc-editor-preview-eventcatcher {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointerdown-eventcatcher:not(.tc-main-sidebar-resizer), .tc-sidebar-resizer-pointermove-eventcatcher-wrapper:not(.tc-main-sidebar-resizer) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer, .tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher-wrapper.tc-resizer-active {
|
||||
z-index: 801;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove-eventcatcher.tc-resizer-active {
|
||||
z-index: 802;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer-pointermove.tc-resizer-active {
|
||||
z-index: 803;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tc-sidebar-resizer.tc-resizer-active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
<%if [[$:/state/sidebar/resizing]is[tiddler]] %>
|
||||
|
||||
@media (pointer: coarse) {
|
||||
@ -168,22 +164,20 @@ code-body: yes
|
||||
|
||||
<% endif %>
|
||||
|
||||
@media (min-width: <<sidebarbreakpoint>>) {
|
||||
|
||||
.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 contenteditable[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 contenteditable[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor {
|
||||
width: calc(100% - <<get.theme.metric previewsliderwidth>>);
|
||||
min-width: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview,
|
||||
.tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview,
|
||||
.tc-tiddler-frame contenteditable[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview {
|
||||
.tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview,
|
||||
.tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview,
|
||||
.tc-tiddler-frame contenteditable[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview {
|
||||
min-width: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
<$list filter="[all[tiddlers]prefix[$:/state/resizer/previewwidth-]]" variable="previewWidthTiddler">
|
||||
<$list filter="[all[tiddlers]prefix[$:/state/resizer/previewwidth-]]" variable="previewWidthTiddler">
|
||||
|
||||
<$let
|
||||
identifier={{{ [<previewWidthTiddler>removeprefix[$:/state/resizer/previewwidth-]] }}}
|
||||
@ -207,6 +201,4 @@ code-body: yes
|
||||
|
||||
</$let>
|
||||
|
||||
</$list>
|
||||
|
||||
}
|
||||
</$list>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user