From badcb48cd279f0e2a0ed7eae2661171f2411e647 Mon Sep 17 00:00:00 2001 From: B Stack Date: Thu, 7 Jan 2021 20:52:38 -0500 Subject: initial commit --- static/files.css | 4 +++ static/fuss-upload | 8 +++++ static/index.css | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++++ static/index.js | 25 +++++++++++++ static/robots.txt | 2 ++ static/upload.css | 72 +++++++++++++++++++++++++++++++++++++ 6 files changed, 215 insertions(+) create mode 100644 static/files.css create mode 100755 static/fuss-upload create mode 100644 static/index.css create mode 100644 static/index.js create mode 100644 static/robots.txt create mode 100644 static/upload.css (limited to 'static') diff --git a/static/files.css b/static/files.css new file mode 100644 index 0000000..2668fca --- /dev/null +++ b/static/files.css @@ -0,0 +1,4 @@ +img { + max-width: 32px; + max-height: 32px; +} diff --git a/static/fuss-upload b/static/fuss-upload new file mode 100755 index 0000000..6d23b25 --- /dev/null +++ b/static/fuss-upload @@ -0,0 +1,8 @@ +#!/bin/sh +# File: fuss-upload.sh +# Goal: wrap around curl to include the timestamp header to fuss +test -z "${INFILE}" && INFILE="${1}" +test -z "${FUSS_URL}" && FUSS_URL="${2}" +test ! -r "${INFILE}" && { echo "Cannot read file ${INFILE}. Aborted." 1>&2 ; exit 1; } +lastModified="$( stat -c "%Y" "${INFILE}" )" +curl -v --header "lastModified: ${lastModified}" -F "file=@${INFILE}" "${FUSS_URL}" diff --git a/static/index.css b/static/index.css new file mode 100644 index 0000000..fd8d87b --- /dev/null +++ b/static/index.css @@ -0,0 +1,104 @@ +:root { + --heading: #FFBA80; + --heading-mobile: #FF9A80; + --heading-hover: #FFD0A0; + --radius: 5px; + --radius-mobile: 2px; + --pre-background: rgba(0, 0, 0, .15); +} + +input[type='checkbox'] { + display: none; +} + +@viewport { + width: device-width ; + zoom: 1.0 ; +} + +.lbl-toggle { + display: block; + background: var(--heading); + cursor: pointer; + border-radius: var(--radius); + /* resemble h2 */ + font-weight: bold; + font-size: x-large; +} + +.lbl-toggle:hover { + background-color: var(--heading-hover); +} + +/* add the triangle */ +.lbl-toggle::before { + content: ' '; + display: inline-block; + + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid currentColor; + + vertical-align: middle; + margin-right: .7rem; + transform: translateY(-2px); + + transition: transform .2s ease-out; +} + +.content .content-inner { + background: rgba(200, 180, 128, .2); + border-bottom: 1px solid var(--heading); + + border-bottom-left-radius: var(--radius); + border-bottom-right-radius: var(--radius); + padding: .5rem 1rem; +} + +.content { + max-height: 0px; + overflow: hidden; + + transition: max-height .25s ease-in-out; +} + +.toggle:checked + .lbl-toggle + .content { + max-height: 100vh; +} +.toggle:checked + .lbl-toggle::before { + transform: rotate(90deg) translateX(-3px); +} + +.toggle:checked + .lbl-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.content pre { + background: var(--pre-background); + border: 1px solid; +} + +/* For narrow screens (probably mobile devices) + * which works because html includes meta viewport. + */ +@media screen and (max-width: 500px) { + + .lbl-toggle { + background: var(--heading-mobile); + border-radius: var(--radius-mobile); + font-weight: normal; + } + .content pre { + /* wrap long text and urls */ + white-space: pre; /* CSS 2.0 */ + white-space: pre-wrap; /* CSS 2.1 */ + white-space: pre-line; /* CSS 3.0 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + white-space: -moz-pre-wrap; /* Mozilla */ + word-wrap: break-word; /* IE 5+ */ + } + +} +/* vim: set ts=2 sw=2 sts=2 et: */ diff --git a/static/index.js b/static/index.js new file mode 100644 index 0000000..291c256 --- /dev/null +++ b/static/index.js @@ -0,0 +1,25 @@ +/* Allow toggling the checkboxes with space, enter, and left/right */ +let myLabels = document.querySelectorAll('.lbl-toggle'); +Array.from(myLabels).forEach(label => { + label.addEventListener('keydown', e => { + // 32 spacebar, 13 enter + if (e.which === 32 || e.which === 13) { + e.preventDefault(); label.click(); + }; + // 37 left, 39 right + if (e.which === 37 || e.which === 39) { + var inputs = document.getElementsByTagName('INPUT'); + for (var i=0; i < inputs.length; i++) { + if (inputs[i].id === e.target.htmlFor) { + if (!inputs[i].checked && e.which === 39) { + e.preventDefault(); label.click(); + } + if (inputs[i].checked && e.which === 37) { + e.preventDefault(); label.click(); + } + } + } + } + }); +}); + diff --git a/static/robots.txt b/static/robots.txt new file mode 100644 index 0000000..1f53798 --- /dev/null +++ b/static/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/static/upload.css b/static/upload.css new file mode 100644 index 0000000..0b37238 --- /dev/null +++ b/static/upload.css @@ -0,0 +1,72 @@ +/* (A) UPLOAD ZONE */ +/* vim:set ts=2 sw=2 sts=2 et: */ + +:root { + --blue: #cfd5ff; + --radius: 5px; + --yellow: #f9fcbd; + --green: #bdfcbe; + --red: #ffcfd5; + --boxshadow1: inset 0px 0px 0px 8px; + --boxshadow2: 0px 0px 0px 8px; +} + +#upzone { + width: 300px; + height: 200px; + background: var(--blue); + padding: 0px; + text-align: center; + display: table-cell; + vertical-align: middle; + /* border: 5px solid var(--blue); */ + ; + box-shadow: var(--boxshadow1) var(--blue), + var(--boxshadow2) var(--blue); +} + +/* when hovering over it with a file */ +#upzone.highlight { + background: var(--green); + box-shadow: var(--boxshadow1) var(--green), + var(--boxshadow2) var(--green); +} + +/* when uploading files in the queue */ +#upzone.processing { + background: var(--yellow); + box-shadow: var(--boxshadow1) var(--yellow), + var(--boxshadow2) var(--yellow); +} + +#upzone.invalid { + background: var(--red); + box-shadow: var(--boxshadow1) var(--red), + var(--boxshadow2) var(--red); +} + +#upzone.processing, #upzone.highlight, #upzone.invalid, #upzone { + /* nice transition effect when beginning to upload */ + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + -o-transition: all 0.25s linear; + transition: all 0.25s linear; + border: 3px solid rgba(0,0,0,0.1); + border-radius: var(--radius); + border-style: dashed; +} + +/* (B) UPLOAD FORM */ +#upform { + /* display anyway, even with upload zone visible */ + display: block; +} + +#upstat { + font-size: 70%; +} + +/* this div will be set to display: block by javascript */ +#hiddenfirst { + display: none; +} -- cgit