Add some styles

web/assets/css/app.css

@@ -1,6 +1,8 @@
 body, html{
   height: 100%;
+  margin: 40px;
 }
+
 #qr-code{
   position: absolute;
   background: white;
@@ -10,3 +12,36 @@ body, html{
 #qr-code canvas{
   display: block;
 }
+
+h1 a {
+  color: #444;
+}
+
+.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) ;
+  background-color: #fff;
+  color: #444;
+  padding: 5px;
+  align-items: center;
+}
+
+.box {
+  text-align: center;
+  background-color: #444;
+  color: #fff;
+  border-radius: 5px;
+  padding: 5px;
+  word-break: break-all;
+}
+
+.box p {
+  margin: 5px;
+}
+
+.box a {
+  color: #fff;
+  font-size: xx-large;
+  margin: 5px;
+}

web/templates/index.html

@@ -1,28 +1,38 @@
-{{define "title"}}Files list{{end}}
+{{define "title"}}File list{{end}}
 
 {{define "body"}}
 {{with $data := .}}
 {{if eq $data.CurrentFolder "/"}}
-<h1>Files list</h1>
+<h1>File list</h1>
 {{else}}
-<h1>Files list in <b>'{{$data.CurrentFolder}}'</b></h1>
-<a href="{{$data.ParentFolder}}">Back <i class="fa fa-arrow-circle-left"></i></a>
+<h1>
+  File list in <b>'{{$data.CurrentFolder}}'</b>
+  <a href="{{$data.ParentFolder}}"><i class="fa fa-arrow-circle-left"></i></a>
+</h1>
+
 {{end}}
 
-<ul>
+{{if $data.Folders}}
+<div class="wrapper">
   {{range $folder := $data.Folders}}
-  <li>
+  <div class="box">
     <a href="{{$data.CurrentFolder}}{{$folder}}"><i class="fa fa-folder"></i></a>
-    {{.}}
-  </li>
+    <p>{{.}}</p>
+  </div>
   {{end}}
+</div>
+{{end}}
+
+{{if $data.Files}}
+<div class="wrapper">
   {{range $file := $data.Files}}
-  <li>
+  <div class="box">
     <a href="/web/files{{$data.CurrentFolder}}{{$file}}" class="qr-link"><i class="fa fa-qrcode"></i></a>
     <a href="/web/files{{$data.CurrentFolder}}{{$file}}" download><i class="fa fa-download"></i></a>
-    {{.}}
-  </li>
+    <p>{{.}}</p>
+  </div>
   {{end}}
-</ul>
+</div>
+{{end}}
 {{end}}
 {{end}}