diff --git a/edit/edit.css b/edit/edit.css index 0af83c6b..5489a7ad 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -263,14 +263,20 @@ input:invalid { #lint:not([open]) + #footer { margin-top: 4em; } -/************ content ***********/ -#sections > * { +/************ section editor ***********/ +.section-editor .section { margin: 0 0.7rem; padding: 1rem; } -#sections > :not(:first-child) { +.section-editor .section:not(:first-child) { border-top: 2px solid hsl(0, 0%, 80%); } +.section-editor:not(.section-editor-ready) .section { + visibility: hidden; +} +.section-editor:not(.section-editor-ready) .CodeMirror { + height: 0; +} .add-section:after { content: attr(short-text); } @@ -951,12 +957,8 @@ html:not(.usercss) .usercss-only, flex: 1; } #sections > * { - margin: 0 .5rem .5rem; - padding: .5rem 0 0; - } - #sections > *:first-child { - margin: .5rem; - padding: 0; + margin: 0 .5rem; + padding: .5rem 0; } .usercss .CodeMirror-scroll { max-height: calc(100vh - var(--header-narrow-min-height)); diff --git a/edit/sections-editor.js b/edit/sections-editor.js index 6b7ffc97..c4b7cab3 100644 --- a/edit/sections-editor.js +++ b/edit/sections-editor.js @@ -13,6 +13,8 @@ function createSectionsEditor({style, onTitleChanged}) { const container = $('#sections'); const sections = []; + container.classList.add('section-editor'); + const nameEl = $('#name'); nameEl.addEventListener('input', () => { dirty.modify('name', style.name, nameEl.value); @@ -99,11 +101,16 @@ function createSectionsEditor({style, onTitleChanged}) { if (sections.every(s => s.cm.isRefreshed)) { fitToAvailableSpace(); } + setTimeout(() => { + container.classList.add('section-editor-ready'); + }, 50); } } function fitToAvailableSpace() { - const available = window.innerHeight - container.offsetHeight; + const available = + Math.floor(container.offsetHeight - sections.reduce((h, s) => h + s.el.offsetHeight, 0)) || + window.innerHeight - container.offsetHeight; if (available <= 0) { return; }