clone/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/TiddlyWiki/TiddlyWiki5.git synced 2026-02-02 00:07:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use display: grid for editor toolbar, editor and preview (#7787)

Browse Source 
* make toolbar, editor and preview display: grid

* correct display of bitmap editor

* grid-area: toolbar not only when preview is shown

* use dedicated classes and tc-grid and no brittle CSS selectors

* no need for width: 100%

* cleanup style definitions

* use semantic classnames
This commit is contained in:
Simon Huber
2023-10-17 12:54:20 +02:00
committed by GitHub
parent 2ffbfd84a5
commit c185e373c5
2 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1365,6 +1365,11 @@ html body.tc-body.tc-single-tiddler-window {
margin-top: 8px;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-editor-toolbar {
grid-area: toolbar;
}
.tc-editor-toolbar button {
vertical-align: middle;
background-color: <<colour tiddler-controls-foreground>>;
@@ -1576,9 +1581,30 @@ html body.tc-body.tc-single-tiddler-window {
overflow: auto;
}
.tc-tiddler-preview-preview {
float: right;
width: 49%;
.tc-tiddler-editor {
display: grid;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview {
grid-template-areas:
"toolbar toolbar"
"editor preview";
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden {
grid-template-areas:
"toolbar"
"editor";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {
grid-area: preview;
overflow-wrap: anywhere;
word-break: normal;
border: 1px solid <<colour tiddler-editor-border>>;
margin: 4px 0 3px 3px;
padding: 3px 3px 3px 3px;
@@ -1593,12 +1619,15 @@ html body.tc-body.tc-single-tiddler-window {
""">>
.tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor {
width: 49%;
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-edit-texteditor,
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-edit-texteditor {
grid-area: editor;
}
.tc-tiddler-frame .tc-tiddler-preview canvas.tc-edit-bitmapeditor {
max-width: 49%;
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview canvas.tc-edit-bitmapeditor,
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden canvas.tc-edit-bitmapeditor {
grid-area: editor;
max-width: 100%;
}
.tc-edit-fields {