mirror of
https://github.com/gmemstr/sliproad.git
synced 2024-09-20 00:21:15 +01:00
Merge pull request #16 from gmemstr/frontend-design
This commit is contained in:
commit
c680c57665
5
Makefile
5
Makefile
|
@ -27,9 +27,8 @@ test:
|
||||||
go test ./... -cover
|
go test ./... -cover
|
||||||
|
|
||||||
dist: clean make_build_dir small small_pi
|
dist: clean make_build_dir small small_pi
|
||||||
cp -r assets/* build/assets
|
tar -czf build/tars/sliproad-$(SLIPROAD_VERSION)-arm.tar.gz build/bin/sliproad-arm README.md LICENSE
|
||||||
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/bin/sliproad README.md LICENSE
|
||||||
tar -czf build/tars/sliproad-$(SLIPROAD_VERSION)-x86.tar.gz build/assets build/bin/sliproad README.md LICENSE
|
|
||||||
|
|
||||||
clean:
|
clean:
|
||||||
rm -rf build
|
rm -rf build
|
||||||
|
|
|
@ -1,18 +1,31 @@
|
||||||
:root {
|
/*
|
||||||
/* https://coolors.co/fe4a49-fed766-009fb7-e6e6ea-f4f4f8 */
|
Pink #F06DF2
|
||||||
--orange: rgba(254, 74, 73, 1);
|
Black #02060D
|
||||||
--yellow: rgba(254, 215, 102, 1);
|
Dark Blue #081226
|
||||||
--blue: rgba(0, 159, 183, 1);
|
Blue #04ADBF
|
||||||
--platinum: rgba(230, 230, 234, 1);
|
Yellow #F2E307
|
||||||
--white: rgba(244, 244, 248, 1);
|
*/
|
||||||
|
|
||||||
--desktop-width: 1170px;
|
:root {
|
||||||
|
--black: #02060D;
|
||||||
|
--blue: #04ADBF;
|
||||||
|
--dark-blue: #081226;
|
||||||
|
--yellow: #F2E307;
|
||||||
|
--pink: #F06DF2;
|
||||||
}
|
}
|
||||||
|
|
||||||
body, h1 a {
|
body, h1 a {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
color: var(--orange);
|
color: var(--black);
|
||||||
background-color: var(--white);
|
background-color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.directory > span {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a {
|
||||||
|
color: var(--pink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-lg {
|
.grid-lg {
|
||||||
|
@ -31,7 +44,7 @@ body, h1 a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: background-color 0.5s;
|
transition: background-color 0.5s;
|
||||||
background-color: var(--blue);
|
background-color: var(--dark-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
|
@ -54,7 +67,7 @@ body, h1 a {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 5px 0 0 5px;
|
border-radius: 5px 0 0 5px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 93%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list a img {
|
.list a img {
|
||||||
|
@ -64,42 +77,34 @@ body, h1 a {
|
||||||
}
|
}
|
||||||
|
|
||||||
.list a.file {
|
.list a.file {
|
||||||
background-color: var(--orange);
|
background-color: transparent;
|
||||||
|
border: 1px solid var(--blue);
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list a.directory {
|
.list a.directory {
|
||||||
background-color: var(--blue);
|
background-color: var(--dark-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-lg a:visited, .grid-lg a,
|
.grid-lg a:visited, .grid-lg a,
|
||||||
.list a:visited, .list a {
|
.list a:visited, .list a {
|
||||||
color: var(--white);
|
color: white;
|
||||||
}
|
}
|
||||||
.grid-lg a:hover,
|
.grid-lg a:hover,
|
||||||
.list a.directory:hover {
|
.list a.directory:hover {
|
||||||
color: var(--blue);
|
background-color: var(--blue);
|
||||||
background-color: var(--platinum);
|
|
||||||
transition: background-color 0.5s, color 0.5s;
|
transition: background-color 0.5s, color 0.5s;
|
||||||
}
|
}
|
||||||
.list a.file:hover {
|
.list a.file:hover {
|
||||||
color: var(--orange);
|
background-color: var(--dark-blue);
|
||||||
background-color: var(--platinum);
|
|
||||||
transition: background-color 0.5s, color 0.5s;
|
transition: background-color 0.5s, color 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
.directories {
|
||||||
body, h1 a { background-color: black; }
|
display: grid;
|
||||||
.grid-lg a {
|
gap: 2px 2px;
|
||||||
color: black;
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
}
|
grid-template-rows: auto;
|
||||||
.grid-lg a:visited, .grid-lg a {
|
|
||||||
color: black
|
|
||||||
}
|
|
||||||
.grid-lg a:hover {
|
|
||||||
color: lightgray;
|
|
||||||
background-color: darkgray;
|
|
||||||
transition: background-color 0.5s;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1170px) {
|
@media only screen and (max-width: 1170px) {
|
||||||
|
@ -127,12 +132,13 @@ input[type="file"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"] + label, input[type="submit"], button {
|
input[type="file"] + label, input[type="submit"], button {
|
||||||
color: var(--orange);
|
color: white;
|
||||||
|
background-color: transparent;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 2px solid var(--orange);
|
border: 2px solid var(--pink);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
transition: background-color 0.5s, color 0.5s;
|
transition: background-color 0.5s, color 0.5s;
|
||||||
}
|
}
|
||||||
|
@ -142,33 +148,33 @@ input[type="text"] {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 2px solid var(--orange);
|
border: 2px solid var(--pink);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
transition: background-color 0.5s, color 0.5s;
|
transition: background-color 0.5s, color 0.5s;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
background-color: transparent;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"]:focus + label,
|
input[type="file"]:focus + label,
|
||||||
input[type="file"] + label:hover,
|
input[type="file"] + label:hover,
|
||||||
input[type="submit"]:hover,
|
input[type="submit"]:hover,
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: var(--orange);
|
color: white;
|
||||||
color: var(--white);
|
|
||||||
transition: background-color 0.5s, color 0.5s;
|
transition: background-color 0.5s, color 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
background: var(--platinum);
|
border: 1px solid var(--pink);
|
||||||
border: 1px solid var(--orange);
|
|
||||||
}
|
}
|
||||||
progress::-webkit-progress-bar {
|
progress::-webkit-progress-bar {
|
||||||
background: var(--orange);
|
background: var(--pink);
|
||||||
}
|
}
|
||||||
progress::-webkit-progress-value {
|
progress::-webkit-progress-value {
|
||||||
background: var(--orange);
|
background: var(--pink);
|
||||||
}
|
}
|
||||||
progress::-moz-progress-bar {
|
progress::-moz-progress-bar {
|
||||||
background: var(--orange);
|
background: var(--pink);
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
@ -184,10 +190,19 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.directory ~ button {
|
.directory ~ button {
|
||||||
border-color: var(--blue);
|
border-color: var(--dark-blue);
|
||||||
|
background-color: white;
|
||||||
}
|
}
|
||||||
.directory ~ button:hover {
|
.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 {
|
.item, .forms {
|
||||||
|
|
|
@ -19,6 +19,9 @@ function getFileListing(provider, path = "") {
|
||||||
if (!files) {
|
if (!files) {
|
||||||
files = []
|
files = []
|
||||||
}
|
}
|
||||||
|
onlyfiles = files.filter(file => !file.IsDirectory)
|
||||||
|
onlydirs = files.filter(file => file.IsDirectory)
|
||||||
|
|
||||||
html`
|
html`
|
||||||
<div class="forms">
|
<div class="forms">
|
||||||
<form id="uploadfile" action="#" method="post">
|
<form id="uploadfile" action="#" method="post">
|
||||||
|
@ -30,10 +33,19 @@ function getFileListing(provider, path = "") {
|
||||||
<input type="submit" value="Create Directory" id="newdir_submit">
|
<input type="submit" value="Create Directory" id="newdir_submit">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="list">
|
<div class="directories list">
|
||||||
${files.map(file =>
|
${onlydirs.map(directory =>
|
||||||
`<div class="item"><a class="${file.IsDirectory ? "directory" : "file"}" href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider}${path === "" ? "" : path}/${file.Name}`}">
|
`<div class="item"><a class="directory" href="#${provider}${path === "" ? "" : path}/${directory.Name}">
|
||||||
<span>${file.IsDirectory ? '<img src="/icons/folder.svg"/>' : '<img src="/icons/file.svg"/>'}${file.Name}</span>
|
<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}" target="__blank">
|
||||||
|
<span>${file.Name}</span>
|
||||||
</a><button onclick="deleteFile('${provider}', '${path === "" ? '' : path}', '${file.Name}')"><img src="/icons/trash.svg"/></button></div>
|
</a><button onclick="deleteFile('${provider}', '${path === "" ? '' : path}', '${file.Name}')"><img src="/icons/trash.svg"/></button></div>
|
||||||
`
|
`
|
||||||
).join('')}
|
).join('')}
|
||||||
|
|
|
@ -58,6 +58,10 @@ func (dp *DiskProvider) SendFile(path string, writer io.Writer) (stream io.Reade
|
||||||
var buf [512]byte
|
var buf [512]byte
|
||||||
n, _ := io.ReadFull(f, buf[:])
|
n, _ := io.ReadFull(f, buf[:])
|
||||||
contenttype = http.DetectContentType(buf[:n])
|
contenttype = http.DetectContentType(buf[:n])
|
||||||
|
_, err := f.Seek(0, io.SeekStart)
|
||||||
|
if err != nil {
|
||||||
|
return stream, contenttype, err
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return f, contenttype, nil
|
return f, contenttype, nil
|
||||||
|
|
Loading…
Reference in a new issue