From d42d6f861a62654e388e0e8de4170048da609aad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Sierra?= Date: Sat, 18 Apr 2020 00:31:51 +0200 Subject: [PATCH] Improve styles and css --- web/assets/css/app.css | 52 ++++++++++++++++++++++----------------- web/assets/js/app.js | 29 +++++++++++----------- web/templates/index.html | 5 ++++ web/templates/layout.html | 1 + 4 files changed, 50 insertions(+), 37 deletions(-) diff --git a/web/assets/css/app.css b/web/assets/css/app.css index 072ec7f..b3e91b4 100644 --- a/web/assets/css/app.css +++ b/web/assets/css/app.css @@ -1,35 +1,25 @@ +/* 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 { @@ -37,7 +27,7 @@ h1 a { 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 index 378ccda..e0b97b6 100644 --- a/web/assets/js/app.js +++ b/web/assets/js/app.js @@ -1,19 +1,7 @@ -$(document).ready(function () { - var $view = $("
"); - $("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 index e1aef3a..86386f7 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -34,5 +34,10 @@

{{end}} {{end}} +
+
+
+
+
{{end}} {{end}} diff --git a/web/templates/layout.html b/web/templates/layout.html index 5c98981..cec74cc 100644 --- a/web/templates/layout.html +++ b/web/templates/layout.html @@ -3,6 +3,7 @@ +