Improve styles and css

rsierra · Apr 17, 2020 · d42d6f8 · d42d6f8
1 parent 1ad408a
commit d42d6f8
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 37 deletions.
diff --git a/web/assets/css/app.css b/web/assets/css/app.css
@@ -1,43 +1,33 @@
+/* GENERAL */
 body, html{
-  margin: 30px;
-}
-
-#qr-code {
-  position: fixed;
-  top: 0; bottom: 0; left: 0;  right: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: false;
-}
-
-.popup {
-  margin: 100px  auto;
-  padding: 20px;
-  background: #fff;
-  border-radius: 5px;
-  width: 300px;
-  position: relative;
+  margin: 24px;
+  font-family: 'Roboto', sans-serif;
+  color: #444;
 }
 
 h1 a {
   color: #444;
+  font-size: xx-large;
+  padding: 5px;
 }
 
+/* GRID */
+
 .wrapper {
   display: grid;
   grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) ;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-auto-rows: minmax(min-content, max-content);
   background-color: #fff;
-  color: #444;
   padding: 5px;
-  align-items: center;
 }
 
 .box {
   text-align: center;
   background-color: #444;
   color: #fff;
   border-radius: 5px;
-  padding: 5px;
+  padding: 10px;
   word-break: break-all;
 }
 
@@ -48,5 +38,23 @@ h1 a {
 .box a {
   color: #fff;
   font-size: xx-large;
-  margin: 5px;
+  padding: 5px;
+}
+
+/* QR CODE */
+
+#qr-code {
+  position: fixed;
+  top: 0; bottom: 0; left: 0; right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: none;
+}
+
+.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
@@ -1,19 +1,7 @@
-$(document).ready(function () {
-  var $view = $("<div id='qr-code'><div class='popup'><div class='content'></div></div></div>");
-  $("body").append($view);
-  $view.hide();
-});
-
-$("body").click(function (e) {
-  var target_selector = ".qr-link";
-  var QRVisibe = $(e.target).is(target_selector) || $(e.target).parents(target_selector).length > 0
-
-  // if there is click event outside IMG then close the qr-view box
-  if (!QRVisibe)
-    $('#qr-code').fadeOut();
-});
+// Show QR code
 
-$("a.qr-link").click(function (e) {
+$(document).on('click', 'a.qr-link', function (e) {
+  console.log(e);
   // prevent default click behaviour
   e.preventDefault();
 
@@ -33,3 +21,14 @@ $("a.qr-link").click(function (e) {
     }
   );
 });
+
+// Hide QR code
+
+$(document).on('click', 'body', function (e) {
+  var target_selector = ".qr-link";
+  var QRVisibe = $(e.target).is(target_selector) || $(e.target).parents(target_selector).length
+
+  // if there is click event outside IMG then close the qr-view box
+  if (!QRVisibe)
+    $('#qr-code').fadeOut();
+});
diff --git a/web/templates/index.html b/web/templates/index.html
@@ -34,5 +34,10 @@ <h1>
   {{end}}
 </div>
 {{end}}
+<div id='qr-code'>
+  <div class='popup'>
+    <div class='content'></div>
+  </div>
+</div>
 {{end}}
 {{end}}
diff --git a/web/templates/layout.html b/web/templates/layout.html
@@ -3,6 +3,7 @@
 <html>
 
 <head>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="/_/web/assets/css/app.css">
   <link