diff --git a/static/css/wiki.css b/static/css/wiki.css index 4604832..b0c63f5 100644 --- a/static/css/wiki.css +++ b/static/css/wiki.css @@ -851,6 +851,7 @@ body.editor-mode .editor-shell .EasyMDEContainer { display: grid; min-height: 0; height: 100%; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; } @@ -858,15 +859,18 @@ body.editor-mode .editor-shell .EasyMDEContainer { body.editor-mode .EasyMDEContainer .editor-toolbar { position: relative; z-index: 25; + grid-column: 1 / -1; grid-row: 1; margin: 0; background: white; } body.editor-mode .EasyMDEContainer .CodeMirror { + grid-column: 1; grid-row: 2; min-height: 0 !important; height: 100% !important; + width: 100% !important; overflow: hidden; } @@ -879,22 +883,86 @@ body.editor-mode .EasyMDEContainer .CodeMirror-scroll { } body.editor-mode .EasyMDEContainer .editor-statusbar { + grid-column: 1 / -1; grid-row: 3; min-height: var(--editor-status-height); background: white; } +/* EasyMDE fullscreen needs to respect the wiki's editor chrome instead of + anchoring against the browser viewport with no offset. Keep the toolbar and + status bar pinned at the edges while the editor fills the remaining space. */ +body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen, +body.editor-mode .EasyMDEContainer .editor-statusbar.fullscreen { + position: fixed !important; + left: 0; + right: 0; + z-index: 130; +} + +body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen { + top: 0; + width: 100%; + height: 50px; + border: 0; + border-radius: 0; + background: white; +} + +body.editor-mode .EasyMDEContainer .editor-statusbar.fullscreen { + bottom: 0; + min-height: 28px; + border-top: 1px solid #cfd5dc; + background: white; +} + +body.editor-mode .EasyMDEContainer .CodeMirror-fullscreen { + position: fixed !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: auto !important; + height: auto !important; + margin: 0; + border: 0; + border-radius: 0; + z-index: 120; +} + +body.editor-mode .EasyMDEContainer:has(.editor-toolbar.fullscreen) .CodeMirror-fullscreen.CodeMirror-sided { + top: 50px !important; + right: auto !important; + bottom: 0 !important; + width: 50% !important; +} + +body.editor-mode .EasyMDEContainer:has(.editor-toolbar.fullscreen) .editor-preview-side.editor-preview-active-side { + position: fixed; + top: 50px; + right: 0; + bottom: 0; + left: auto; + width: 50%; + height: auto; + z-index: 125; + overflow-y: auto; +} + +body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen::before, +body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen::after { + display: none; +} + /* EasyMDE normally positions the side preview against the viewport. In the wiki it belongs to the editor work area, so it gets its own independent scroll region beside CodeMirror instead. */ body.editor-mode .EasyMDEContainer .editor-preview-side { - position: absolute; + position: static; + grid-column: 2; + grid-row: 2; z-index: 20; - top: var(--editor-toolbar-height); - right: 0; - bottom: var(--editor-status-height); - left: 50%; - width: 50%; + width: auto; height: auto; min-height: 0; margin: 0; @@ -905,7 +973,7 @@ body.editor-mode .EasyMDEContainer .editor-preview-side { } body.editor-mode .EasyMDEContainer .CodeMirror-sided { - width: 50% !important; + width: 100% !important; } body.editor-mode .editor-metadata-row {