mirror of
https://github.com/gmemstr/sliproad.git
synced 2024-09-19 16:11:11 +01:00
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.
This commit is contained in:
parent
db7bc98ba2
commit
06dd0f6dec
5
Makefile
5
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
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -19,6 +19,9 @@ function getFileListing(provider, path = "") {
|
|||
if (!files) {
|
||||
files = []
|
||||
}
|
||||
onlyfiles = files.filter(file => !file.IsDirectory)
|
||||
onlydirs = files.filter(file => file.IsDirectory)
|
||||
|
||||
html`
|
||||
<div class="forms">
|
||||
<form id="uploadfile" action="#" method="post">
|
||||
|
@ -30,10 +33,19 @@ function getFileListing(provider, path = "") {
|
|||
<input type="submit" value="Create Directory" id="newdir_submit">
|
||||
</form>
|
||||
</div>
|
||||
<div class="list">
|
||||
${files.map(file =>
|
||||
`<div class="item"><a class="${file.IsDirectory ? "directory" : "file"}" href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider}${path === "" ? "" : path}/${file.Name}`}">
|
||||
<span>${file.IsDirectory ? '<img src="/icons/folder.svg"/>' : '<img src="/icons/file.svg"/>'}${file.Name}</span>
|
||||
<div class="directories list">
|
||||
${onlydirs.map(directory =>
|
||||
`<div class="item"><a class="directory" href="#${provider}${path === "" ? "" : path}/${directory.Name}">
|
||||
<span>${directory.Name}/</span>
|
||||
</a><button onclick="deleteFile('${provider}', '${path === "" ? '' : path}', '${directory.Name}')"><img src="/icons/trash.svg"/></button></div>
|
||||
`
|
||||
).join('')}
|
||||
</div>
|
||||
|
||||
<div class="files list">
|
||||
${onlyfiles.map(file =>
|
||||
`<div class="item"><a class="file" href="/api/files/${provider}${path}/${file.Name}">
|
||||
<span><img src="/icons/file.svg"/>${file.Name}</span>
|
||||
</a><button onclick="deleteFile('${provider}', '${path === "" ? '' : path}', '${file.Name}')"><img src="/icons/trash.svg"/></button></div>
|
||||
`
|
||||
).join('')}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue