From 75e68d34276bbff08bbce521b4ec17ddb51633f4 Mon Sep 17 00:00:00 2001 From: ed Date: Sat, 2 May 2020 08:01:58 +0200 Subject: [PATCH] ux fixes --- copyparty/web/md.css | 31 +++-- copyparty/web/md.html | 12 +- copyparty/web/md.js | 11 +- copyparty/web/mde.css | 240 +++++++++++++++++++++++++++++++- copyparty/web/mde.html | 13 ++ copyparty/web/mde.js | 14 +- scripts/deps-docker/mini-fa.css | 1 + 7 files changed, 301 insertions(+), 21 deletions(-) diff --git a/copyparty/web/md.css b/copyparty/web/md.css index 591d2ec8..b478e361 100644 --- a/copyparty/web/md.css +++ b/copyparty/web/md.css @@ -182,6 +182,10 @@ blink { } } @media screen { + html, body { + margin: 0; + padding: 0; + } a { color: #fff; background: #39b; @@ -208,16 +212,17 @@ blink { padding: .5em 0; } #mn { - text-shadow: 1px 1px 0 #000; - xfont-variant: small-caps; font-weight: normal; - margin: 1.3em 0 0 0; + padding: 1.3em 0 .7em 1em; font-size: 1.4em; } #mn a { - background: #2c2c2c; + color: #444; + background: none; margin: 0 0 0 -.2em; padding: 0 0 0 .4em; + text-decoration: none; + border: none; /* ie: */ border-bottom: .1em solid #777\9; margin-right: 1em\9; @@ -234,17 +239,16 @@ blink { height: 1.05em; margin: -.2em .3em -.2em -.4em; display: inline-block; - border: 1px solid rgba(255,224,192,0.3); + border: 1px solid rgba(0,0,0,0.3); border-width: .05em .05em 0 0; transform: rotate(45deg); - background: linear-gradient(45deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.35)); } #mn a:hover { - color: #fff; - background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0)); + color: #000; + text-decoration: underline; } #mh { - margin: 1.5em 0; + margin: 0 0 1.5em 0; } @@ -312,6 +316,12 @@ blink { background: #282828; border: .07em dashed #444; } + html.dark #mn a:not(:last-child):after { + border-color: rgba(255,255,255,0.3); + } + html.dark #mn a { + color: #ccc; + } } @media screen and (min-width: 64em) { #mw { @@ -366,6 +376,9 @@ blink { border-bottom: .07em solid #4ac; padding: 0 .3em; } + #toc { + margin: 0 !important; + } #toc>ul { border-left: .1em solid #84c4dd; } diff --git a/copyparty/web/md.html b/copyparty/web/md.html index d9fb97bf..03e9edb7 100644 --- a/copyparty/web/md.html +++ b/copyparty/web/md.html @@ -6,12 +6,12 @@ +
-
- dark - edit + go dark // + edit this
@@ -32,12 +32,12 @@ var link_md_as_html = false; // TODO (does nothing) var toggle = function () { var dark = !document.documentElement.getAttribute("class"); document.documentElement.setAttribute("class", dark ? "dark" : ""); - btn.innerHTML = dark ? "light" : "dark"; + btn.innerHTML = "go " + (dark ? "light" : "dark"); if (window.localStorage) - localStorage.setItem('md-dark', dark ? 1 : 0); + localStorage.setItem('darkmode', dark ? 1 : 0); }; btn.onclick = toggle; - if (window.localStorage && localStorage.getItem('md-dark') == 1) + if (window.localStorage && localStorage.getItem('darkmode') == 1) toggle(); })(); diff --git a/copyparty/web/md.js b/copyparty/web/md.js index 0c4ae026..d2a7facd 100644 --- a/copyparty/web/md.js +++ b/copyparty/web/md.js @@ -220,10 +220,16 @@ var toc = init_toc(); clearTimeout(final); timer_active = false; toc.refresh(); + + var y = 0; + if (window.matchMedia('(min-width: 64em)').matches) + y = parseInt(dom_nav.offsetHeight) - window.scrollY; + + dom_toc.style.marginTop = y < 0 ? 0 : y + "px"; } onscroll(); - window.onscroll = function () { + function ev_onscroll() { // long timeout: scroll ended clearTimeout(final); final = setTimeout(onscroll, 100); @@ -235,4 +241,7 @@ var toc = init_toc(); timer_active = true; setTimeout(onscroll, 10); }; + + window.onscroll = ev_onscroll; + window.onresize = ev_onscroll; })(); diff --git a/copyparty/web/mde.css b/copyparty/web/mde.css index 8a87b46d..69b0c5c9 100644 --- a/copyparty/web/mde.css +++ b/copyparty/web/mde.css @@ -7,11 +7,16 @@ html .editor-toolbar>button.active { border-color: rgba(0,0,0,0.4); background: html .editor-toolbar>i.separator { border-left: 1px solid #ccc; } html .editor-toolbar.disabled-for-preview>button:not(.no-disable) { opacity: .35 } +html { + line-height: 1.5em; +} html, body { margin: 0; padding: 0; min-height: 100%; font-family: sans-serif; + background: #f7f7f7; + color: #333; } #mn { font-weight: normal; @@ -23,6 +28,9 @@ html, body { margin: 0 0 0 -.2em; padding: 0 0 0 .4em; text-decoration: none; + /* ie: */ + border-bottom: .1em solid #777\9; + margin-right: 1em\9; } #mn a:first-child { padding-left: .5em; @@ -61,4 +69,234 @@ html .editor-toolbar>button.save.force-save { color: #f0c; } .cm-header { font-size: .4em !important } -*/ \ No newline at end of file +*/ + + + + + +/* copied from md.css for now */ +.mdo pre, +.mdo code, +.mdo a { + color: #480; + background: #f7f7f7; + border: .07em solid #ddd; + border-radius: .2em; + padding: .1em .3em; + margin: 0 .1em; +} +.mdo code { + font-size: .96em; +} +.mdo pre, +.mdo code { + font-family: monospace, monospace; + white-space: pre-wrap; + word-break: break-all; +} +.mdo pre code { + display: block; + margin: 0 -.3em; + padding: .4em .5em; + line-height: 1.1em; +} +.mdo a { + color: #fff; + background: #39b; + text-decoration: none; + padding: 0 .3em; + border: none; + border-bottom: .07em solid #079; +} +.mdo h2 { + color: #fff; + background: #555; + margin-top: 2em; + border-bottom: .22em solid #999; + border-top: none; +} +.mdo h1 { + color: #fff; + background: #444; + font-weight: normal; + border-top: .4em solid #fb0; + border-bottom: .4em solid #777; + border-radius: 0 1em 0 1em; + margin: 3em 0 1em 0; + padding: .5em 0; +} +h1, h2 { + line-height: 1.5em; +} +h1 { + font-size: 1.7em; + text-align: center; + border: 1em solid #777; + border-width: .05em 0; + margin: 3em 0; +} +h2 { + font-size: 1.5em; + font-weight: normal; + background: #f7f7f7; + border-top: .07em solid #fff; + border-bottom: .07em solid #bbb; + border-radius: .5em .5em 0 0; + padding-left: .4em; + margin-top: 3em; +} +.mdo ul, +.mdo ol { + border-left: .3em solid #ddd; +} +.mdo>ul, +.mdo>ol { + border-color: #bbb; +} +.mdo ul>li { + list-style-type: disc; +} +.mdo ul>li, +.mdo ol>li { + margin: .7em 0; +} +p>em, +li>em { + color: #c50; + padding: .1em; + border-bottom: .1em solid #bbb; +} +blockquote { + font-family: serif; + background: #f7f7f7; + border: .07em dashed #ccc; + padding: 0 2em; + margin: 1em 0; +} +small { + opacity: .8; +} +table { + border-collapse: collapse; +} +td { + padding: .2em .5em; + border: .12em solid #aaa; +} +th { + border: .12em solid #aaa; +} + + + + + +/* mde support */ +.mdo { + padding: 1em; + background: #f7f7f7; +} +html.dark .mdo { + background: #1c1c1c; +} +.CodeMirror { + background: #f7f7f7; +} + + + + + +/* darkmode */ +html.dark .mdo, +html.dark .CodeMirror { + border-color: #222; +} +html.dark, +html.dark body, +html.dark .CodeMirror { + background: #222; + color: #ccc; +} +html.dark .mdo a { + background: #057; +} +html.dark .mdo h1 a, html.dark .mdo h4 a, +html.dark .mdo h2 a, html.dark .mdo h5 a, +html.dark .mdo h3 a, html.dark .mdo h6 a { + color: inherit; + background: none; +} +html.dark pre, +html.dark code { + color: #8c0; + background: #1a1a1a; + border: .07em solid #333; +} +html.dark .mdo ul, +html.dark .mdo ol { + border-color: #444; +} +html.dark .mdo>ul, +html.dark .mdo>ol { + border-color: #555; +} +html.dark p>em, +html.dark li>em { + color: #f94; + border-color: #666; +} +html.dark h1 { + background: #383838; + border-top: .4em solid #b80; + border-bottom: .4em solid #4c4c4c; +} +html.dark h2 { + background: #444; + border-bottom: .22em solid #555; +} +html.dark td, +html.dark th { + border-color: #444; +} +html.dark blockquote { + background: #282828; + border: .07em dashed #444; +} + + + +html.dark #mn a { + color: #ccc; +} +html.dark #mn a:not(:last-child):after { + border-color: rgba(255,255,255,0.3); +} +html.dark .editor-toolbar { + border-color: #2c2c2c; + background: #1c1c1c; +} +html.dark .editor-toolbar>i.separator { + border-left: 1px solid #444; + border-right: 1px solid #111; +} +html.dark .editor-toolbar>button { + margin-left: -1px; border: 1px solid rgba(255,255,255,0.1); + color: #aaa; +} + + + +html.dark .editor-toolbar>button:hover { + color: #333; +} +html.dark .editor-toolbar>button.active { + color: #333; + border-color: #ec1; + background: #c90; +} +html.dark .editor-toolbar::after, +html.dark .editor-toolbar::before { + background: none; +} \ No newline at end of file diff --git a/copyparty/web/mde.html b/copyparty/web/mde.html index 5c966a23..99471246 100644 --- a/copyparty/web/mde.html +++ b/copyparty/web/mde.html @@ -25,6 +25,19 @@ var link_md_as_html = false; // TODO (does nothing) var last_modified = {{ lastmod }}; +var lightswitch = (function () { + var fun = function () { + var dark = !!!document.documentElement.getAttribute("class"); + document.documentElement.setAttribute("class", dark ? "dark" : ""); + if (window.localStorage) + localStorage.setItem('darkmode', dark ? 1 : 0); + }; + if (window.localStorage && localStorage.getItem('darkmode') == 1) + fun(); + + return fun; +})(); + diff --git a/copyparty/web/mde.js b/copyparty/web/mde.js index d0503f2a..99a2cfe8 100644 --- a/copyparty/web/mde.js +++ b/copyparty/web/mde.js @@ -21,6 +21,11 @@ var dom_md = document.getElementById('mt'); (function () { var tbar = [ { + name: "light", + title: "light", + className: "fa fa-lightbulb", + action: lightswitch + }, { name: "save", title: "save", className: "fa fa-save", @@ -35,16 +40,17 @@ var dom_md = document.getElementById('mt'); var mde = new EasyMDE({ autoDownloadFontAwesome: false, autofocus: true, - insertTexts: ["[](", ")"], + spellChecker: false, renderingConfig: { markedOptions: { breaks: true, gfm: true } }, - spellChecker: false, + insertTexts: ["[](", ")"], tabSize: 4, - toolbar: tbar + toolbar: tbar, + previewClass: 'mdo' }); md_changed(mde, true); mde.codemirror.on("change", function () { @@ -107,7 +113,7 @@ function save_cb() { try { r = JSON.parse(this.responseText); } - catch { + catch (ex) { alert('Failed to parse reply from server:\n\n' + this.responseText); return; } diff --git a/scripts/deps-docker/mini-fa.css b/scripts/deps-docker/mini-fa.css index cbaf6551..fa2b8b29 100644 --- a/scripts/deps-docker/mini-fa.css +++ b/scripts/deps-docker/mini-fa.css @@ -39,6 +39,7 @@ eye heading image italic +lightbulb link list-ol list-ul