mirror of
https://github.com/gmemstr/sliproad.git
synced 2024-09-19 16:11:11 +01:00
Tweaked spacing for file list, icons.
Icons! Finally, signifying type of link without relying on colours. Also added some margin to help alleviate strain from contrasting colours. Fixed background-color of "NAS" home link maintaining white background.
This commit is contained in:
parent
2a17dbc178
commit
5e345f11af
2
Makefile
2
Makefile
|
@ -4,7 +4,7 @@ build:
|
||||||
go build
|
go build
|
||||||
|
|
||||||
pi:
|
pi:
|
||||||
env GOOS=linux GOARCH=arm GOARM=5 go build -o nas-pi
|
env GOOS=linux GOARCH=arm GOARM=5 go build -o nas-arm
|
||||||
|
|
||||||
small:
|
small:
|
||||||
go build -ldflags="-s -w"
|
go build -ldflags="-s -w"
|
||||||
|
|
|
@ -61,4 +61,8 @@ you can find a full configuration file under `assets/config_examples/providers.y
|
||||||
### custom provider
|
### custom provider
|
||||||
|
|
||||||
custom file providers can be implemented by adding a new go file to the `files` module. it should
|
custom file providers can be implemented by adding a new go file to the `files` module. it should
|
||||||
implement the `FileProviderInterface` interface.
|
implement the `FileProviderInterface` interface.
|
||||||
|
|
||||||
|
## icons
|
||||||
|
|
||||||
|
SVG Icons provided by Paweł Kuna: https://github.com/tabler/tabler-icons (see assets/web/icons/README.md)
|
|
@ -42,7 +42,7 @@ body, h1 a {
|
||||||
}
|
}
|
||||||
|
|
||||||
.list a {
|
.list a {
|
||||||
padding: 1.5vh;
|
padding: 1vh;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -50,6 +50,15 @@ body, h1 a {
|
||||||
transition: background-color 0.5s;
|
transition: background-color 0.5s;
|
||||||
-ms-word-wrap: anywhere;
|
-ms-word-wrap: anywhere;
|
||||||
word-wrap: anywhere;
|
word-wrap: anywhere;
|
||||||
|
margin: 5px 0;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list a img {
|
||||||
|
left: 1vw;
|
||||||
|
top: 1vh;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list a.file {
|
.list a.file {
|
||||||
|
@ -62,7 +71,7 @@ body, h1 a {
|
||||||
|
|
||||||
.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: white;
|
color: var(--white);
|
||||||
}
|
}
|
||||||
.grid-lg a:hover,
|
.grid-lg a:hover,
|
||||||
.list a.directory:hover {
|
.list a.directory:hover {
|
||||||
|
@ -77,7 +86,7 @@ body, h1 a {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
body { background-color: black; }
|
body, h1 a { background-color: black; }
|
||||||
.grid-lg a {
|
.grid-lg a {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
@ -124,17 +133,17 @@ input[type="file"] + label {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--desktop-width);
|
|
||||||
background-color: var(--yellow);
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 2px solid var(--orange);
|
border: 2px solid var(--orange);
|
||||||
border-radius: 5px 5px 0 0;
|
border-radius: 5px;
|
||||||
border-bottom: none;
|
transition: background-color 0.5s, color 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"]:focus + label,
|
input[type="file"]:focus + label,
|
||||||
input[type="file"] + label:hover {
|
input[type="file"] + label:hover {
|
||||||
background-color: var(--platinum);
|
background-color: var(--orange);
|
||||||
|
color: var(--white);
|
||||||
|
transition: background-color 0.5s, color 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
|
|
23
assets/web/icons/README.md
Normal file
23
assets/web/icons/README.md
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
SVG Icons provided by Paweł Kuna: https://github.com/tabler/tabler-icons under the MIT License
|
||||||
|
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2020 Paweł Kuna
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
5
assets/web/icons/file.svg
Normal file
5
assets/web/icons/file.svg
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||||
|
<polyline points="14 3 14 8 19 8" />
|
||||||
|
<path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 392 B |
4
assets/web/icons/folder.svg
Normal file
4
assets/web/icons/folder.svg
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="rgba(244, 244, 248, 1)" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||||
|
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 386 B |
|
@ -27,7 +27,7 @@ function getFileListing(provider, path = "") {
|
||||||
<div class="list">
|
<div class="list">
|
||||||
${files.map(file =>
|
${files.map(file =>
|
||||||
`<a class="${file.IsDirectory ? "directory" : "file"}" href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider}${path === "" ? "" : path}/${file.Name}`}">
|
`<a class="${file.IsDirectory ? "directory" : "file"}" href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider}${path === "" ? "" : path}/${file.Name}`}">
|
||||||
<span>${file.Name}${file.IsDirectory ? '/' : ''}</span>
|
<span>${file.IsDirectory ? '<img src="/icons/folder.svg"/>' : '<img src="/icons/file.svg"/>'}${file.Name}</span>
|
||||||
</a>
|
</a>
|
||||||
`
|
`
|
||||||
).join('')}
|
).join('')}
|
||||||
|
|
|
@ -43,6 +43,7 @@ func Init() *mux.Router {
|
||||||
// "Static" paths
|
// "Static" paths
|
||||||
r.PathPrefix("/javascript/").Handler(http.StripPrefix("/javascript/", http.FileServer(http.Dir("assets/web/javascript"))))
|
r.PathPrefix("/javascript/").Handler(http.StripPrefix("/javascript/", http.FileServer(http.Dir("assets/web/javascript"))))
|
||||||
r.PathPrefix("/css/").Handler(http.StripPrefix("/css/", http.FileServer(http.Dir("assets/web/css"))))
|
r.PathPrefix("/css/").Handler(http.StripPrefix("/css/", http.FileServer(http.Dir("assets/web/css"))))
|
||||||
|
r.PathPrefix("/icons/").Handler(http.StripPrefix("/icons/", http.FileServer(http.Dir("assets/web/icons"))))
|
||||||
|
|
||||||
// Paths that require specific handlers
|
// Paths that require specific handlers
|
||||||
r.Handle("/", Handle(
|
r.Handle("/", Handle(
|
||||||
|
|
Loading…
Reference in a new issue