mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-17 09:02:15 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

ux fixes

Browse source
This commit is contained in:
ed 2020-05-02 08:01:58 +02:00
parent d9c71c11fd
commit 75e68d3427
7 changed files with 301 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
copyparty/web/md.css
View file

@ -182,6 +182,10 @@ blink {
} }
} }
@media screen { @media screen {
html, body {
margin: 0;
padding: 0;
}
a { a {
color: #fff; color: #fff;
background: #39b; background: #39b;
@ -208,16 +212,17 @@ blink {
padding: .5em 0; padding: .5em 0;
} }
#mn { #mn {
text-shadow: 1px 1px 0 #000;
xfont-variant: small-caps;
font-weight: normal; font-weight: normal;
margin: 1.3em 0 0 0; padding: 1.3em 0 .7em 1em;
font-size: 1.4em; font-size: 1.4em;
} }
#mn a { #mn a {
background: #2c2c2c; color: #444;
background: none;
margin: 0 0 0 -.2em; margin: 0 0 0 -.2em;
padding: 0 0 0 .4em; padding: 0 0 0 .4em;
text-decoration: none;
border: none;
/* ie: */ /* ie: */
border-bottom: .1em solid #777\9; border-bottom: .1em solid #777\9;
margin-right: 1em\9; margin-right: 1em\9;
@ -234,17 +239,16 @@ blink {
height: 1.05em; height: 1.05em;
margin: -.2em .3em -.2em -.4em; margin: -.2em .3em -.2em -.4em;
display: inline-block; 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; border-width: .05em .05em 0 0;
transform: rotate(45deg); 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 { #mn a:hover {
color: #fff; color: #000;
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0)); text-decoration: underline;
} }
#mh { #mh {
margin: 1.5em 0; margin: 0 0 1.5em 0;
} }
@ -312,6 +316,12 @@ blink {
background: #282828; background: #282828;
border: .07em dashed #444; 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) { @media screen and (min-width: 64em) {
#mw { #mw {
@ -366,6 +376,9 @@ blink {
border-bottom: .07em solid #4ac; border-bottom: .07em solid #4ac;
padding: 0 .3em; padding: 0 .3em;
} }
#toc {
margin: 0 !important;
}
#toc>ul { #toc>ul {
border-left: .1em solid #84c4dd; border-left: .1em solid #84c4dd;
} }

12
copyparty/web/md.html
View file

@ -6,12 +6,12 @@
<link href="/.cpr/md.css" rel="stylesheet"> <link href="/.cpr/md.css" rel="stylesheet">
</head> </head>
<body> <body>
<div id="mn"></div>
<div id="toc"></div> <div id="toc"></div>
<div id="mw"> <div id="mw">
<div id="mn"></div>
<div id="mh"> <div id="mh">
<a id="lightswitch" href="#">dark</a> <a id="lightswitch" href="#">go dark</a> //
<a id="edit" href="?edit">edit</a> <a id="edit" href="?edit">edit this</a>
</div> </div>
<div id="ml"> <div id="ml">
<div style="text-align:center;margin:5em 0"> <div style="text-align:center;margin:5em 0">
@ -32,12 +32,12 @@ var link_md_as_html = false; // TODO (does nothing)
var toggle = function () { var toggle = function () {
var dark = !document.documentElement.getAttribute("class"); var dark = !document.documentElement.getAttribute("class");
document.documentElement.setAttribute("class", dark ? "dark" : ""); document.documentElement.setAttribute("class", dark ? "dark" : "");
btn.innerHTML = dark ? "light" : "dark"; btn.innerHTML = "go " + (dark ? "light" : "dark");
if (window.localStorage) if (window.localStorage)
localStorage.setItem('md-dark', dark ? 1 : 0); localStorage.setItem('darkmode', dark ? 1 : 0);
}; };
btn.onclick = toggle; btn.onclick = toggle;
if (window.localStorage && localStorage.getItem('md-dark') == 1) if (window.localStorage && localStorage.getItem('darkmode') == 1)
toggle(); toggle();
})(); })();

11
copyparty/web/md.js
View file

