Improve UI

rsierra · Apr 18, 2020 · 1280069 · 1280069
1 parent d42d6f8
commit 1280069
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/web/assets/css/app.css b/web/assets/css/app.css
@@ -47,14 +47,16 @@ h1 a {
   position: fixed;
   top: 0; bottom: 0; left: 0; right: 0;
   background: rgba(0, 0, 0, 0.7);
-  display: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.popup {
+#qr-code .popup {
   margin: 100px  auto;
   padding: 20px;
   background: #fff;
   border-radius: 5px;
   width: 300px;
-  position: relative;
 }
diff --git a/web/assets/js/app.js b/web/assets/js/app.js
@@ -9,17 +9,17 @@ $(document).on('click', 'a.qr-link', function (e) {
   var href = $(this).prop('href');
 
   // set its location and do show
-  $("#qr-code").fadeIn();
-
-  // set qr-code content
-  $("#qr-code .content").empty().qrcode(
-    {
-      text: encodeURI(decodeURI(href)),
-      correctLevel: 1, // QRErrorCorrectLevel.L,
-      width: 300,
-      height: 300
-    }
-  );
+  $("#qr-code")
+    .fadeIn()
+    .find(".popup")
+    .empty()
+    .qrcode(
+      {
+        text: encodeURI(decodeURI(href)),
+        correctLevel: 1, // QRErrorCorrectLevel.L,
+        width: 300,
+        height: 300
+      });
 });
 
 // Hide QR code

diff --git a/web/templates/index.html b/web/templates/index.html
@@ -3,16 +3,20 @@
 {{define "body"}}
 {{with $data := .}}
 {{if eq $data.CurrentFolder "/"}}
-<h1>File list</h1>
+<h1>
+  <i class="fa fa-home"></i>
+  File list
+</h1>
 {{else}}
 <h1>
-  File list in <b>'{{$data.CurrentFolder}}'</b>
   <a href="{{$data.ParentFolder}}"><i class="fa fa-arrow-circle-left"></i></a>
+  File list in <b>'{{$data.CurrentFolder}}'</b>
 </h1>
 
 {{end}}
 
 {{if $data.Folders}}
+<h3>Folders</h3>
 <div class="wrapper">
   {{range $folder := $data.Folders}}
   <div class="box">
@@ -24,6 +28,7 @@ <h1>
 {{end}}
 
 {{if $data.Files}}
+<h3>Files</h3>
 <div class="wrapper">
   {{range $file := $data.Files}}
   <div class="box">
@@ -34,10 +39,8 @@ <h1>
   {{end}}
 </div>
 {{end}}
-<div id='qr-code'>
-  <div class='popup'>
-    <div class='content'></div>
-  </div>
+<div id='qr-code' style='display: none;'>
+  <div class='popup'></div>
 </div>
 {{end}}
 {{end}}