From 06dd0f6dec14fb1d2681a87fb624dcdc0cb3b02c Mon Sep 17 00:00:00 2001 From: Gabriel Simmer Date: Sun, 23 May 2021 21:04:24 +0100 Subject: [PATCH] Implement new colour palette. Pink #F06DF2 Black #02060D Dark Blue #081226 Blue #04ADBF Yellow #F2E307 Also fixed minor bug where first 512 bytes of files are sometimes cut off when determining content type. --- Makefile | 5 +- assets/web/css/styles.css | 100 ++++++++++++++++++++--------------- assets/web/javascript/app.js | 20 +++++-- files/disk.go | 4 ++ 4 files changed, 80 insertions(+), 49 deletions(-) diff --git a/Makefile b/Makefile index b303d52..4e24548 100644 --- a/Makefile +++ b/Makefile @@ -27,9 +27,8 @@ test: go test ./... -cover dist: clean make_build_dir small small_pi - cp -r assets/* build/assets - tar -czf build/tars/sliproad-$(SLIPROAD_VERSION)-arm.tar.gz build/assets build/bin/sliproad-arm README.md LICENSE - tar -czf build/tars/sliproad-$(SLIPROAD_VERSION)-x86.tar.gz build/assets build/bin/sliproad README.md LICENSE + tar -czf build/tars/sliproad-$(SLIPROAD_VERSION)-arm.tar.gz build/bin/sliproad-arm README.md LICENSE + tar -czf build/tars/sliproad-$(SLIPROAD_VERSION)-x86.tar.gz build/bin/sliproad README.md LICENSE clean: rm -rf build diff --git a/assets/web/css/styles.css b/assets/web/css/styles.css index 611b274..d38a889 100644 --- a/assets/web/css/styles.css +++ b/assets/web/css/styles.css @@ -1,18 +1,32 @@ -:root { - /* https://coolors.co/fe4a49-fed766-009fb7-e6e6ea-f4f4f8 */ - --orange: rgba(254, 74, 73, 1); - --yellow: rgba(254, 215, 102, 1); - --blue: rgba(0, 159, 183, 1); - --platinum: rgba(230, 230, 234, 1); - --white: rgba(244, 244, 248, 1); +/* +Pink #F06DF2 +Black #02060D +Dark Blue #081226 +Blue #04ADBF +Yellow #F2E307 +*/ +:root { + --black: #02060D; + --blue: #04ADBF; + --dark-blue: #081226; + --yellow: #F2E307; + --pink: #F06DF2; --desktop-width: 1170px; } body, h1 a { font-family: sans-serif; - color: var(--orange); - background-color: var(--white); + color: var(--black); + background-color: var(--black); +} + +.directory > span { + color: white; +} + +h1 a { + color: var(--pink); } .grid-lg { @@ -54,7 +68,7 @@ body, h1 a { position: relative; border-radius: 5px 0 0 5px; display: inline-block; - width: 93%; + width: 100%; } .list a img { @@ -64,42 +78,34 @@ body, h1 a { } .list a.file { - background-color: var(--orange); + background-color: transparent; + border: 1px solid var(--blue); + color: white; } .list a.directory { - background-color: var(--blue); + background-color: var(--dark-blue); } .grid-lg a:visited, .grid-lg a, .list a:visited, .list a { - color: var(--white); + color: white; } .grid-lg a:hover, .list a.directory:hover { - color: var(--blue); - background-color: var(--platinum); + background-color: var(--blue); transition: background-color 0.5s, color 0.5s; } .list a.file:hover { - color: var(--orange); - background-color: var(--platinum); + background-color: var(--dark-blue); transition: background-color 0.5s, color 0.5s; } -@media (prefers-color-scheme: dark) { - body, h1 a { background-color: black; } - .grid-lg a { - color: black; - } - .grid-lg a:visited, .grid-lg a { - color: black - } - .grid-lg a:hover { - color: lightgray; - background-color: darkgray; - transition: background-color 0.5s; - } +.directories { + display: grid; + gap: 2px 2px; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: auto; } @media only screen and (max-width: 1170px) { @@ -127,12 +133,13 @@ input[type="file"] { } input[type="file"] + label, input[type="submit"], button { - color: var(--orange); + color: white; + background-color: transparent; padding: 10px; font-size: 1.25em; font-weight: 700; display: inline-block; - border: 2px solid var(--orange); + border: 2px solid var(--pink); border-radius: 5px; transition: background-color 0.5s, color 0.5s; } @@ -142,33 +149,33 @@ input[type="text"] { font-size: 1.25em; font-weight: 500; display: inline-block; - border: 2px solid var(--orange); + border: 2px solid var(--pink); border-radius: 5px; transition: background-color 0.5s, color 0.5s; width: 50%; + background-color: transparent; + color: white; } input[type="file"]:focus + label, input[type="file"] + label:hover, input[type="submit"]:hover, button:hover { - background-color: var(--orange); - color: var(--white); + color: white; transition: background-color 0.5s, color 0.5s; } progress { - background: var(--platinum); - border: 1px solid var(--orange); + border: 1px solid var(--pink); } progress::-webkit-progress-bar { - background: var(--orange); + background: var(--pink); } progress::-webkit-progress-value { - background: var(--orange); + background: var(--pink); } progress::-moz-progress-bar { - background: var(--orange); + background: var(--pink); } button { @@ -184,10 +191,19 @@ button { } .directory ~ button { - border-color: var(--blue); + border-color: var(--dark-blue); + background-color: white; } .directory ~ button:hover { - background-color: var(--blue); + background-color: grey; +} + +.file ~ button { + border-color: var(--blue); + background-color: white; +} +.file ~ button:hover { + background-color: grey; } .item, .forms { diff --git a/assets/web/javascript/app.js b/assets/web/javascript/app.js index 8f4d0ff..370d2ed 100644 --- a/assets/web/javascript/app.js +++ b/assets/web/javascript/app.js @@ -19,6 +19,9 @@ function getFileListing(provider, path = "") { if (!files) { files = [] } + onlyfiles = files.filter(file => !file.IsDirectory) + onlydirs = files.filter(file => file.IsDirectory) + html`
@@ -30,10 +33,19 @@ function getFileListing(provider, path = "") {
-
- ${files.map(file => - `
- ${file.IsDirectory ? '' : ''}${file.Name} +
+ ${onlydirs.map(directory => + `
+ ${directory.Name}/ +
+ ` + ).join('')} +
+ +
+ ${onlyfiles.map(file => + `
+ ${file.Name}
` ).join('')} diff --git a/files/disk.go b/files/disk.go index 1c04c67..2549fca 100644 --- a/files/disk.go +++ b/files/disk.go @@ -58,6 +58,10 @@ func (dp *DiskProvider) SendFile(path string, writer io.Writer) (stream io.Reade var buf [512]byte n, _ := io.ReadFull(f, buf[:]) contenttype = http.DetectContentType(buf[:n]) + _, err := f.Seek(0, io.SeekStart) + if err != nil { + return stream, contenttype, err + } } return f, contenttype, nil