@ -220,10 +220,16 @@ var toc = init_toc();
clearTimeout(final); clearTimeout(final);
timer_active = false; timer_active = false;
toc.refresh(); 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(); onscroll();
window.onscroll = function () { function ev_onscroll() {
// long timeout: scroll ended // long timeout: scroll ended
clearTimeout(final); clearTimeout(final);
final = setTimeout(onscroll, 100); final = setTimeout(onscroll, 100);
@ -235,4 +241,7 @@ var toc = init_toc();
timer_active = true; timer_active = true;
setTimeout(onscroll, 10); setTimeout(onscroll, 10);
}; };
window.onscroll = ev_onscroll;
window.onresize = ev_onscroll;
})(); })();

240
copyparty/web/mde.css
View file

@ -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>i.separator { border-left: 1px solid #ccc; }
html .editor-toolbar.disabled-for-preview>button:not(.no-disable) { opacity: .35 } html .editor-toolbar.disabled-for-preview>button:not(.no-disable) { opacity: .35 }
html {
line-height: 1.5em;
}
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
min-height: 100%; min-height: 100%;
font-family: sans-serif; font-family: sans-serif;
background: #f7f7f7;
color: #333;
} }
#mn { #mn {
font-weight: normal; font-weight: normal;
@ -23,6 +28,9 @@ html, body {
margin: 0 0 0 -.2em; margin: 0 0 0 -.2em;
padding: 0 0 0 .4em; padding: 0 0 0 .4em;
text-decoration: none; text-decoration: none;
/* ie: */
border-bottom: .1em solid #777\9;
margin-right: 1em\9;
} }
#mn a:first-child { #mn a:first-child {
padding-left: .5em; padding-left: .5em;
@ -61,4 +69,234 @@ html .editor-toolbar>button.save.force-save {
color: #f0c; color: #f0c;
} }
.cm-header { font-size: .4em !important } .cm-header { font-size: .4em !important }
*/ */
/* 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;
}

13
copyparty/web/mde.html
View file

@ -25,6 +25,19 @@
var link_md_as_html = false; // TODO (does nothing) var link_md_as_html = false; // TODO (does nothing)
var last_modified = {{ lastmod }}; 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;
})();
</script> </script>
<script src="/.cpr/deps/easymde.full.js"></script> <script src="/.cpr/deps/easymde.full.js"></script>
<script src="/.cpr/mde.js"></script> <script src="/.cpr/mde.js"></script>

14
copyparty/web/mde.js
View file

@ -21,6 +21,11 @@ var dom_md = document.getElementById('mt');
(function () { (function () {
var tbar = [ var tbar = [
{ {
name: "light",
title: "light",
className: "fa fa-lightbulb",
action: lightswitch
}, {
name: "save", name: "save",
title: "save", title: "save",
className: "fa fa-save", className: "fa fa-save",
@ -35,16 +40,17 @@ var dom_md = document.getElementById('mt');
var mde = new EasyMDE({ var mde = new EasyMDE({
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
autofocus: true, autofocus: true,
insertTexts: ["[](", ")"], spellChecker: false,
renderingConfig: { renderingConfig: {
markedOptions: { markedOptions: {
breaks: true, breaks: true,
gfm: true gfm: true
} }
}, },
spellChecker: false, insertTexts: ["[](", ")"],
tabSize: 4, tabSize: 4,
toolbar: tbar toolbar: tbar,
previewClass: 'mdo'
}); });
md_changed(mde, true); md_changed(mde, true);
mde.codemirror.on("change", function () { mde.codemirror.on("change", function () {
@ -107,7 +113,7 @@ function save_cb() {
try { try {
r = JSON.parse(this.responseText); r = JSON.parse(this.responseText);
} }
catch { catch (ex) {
alert('Failed to parse reply from server:\n\n' + this.responseText); alert('Failed to parse reply from server:\n\n' + this.responseText);
return; return;
} }

1
scripts/deps-docker/mini-fa.css
View file

@ -39,6 +39,7 @@ eye
heading heading
image image
italic italic
lightbulb
link link
list-ol list-ol
list-ul list-ul