diff --git a/.gitignore b/.gitignore index 881b4c29..91d9725c 100755 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules/ db/*.rdb usage_log.txt .DS_Store +dist-lite/ diff --git a/build-lite.sh b/build-lite.sh new file mode 100644 index 00000000..62110fac --- /dev/null +++ b/build-lite.sh @@ -0,0 +1,67 @@ +#!/bin/bash +# Build script for a "lite" (purely client-side) version of Aspine + +# Note: This script has only been tested with Bash in a GNU environment +# (on Linux); your mileage may vary on BSD, macOS, Cygwin/MSYS (Windows), etc. + +rm -rf dist-lite/ +mkdir -p dist-lite/ + +cp -r public/* dist-lite/ + +mappings="$( +grep -A100 'new Map' serve.js \ +| grep -A3 '^ \[' \ +| grep -Ev '\[|\]' \ +| sed 's/ '\''//' \ +| sed 's/'\'',*//' +)" +# Find the line in serve.js containing 'new Map' and get the next 100 lines +# Limit the search to lines that contain ' [' and the next three lines +# Remove lines with brackets +# Remove leading whitespace and single quote character +# Remove trailing single quote character and comma (if any) + +echo $mappings | \ +while read -d ' ' endpoint +do + read -d ' ' path + + mkdir -p "$(dirname dist-lite$endpoint)" + # Create the parent directory + cp ".$path" "dist-lite$endpoint" + # Copy the node module to dist-lite +done +# https://stackoverflow.com/a/21256704 + +cp -r ./node_modules/@fortawesome/fontawesome-free/webfonts/ \ +dist-lite/fonts/fontawesome/webfonts +# Copy Font Awesome files + +rm dist-lite/login.html +# Remove login page + +perl -0777 -pi -e 's[][\1]g' \ +dist-lite/home.html + +perl -0777 -pi -e 's[\n((.|\n)*?)\n][]g' \ +dist-lite/home.html + +perl -0777 -pi -e 's[//#ifdef lite\n/\*\n((.|\n)*?)\n\*/\n//#endif][\1]g' \ +dist-lite/js/*.js + +perl -0777 -pi -e 's[//#ifndef lite\n((.|\n)*?)\n//#endif][]g' \ +dist-lite/js/*.js + +# Preprocess HTML and JS files to make lite-specific changes as needed +# https://stackoverflow.com/a/1103177 +# https://stackoverflow.com/a/5869735 + +sed -i -e '/#include dist-lite\/schedule.json/r dist-lite/schedule.json' \ +dist-lite/js/clock.js +# Include contents of schedule.json +# https://unix.stackexchange.com/a/32912 + +version="$(git describe | sed 's/^v\?\(.*\)/\1/')" +sed -i 's/\/\/#include $version/"'$version'"/g' dist-lite/js/* +# Hard-code version number (use sed to trim 'v') diff --git a/package-lock.json b/package-lock.json index 510e84a3..551241f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -334,6 +334,11 @@ "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" }, + "file-saver": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz", + "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==" + }, "finalhandler": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", diff --git a/package.json b/package.json index d6c718f5..130e68e3 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "main": "serve.js", "repository": "github:Aspine/aspine", "scripts": { - "start": "node serve.js" + "start": "node serve.js", + "build-lite": "bash build-lite.sh" }, "dependencies": { "@fortawesome/fontawesome-free": "^5.13.0", @@ -28,6 +29,7 @@ "compression": "^1.7.4", "express": "^4.16.4", "express-session": "^1.17.1", + "file-saver": "^2.0.2", "hamburgers": "^1.1.3", "jquery": "^3.5.0", "minimist": "^1.2.5", diff --git a/public/css/home.css b/public/css/home.css index 69895aff..07417fd3 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -258,6 +258,14 @@ button { font-family: Arial, Helvetica, sans-serif !important; } +.inaccessible { + color: #666 !important; + background-color: #ccc; +} + +.inaccessible:hover { + background-color: #ccc !important; +} .tab .tablinks-right { float: right; @@ -353,16 +361,7 @@ i.fa.fa-info-circle { cursor: default; } -i.fa.fa-eye-slash { - color: #00551C; - padding-left: 38%; - padding-top: 11%; - font-size: large; - cursor: pointer; - -} - -i.fa.fa-sync-alt { +.header-icon { color: #00551C; padding-left: 38%; padding-top: 11%; @@ -422,7 +421,7 @@ canvas#large_clock { position: relative; background-color: #fefefe; margin: auto; - padding: 0; + padding: 20px; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); @@ -446,7 +445,7 @@ canvas#large_clock { /* The Close Button */ .close { - color: white; + color: black; float: right; font-size: 28px; font-weight: bold; @@ -469,13 +468,7 @@ canvas#large_clock { padding: 2px 16px; } -#stats_modal_close { - display: inline-block; - color: black; -} - #stats_modal_content { - padding: 20px; margin: auto !important; top: 40px; -webkit-animation-name: statsanimatetop !important; @@ -570,6 +563,54 @@ canvas#large_clock { to {top:140px; opacity:1} } +#export_modal_content, #import_modal_content { + width: 25em; + text-align: left; +} + +#export_modal_content ul { + margin-left: 1em; +} + +#export_modal_content label { + display: inline-block; +} + +#export_button, #import_button { + padding: 14px 16px; + cursor: pointer; +} + +.hastooltip { + border-bottom: 1px dotted black; +} + +.hastooltip::before { + display: block; + content: attr(aria-label); + width: 15rem; + background-color: #000; + color: #fff; + font-size: 0.8rem; + border-radius: 5px; + padding: 1em; + position: absolute; + visibility: hidden; +} + +.select-items .hastooltip::before { + margin-top: 2em; + right: 0; +} + +.hastooltip:focus::before, .hastooltip:hover::before { + visibility: visible; +} + +#import_modal_title { + margin-bottom: 1em; +} + p#small_clock_period { @@ -943,7 +984,7 @@ p#add-calendar-error { } .select-items div:hover, .same-as-selected { - background-color: #ddd; + background-color: #f9f9f9; } diff --git a/public/home.html b/public/home.html index dad71777..a32ea047 100644 --- a/public/home.html +++ b/public/home.html @@ -32,6 +32,7 @@ +