open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: work with small layout, hide sections before ready

Browse Source
This commit is contained in:
eight 2019-06-18 12:19:51 +08:00
parent 0bec3f040b
commit 445f76c234
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
edit/edit.css
View File

@ -263,14 +263,20 @@ input:invalid {
#lint:not([open]) + #footer { #lint:not([open]) + #footer {
margin-top: 4em; margin-top: 4em;
} }
/************ content ***********/ /************ section editor ***********/
#sections > * { .section-editor .section {
margin: 0 0.7rem; margin: 0 0.7rem;
padding: 1rem; padding: 1rem;
} }
#sections > :not(:first-child) { .section-editor .section:not(:first-child) {
border-top: 2px solid hsl(0, 0%, 80%); 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 { .add-section:after {
content: attr(short-text); content: attr(short-text);
} }
@ -951,12 +957,8 @@ html:not(.usercss) .usercss-only,
flex: 1; flex: 1;
} }
#sections > * { #sections > * {
margin: 0 .5rem .5rem; margin: 0 .5rem;
padding: .5rem 0 0; padding: .5rem 0;
}
#sections > *:first-child {
margin: .5rem;
padding: 0;
} }
.usercss .CodeMirror-scroll { .usercss .CodeMirror-scroll {
max-height: calc(100vh - var(--header-narrow-min-height)); max-height: calc(100vh - var(--header-narrow-min-height));

9
edit/sections-editor.js
View File

@ -13,6 +13,8 @@ function createSectionsEditor({style, onTitleChanged}) {
const container = $('#sections'); const container = $('#sections');
const sections = []; const sections = [];
container.classList.add('section-editor');
const nameEl = $('#name'); const nameEl = $('#name');
nameEl.addEventListener('input', () => { nameEl.addEventListener('input', () => {
dirty.modify('name', style.name, nameEl.value); dirty.modify('name', style.name, nameEl.value);
@ -99,11 +101,16 @@ function createSectionsEditor({style, onTitleChanged}) {
if (sections.every(s => s.cm.isRefreshed)) { if (sections.every(s => s.cm.isRefreshed)) {
fitToAvailableSpace(); fitToAvailableSpace();
} }
setTimeout(() => {
container.classList.add('section-editor-ready');
}, 50);
} }
} }
function fitToAvailableSpace() { 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) { if (available <= 0) {
return; return;
} }