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.

Makefile

@@ -4,7 +4,7 @@ build:
 	go build
 
 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:
 	go build -ldflags="-s -w"

README.md

@@ -61,4 +61,8 @@ you can find a full configuration file under `assets/config_examples/providers.y
 ### custom provider
 
 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)

assets/web/css/styles.css

@@ -42,7 +42,7 @@ body, h1 a {
 }
 
 .list a {
-    padding: 1.5vh;
+    padding: 1vh;
     font-size: 24px;
     font-weight: bold;
     text-decoration: none;
@@ -50,6 +50,15 @@ body, h1 a {
     transition: background-color 0.5s;
     -ms-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 {
@@ -62,7 +71,7 @@ body, h1 a {
 
 .grid-lg a:visited, .grid-lg a,
 .list a:visited, .list a {
-    color: white;
+    color: var(--white);
 }
 .grid-lg a:hover,
 .list a.directory:hover {
@@ -77,7 +86,7 @@ body, h1 a {
 }
 
 @media (prefers-color-scheme: dark) {
-    body { background-color: black; }
+    body, h1 a { background-color: black; }
     .grid-lg a {
         color: black;
     }
@@ -124,17 +133,17 @@ input[type="file"]  + label {
     padding: 10px;
     font-size: 1.25em;
     font-weight: 700;
-    color: var(--desktop-width);
-    background-color: var(--yellow);
     display: inline-block;
     border: 2px solid var(--orange);
-    border-radius: 5px 5px 0 0;
-    border-bottom: none;
+    border-radius: 5px;
+    transition: background-color 0.5s, color 0.5s;
 }
 
 input[type="file"]:focus + label,
 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 {

assets/web/icons/README.md

@@ -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.

assets/web/icons/file.svg

@@ -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>

assets/web/icons/folder.svg

@@ -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>

assets/web/javascript/app.js

@@ -27,7 +27,7 @@ function getFileListing(provider, path = "") {
       <div class="list">
         ${files.map(file =>
           `<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>
           `
         ).join('')}

router/router.go

@@ -43,6 +43,7 @@ func Init() *mux.Router {
 	// "Static" paths
 	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("/icons/").Handler(http.StripPrefix("/icons/", http.FileServer(http.Dir("assets/web/icons"))))
 
 	// Paths that require specific handlers
 	r.Handle("/", Handle(