From 5adf196783e4e6a141e988bf2abd7d2a8adf88dd Mon Sep 17 00:00:00 2001 From: Ro Date: Thu, 30 Mar 2023 14:27:56 -0700 Subject: [PATCH] Responsive Part 2 - Login Updated Login CSS and cleaned up login notifications to alert when something is amiss. --- public/assets/css/dash/frame.css | 36 --------------------- public/assets/css/dash/init.css | 54 ++++++++++++++++++++++++++++++++ public/assets/css/dash/start.css | 1 + public/assets/scripts/Start.js | 4 +-- src/com/Base.js | 4 +-- 5 files changed, 57 insertions(+), 42 deletions(-) create mode 100644 public/assets/css/dash/init.css diff --git a/public/assets/css/dash/frame.css b/public/assets/css/dash/frame.css index 7caaaef..b3a723f 100644 --- a/public/assets/css/dash/frame.css +++ b/public/assets/css/dash/frame.css @@ -114,42 +114,6 @@ header color: var(--primary); } -section[role="login"] { - margin: 15% auto; - padding: 10px; - width: 500px; - border-radius: 5px; - background: var(--white); - display: grid; - grid-template-columns: 28.5% 1fr; - gap: 10px; -} - -section[role="login"] form input { - width: 95%; - height: 30px; - padding: 5px; - margin-bottom: 10px; -} - -section[role="login"] form button { - padding: 10px 5px; - width: 82%; -} - -section[role="login"] form a { - padding: 10px 5px; - border-radius: 5px; - width: 10%; - height: 20px; - display: inline-block; - background: var(--tertiary); - vertical-align: top; - text-align: center; - margin: 0 0 0 10px; - font-weight: 600; -} - /* RESPONSIVE */ @media only screen and (max-width: 900px) { diff --git a/public/assets/css/dash/init.css b/public/assets/css/dash/init.css new file mode 100644 index 0000000..c2ba87e --- /dev/null +++ b/public/assets/css/dash/init.css @@ -0,0 +1,54 @@ +/* LOGIN */ + +section[role="login"] { + margin: 15% auto; + padding: 10px; + width: 500px; + border-radius: 5px; + display: grid; + grid-template-columns: 28.5% 1fr; + gap: 10px; +} + +section[role="login"] form input { + width: 95%; + height: 30px; + padding: 5px; + margin-bottom: 10px; +} + +section[role="login"] form button { + padding: 10px 5px; + width: 82%; +} + +section[role="login"] form a { + padding: 10px 5px; + border-radius: 5px; + width: 10%; + height: 20px; + display: inline-block; + background: var(--tertiary); + vertical-align: top; + text-align: center; + margin: 0 0 0 10px; + font-weight: 600; +} + +/* LOGIN */ + +@media only screen and (max-width: 500px) { + section[role="login"] { + width: 97%; + } +} + +@media only screen and (max-width: 375px) { + section[role="login"] { + grid-template-columns: 1fr; + } + + section[role="login"] img { + width: 50px; + } +} diff --git a/public/assets/css/dash/start.css b/public/assets/css/dash/start.css index 7ce8492..e07129a 100644 --- a/public/assets/css/dash/start.css +++ b/public/assets/css/dash/start.css @@ -4,6 +4,7 @@ @import url("frame.css"); @import url("icons.css"); @import url("notifications.css"); +@import url("init.css"); @import url("index.css"); @import url("book.css"); @import url("page-editor.css"); diff --git a/public/assets/scripts/Start.js b/public/assets/scripts/Start.js index e5e4d2c..46e0a9b 100644 --- a/public/assets/scripts/Start.js +++ b/public/assets/scripts/Start.js @@ -7666,9 +7666,8 @@ class $5ec7c34d3cbf8bc6$export$2e2bcd8739ae039 { this.processing = true; api.login(authForm).then((response)=>{ self.processing = false; - if (response.type === $995f55a4eccd256d$export$f99ec790401d28da) $5ec7c34d3cbf8bc6$var$notify.alert(response.message, false); + if (response.type === $995f55a4eccd256d$export$f99ec790401d28da) e.target.innerHTML = response.message; else { - //notify.alert(response.message, true); e.target.innerHTML = response.message; setTimeout(()=>{ window.location = "/dashboard"; @@ -7676,7 +7675,6 @@ class $5ec7c34d3cbf8bc6$export$2e2bcd8739ae039 { } }).catch((err)=>{ self.processing = false; - $5ec7c34d3cbf8bc6$var$notify.alert(err, false); }); } handleSetup(e) { diff --git a/src/com/Base.js b/src/com/Base.js index df107ea..91002df 100644 --- a/src/com/Base.js +++ b/src/com/Base.js @@ -64,9 +64,8 @@ export default class Base { .then(response => { self.processing = false; if (response.type === DataEvent.REQUEST_LAME) { - notify.alert(response.message, false); + e.target.innerHTML = response.message; } else { - //notify.alert(response.message, true); e.target.innerHTML = response.message; setTimeout(() => { window.location = '/dashboard'; @@ -75,7 +74,6 @@ export default class Base { }) .catch(err => { self.processing = false; - notify.alert(err, false); }); }