WIP: refactor editor CSS
This commit is contained in:
eight04
parent
3ea7e45624
commit
6e1bc133f0
|
|
@ -418,7 +418,7 @@
|
|||
<summary><h2 i18n-text="sections"></h2></summary>
|
||||
<ol id="toc"></ol>
|
||||
</details>
|
||||
<details id="lint" data-pref="editor.lint.expanded" class="hidden-unless-compact ignore-pref-if-compact">
|
||||
<details id="lint" data-pref="editor.lint.expanded" class="ignore-pref-if-compact">
|
||||
<summary>
|
||||
<h2 i18n-text="linterIssues">: <span id="issue-count"></span>
|
||||
<a id="lint-help" class="svg-inline-wrapper intercepts-click" tabindex="0">
|
||||
|
|
@ -431,7 +431,7 @@
|
|||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div id="footer" class="hidden">
|
||||
<div id="footer">
|
||||
<a href="https://github.com/openstyles/stylus/wiki/Usercss"
|
||||
i18n-text="externalUsercssDocument"
|
||||
target="_blank"></a>
|
||||
|
|
|
|||
66
edit/base.js
66
edit/base.js
|
|
@ -121,41 +121,41 @@ const baseInit = (() => {
|
|||
//#endregion
|
||||
//#region init layout/resize
|
||||
|
||||
baseInit.domReady.then(() => {
|
||||
let headerHeight;
|
||||
detectLayout(true);
|
||||
window.on('resize', () => detectLayout());
|
||||
// baseInit.domReady.then(() => {
|
||||
// let headerHeight;
|
||||
// detectLayout(true);
|
||||
// window.on('resize', () => detectLayout());
|
||||
|
||||
function detectLayout(now) {
|
||||
const compact = window.innerWidth <= 850;
|
||||
if (compact) {
|
||||
document.body.classList.add('compact-layout');
|
||||
if (!editor.isUsercss) {
|
||||
if (now) fixedHeader();
|
||||
else debounce(fixedHeader, 250);
|
||||
window.on('scroll', fixedHeader, {passive: true});
|
||||
}
|
||||
} else {
|
||||
document.body.classList.remove('compact-layout', 'fixed-header');
|
||||
window.off('scroll', fixedHeader);
|
||||
}
|
||||
for (const el of $$('details[data-pref]')) {
|
||||
el.open = compact ? false : prefs.get(el.dataset.pref);
|
||||
}
|
||||
}
|
||||
// function detectLayout(now) {
|
||||
// const compact = window.innerWidth <= 850;
|
||||
// if (compact) {
|
||||
// document.body.classList.add('compact-layout');
|
||||
// if (!editor.isUsercss) {
|
||||
// if (now) fixedHeader();
|
||||
// else debounce(fixedHeader, 250);
|
||||
// window.on('scroll', fixedHeader, {passive: true});
|
||||
// }
|
||||
// } else {
|
||||
// document.body.classList.remove('compact-layout', 'fixed-header');
|
||||
// window.off('scroll', fixedHeader);
|
||||
// }
|
||||
// for (const el of $$('details[data-pref]')) {
|
||||
// el.open = compact ? false : prefs.get(el.dataset.pref);
|
||||
// }
|
||||
// }
|
||||
|
||||
function fixedHeader() {
|
||||
const headerFixed = $('.fixed-header');
|
||||
if (!headerFixed) headerHeight = $('#header').clientHeight;
|
||||
const scrollPoint = headerHeight - 43;
|
||||
if (window.scrollY >= scrollPoint && !headerFixed) {
|
||||
$('body').style.setProperty('--fixed-padding', ` ${headerHeight}px`);
|
||||
$('body').classList.add('fixed-header');
|
||||
} else if (window.scrollY < scrollPoint && headerFixed) {
|
||||
$('body').classList.remove('fixed-header');
|
||||
}
|
||||
}
|
||||
});
|
||||
// function fixedHeader() {
|
||||
// const headerFixed = $('.fixed-header');
|
||||
// if (!headerFixed) headerHeight = $('#header').clientHeight;
|
||||
// const scrollPoint = headerHeight - 43;
|
||||
// if (window.scrollY >= scrollPoint && !headerFixed) {
|
||||
// $('body').style.setProperty('--fixed-padding', ` ${headerHeight}px`);
|
||||
// $('body').classList.add('fixed-header');
|
||||
// } else if (window.scrollY < scrollPoint && headerFixed) {
|
||||
// $('body').classList.remove('fixed-header');
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
//#endregion
|
||||
//#region init header
|
||||
|
|
|
|||
206
edit/edit.css
206
edit/edit.css
|
|
@ -77,16 +77,16 @@ html:not(.is-new-style) #heading::after {
|
|||
.options-column > div[class="option"] {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.options-column > .usercss-only {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
label {
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
/************ header ************/
|
||||
#header {
|
||||
width: 280px;
|
||||
|
|
@ -380,6 +380,9 @@ input:invalid {
|
|||
vertical-align: middle;
|
||||
}
|
||||
/* footer */
|
||||
#footer {
|
||||
display: none;
|
||||
}
|
||||
.usercss #footer {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
|
|
@ -1037,97 +1040,103 @@ body.linter-disabled .hidden-unless-compact {
|
|||
/************ reponsive layouts ************/
|
||||
@media(max-width: 850px) {
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
#header {
|
||||
flex: 0 1 auto;
|
||||
height: unset;
|
||||
width: unset;
|
||||
position: inherit;
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed #AAA;
|
||||
padding: .5rem 1rem .5rem .5rem;
|
||||
}
|
||||
.fixed-header {
|
||||
--fixed-height: 40px;
|
||||
padding-top: var(--fixed-padding);
|
||||
}
|
||||
.fixed-header #header {
|
||||
min-height: var(--fixed-height);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.fixed-header #header > *:not(#details-wrapper),
|
||||
.fixed-header #options {
|
||||
display: none !important;
|
||||
}
|
||||
.fixed-header #details-wrapper {
|
||||
padding-top: calc((var(--fixed-height) - 1.2rem) / 2); /* 1.2 is the normal line height */
|
||||
}
|
||||
#header summary + *,
|
||||
#lint > .lint-scroll-container {
|
||||
margin-left: 1rem;
|
||||
padding: .25rem 0 .5rem;
|
||||
}
|
||||
#actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#header input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#header details {
|
||||
margin: 0;
|
||||
display: contents;
|
||||
position: static;
|
||||
}
|
||||
|
||||
#heading,
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#basic-info {
|
||||
margin-bottom: .5rem;
|
||||
margin: .5rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#basic-info > *:first-child {
|
||||
#basic-info > :first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#basic-info > *:not(:last-child) {
|
||||
#basic-info > :not(:last-child) {
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
#basic-info #name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#actions {
|
||||
margin: .5rem;
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
align-items: center;
|
||||
}
|
||||
#actions a,
|
||||
#actions div a, /* FIXME: remove a>button */
|
||||
#actions button {
|
||||
margin: 0;
|
||||
}
|
||||
#actions > div {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
#details-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -0.5rem 0 0;
|
||||
padding: .5rem .5rem 0;
|
||||
gap: .5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
z-index: 5;
|
||||
border-bottom: 1px dashed rgb(170, 170, 170);
|
||||
flex-direction: row;
|
||||
}
|
||||
#details-wrapper > details {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
#details-wrapper::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
bottom: -48px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 3rem 3rem -4.2rem inset;
|
||||
pointer-events: none;
|
||||
}
|
||||
#header details[open] + details[open] {
|
||||
margin-top: 0;
|
||||
}
|
||||
#header details:not(#options) {
|
||||
max-width: 50%;
|
||||
}
|
||||
#header summary {
|
||||
margin-left: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
#header summary h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#header summary + * {
|
||||
margin-left: 1rem;
|
||||
padding: .25rem 0 0;
|
||||
}
|
||||
|
||||
#options-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#details-wrapper {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#options[open] {
|
||||
width: 100%;
|
||||
}
|
||||
#sections-list[open] {
|
||||
max-height: 102px;
|
||||
}
|
||||
#sections-list[open] #toc {
|
||||
max-height: 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#header details:not(#options) {
|
||||
max-width: 50%;
|
||||
}
|
||||
.options-column {
|
||||
flex-grow: 1;
|
||||
padding-right: .5rem;
|
||||
|
|
@ -1146,18 +1155,6 @@ body.linter-disabled .hidden-unless-compact {
|
|||
#options:not([open]) + #lint:not([open]) {
|
||||
margin-top: 0;
|
||||
}
|
||||
#lint summary {
|
||||
position: static;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#header summary {
|
||||
margin-left: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
#header summary h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.option label {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1169,27 +1166,41 @@ body.linter-disabled .hidden-unless-compact {
|
|||
position: relative;
|
||||
top: 0.2rem;
|
||||
}
|
||||
|
||||
#sections-list[open] {
|
||||
max-height: 102px;
|
||||
}
|
||||
#sections-list[open] #toc {
|
||||
max-height: 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#header #lint.hidden {
|
||||
display: block!important;
|
||||
}
|
||||
#header #lint {
|
||||
margin: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
#header #lint[open] > :not(summary) {
|
||||
display: none;
|
||||
}
|
||||
#lint > .lint-scroll-container {
|
||||
padding-top: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
#lint {
|
||||
padding: 0;
|
||||
margin: .5rem 0 0;
|
||||
}
|
||||
#lint:not([open]) + #footer {
|
||||
margin: .25em 0 -1em .25em;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: unset !important;
|
||||
height: auto;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.tab-bar {
|
||||
margin-top: var(--fixed-height);
|
||||
}
|
||||
|
||||
#sections > :not(.single-editor) {
|
||||
margin: 0 .5rem;
|
||||
padding: .5rem 0;
|
||||
|
|
@ -1198,10 +1209,25 @@ body.linter-disabled .hidden-unless-compact {
|
|||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
.usercss #options:not([open]) ~ #lint.hidden ~ #footer,
|
||||
.usercss #lint:not([open]) + #footer {
|
||||
margin-top: -.25em;
|
||||
|
||||
.usercss body {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
.usercss #header {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
.usercss #details-wrapper::after {
|
||||
display: none;
|
||||
}
|
||||
.usercss #footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#help-popup.big[style="display: block;"],
|
||||
#help-popup[style="display: block;"] {
|
||||
width: max-content;
|
||||
|
|
|
|||
|
|
@ -315,7 +315,7 @@ linterMan.DEFAULTS = {
|
|||
function updateCount() {
|
||||
const issueCount = Array.from(tables.values())
|
||||
.reduce((sum, table) => sum + table.trs.length, 0);
|
||||
$('#lint').classList.toggle('hidden-unless-compact', issueCount === 0);
|
||||
$('#lint').classList.toggle('hidden', issueCount === 0);
|
||||
$('#issue-count').textContent = issueCount;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user