From 20d9f5d0883576eed2d2c767658130357511ff12 Mon Sep 17 00:00:00 2001 From: Ash Monty Date: Sat, 23 Jul 2022 16:55:38 +0200 Subject: [PATCH] style: create components.css, reuse code --- public/assets/css/account.css | 112 ------------------------- public/assets/css/blog.css | 1 + public/assets/css/components.css | 140 +++++++++++++++++++++++++++++++ public/assets/css/login.css | 37 -------- public/assets/css/main.css | 32 +------ public/assets/css/upgrade.css | 74 +--------------- public/assets/js/account.js | 2 +- public/assets/js/upgrade.js | 14 ++-- views/account/account.handlebars | 14 ++-- views/account/upgrade.handlebars | 24 +++--- views/layouts/main.handlebars | 3 +- 11 files changed, 175 insertions(+), 278 deletions(-) create mode 100644 public/assets/css/components.css diff --git a/public/assets/css/account.css b/public/assets/css/account.css index 91f3f62..20418a2 100644 --- a/public/assets/css/account.css +++ b/public/assets/css/account.css @@ -1,7 +1,3 @@ -body.modal-open { - overflow: hidden; -} - /* Removing until it's done */ .setting-card a.edit, .sign-in-history a { @@ -223,21 +219,6 @@ fieldset { cursor: pointer; background: var(--bg-shade-3); } -.setting-card input[type="checkbox"] { - appearance: none; - -webkit-appearance: none; - background: var(--bg-shade-3); - padding: 12px; - margin: 4px; - margin-left: 0; - border-radius: 4px; - vertical-align: -65%; - width: fit-content; - cursor: pointer; -} -.setting-card input[type="checkbox"]:checked { - background: no-repeat center/contain url(../images/check.svg), var(--accent-shade-0); -} .setting-card.span-both-columns { grid-column: 1 / span 2; @@ -277,99 +258,6 @@ fieldset { background: var(--red-shade-1); } -div.online-files-modal-wrapper { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - - display: flex; - justify-content: center; - align-items: center; - background: rgba(0, 0, 0, 0.6); - - z-index: 10; -} -div.online-files-modal-wrapper.hidden { - display: none; -} -div.online-files-modal { - background: var(--bg-shade-2); - padding: 48px; - border-radius: 8px; - text-align: left; - width: min(660px, 90%); - box-sizing: border-box; -} - -div.online-files-modal h1 { - margin-top: 0; -} -p.online-files-modal-caption { - color: var(--text-shade-1); -} -p.online-files-modal-caption span { - color: var(--text-shade-3); -} - -.online-files-modal-button-wrapper { - margin-top: 24px; - display: flex; - justify-content: flex-end; -} -.online-files-modal-button-wrapper button { - margin-left: 12px; - width: fit-content; -} -.online-files-modal-button-wrapper button.cancel { - background: none; -} -.online-files-modal-button-wrapper button.confirm { - padding: 12px 24px; -} - -button { - appearance: none; - -webkit-appearance: none; - display: block; - font-family: Poppins, Arial, Helvetica, sans-serif; - font-size: 1rem; - height: fit-content; - - background: var(--accent-shade-0); - border: none; - border-radius: 4px; - padding: 12px; - color: var(--text-shade-3); - width: 100%; - - transition: filter 300ms; - pointer-events: all; - cursor: pointer; - filter: none; -} - -input { - appearance: none; - -webkit-appearance: none; - display: block; - font-family: Poppins, Arial, Helvetica, sans-serif; - font-size: 1rem; - background-color: var(--bg-shade-3); - border: none; - border-radius: 4px; - padding: 12px; - color: var(--text-shade-2); - width: calc(100% - 24px); -} - -input:focus { - background-color: var(--bg-shade-4); - outline: none; - transition: 150ms; -} - footer { margin-top: 80px; } diff --git a/public/assets/css/blog.css b/public/assets/css/blog.css index e75115c..18ca913 100644 --- a/public/assets/css/blog.css +++ b/public/assets/css/blog.css @@ -88,6 +88,7 @@ cursor: pointer; width: 35px; height: 35px; + padding: 0; } footer { diff --git a/public/assets/css/components.css b/public/assets/css/components.css new file mode 100644 index 0000000..5d2969c --- /dev/null +++ b/public/assets/css/components.css @@ -0,0 +1,140 @@ +/* BUTTONS */ + +button { + appearance: none; + -webkit-appearance: none; + border: 0; + border-radius: 6px; + font-family: Poppins, Arial, Helvetica, sans-serif; + font-size: 1rem; + color: var(--text-shade-3); + padding: 12px 48px; + background: var(--bg-shade-3); + cursor: pointer; + display: block; + text-align: center; +} +button:hover { + background: var(--bg-shade-4); +} +button.primary { + background: var(--accent-shade-0); +} +button.primary:hover { + background: var(--accent-shade-1); +} + +button.secondary.icon-btn { + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; +} +button svg { + width: 30px; + height: 30px; + display: block; +} + +/* MODALS */ + +body.modal-open { + overflow: hidden; +} + +div.modal-wrapper { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + + display: flex; + justify-content: center; + align-items: center; + background: rgba(0, 0, 0, 0.6); + + z-index: 10; +} +div.modal-wrapper.hidden { + display: none; +} +div.modal { + background: var(--bg-shade-3); + padding: 48px; + border-radius: 8px; + text-align: left; + width: min(660px, 90%); + box-sizing: border-box; +} + +div.modal h1 { + margin-top: 0; +} +p.modal-caption { + color: var(--text-shade-1); +} +p.modal-caption span, +p.switch-tier-modal-caption span { + color: var(--text-shade-3); +} + +.modal-button-wrapper { + margin-top: 24px; + display: flex; + justify-content: flex-end; +} +.modal-button-wrapper button { + margin-left: 12px; + width: fit-content; +} +.modal-button-wrapper button.cancel { + background: none; +} +.modal-button-wrapper button { + padding: 12px 24px; +} + +@media screen and (max-width: 600px) { + div.modal { + padding: 24px; + } +} + +/* MISC FORM COMPONENTS */ + +input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + background: var(--bg-shade-3); + padding: 12px; + margin: 4px; + margin-left: 0; + border-radius: 4px; + vertical-align: -65%; + width: fit-content; + cursor: pointer; +} +input[type="checkbox"]:checked { + background: no-repeat center/contain url(../images/check.svg), var(--accent-shade-0); +} + +input { + appearance: none; + -webkit-appearance: none; + display: block; + font-family: Poppins, Arial, Helvetica, sans-serif; + font-size: 1rem; + background-color: var(--bg-shade-3); + border: none; + border-radius: 4px; + padding: 12px; + color: var(--text-shade-3); + width: calc(100% - 24px); +} +input:focus { + background-color: var(--bg-shade-4); + outline: none; + transition: 150ms; +} \ No newline at end of file diff --git a/public/assets/css/login.css b/public/assets/css/login.css index d7b6033..a58eadf 100644 --- a/public/assets/css/login.css +++ b/public/assets/css/login.css @@ -36,26 +36,6 @@ form.account div { margin-top: 24px; } -form.account input { - appearance: none; - -webkit-appearance: none; - display: block; - font-family: Poppins, Arial, Helvetica, sans-serif; - font-size: 1rem; - background-color: var(--bg-shade-3); - border: none; - border-radius: 4px; - padding: 12px; - color: var(--text-shade-3); - width: calc(100% - 24px); -} - -form.account input:focus { - background-color: var(--bg-shade-4); - outline: none; - transition: 150ms; -} - form.account label { display: block; margin-bottom: 6px; @@ -64,25 +44,8 @@ form.account label { } form.account button { - appearance: none; - -webkit-appearance: none; - display: block; - border: none; - border-radius: 4px; - font-family: Poppins, Arial, Helvetica, sans-serif; - font-size: 1rem; - color: var(--text-shade-3); - padding: 12px 30px; - background: var(--bg-shade-3); - margin-top: 18px; - cursor: pointer; width: 100%; - text-decoration: none; -} - -form.account button[type="submit"] { background: var(--accent-shade-0); - margin: auto; } form.account a { diff --git a/public/assets/css/main.css b/public/assets/css/main.css index e430591..eb32be9 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -216,25 +216,9 @@ img.emoji { align-items: flex-start; } .hero .buttons a { - display: block; -} -.hero .buttons a > * { - cursor: pointer; -} -.button { - appearance: none; - -webkit-appearance: none; - border: 0; - border-radius: 6px; - font-family: Poppins, Arial, Helvetica, sans-serif; - font-size: 1rem; - color: var(--text-shade-3); - padding: 12px 48px; - background: var(--bg-shade-3); -} -.button.primary { - background: var(--accent-shade-0); + text-decoration: none; } + .hero .button.secondary { padding: 0; } @@ -245,18 +229,6 @@ img.emoji { margin-bottom: 15px; margin-right: 15px; } -.button.secondary.icon-btn { - width: 50px; - height: 50px; - display: flex; - justify-content: center; - align-items: center; -} -.button svg { - width: 30px; - height: 30px; - display: block; -} /* Non-hero sections */ .sect .title { diff --git a/public/assets/css/upgrade.css b/public/assets/css/upgrade.css index b630ee5..8aab5cc 100644 --- a/public/assets/css/upgrade.css +++ b/public/assets/css/upgrade.css @@ -13,9 +13,6 @@ width: 1600px; height: 1400px; } -body.modal-open { - overflow: hidden; -} .back-arrow { position: absolute; @@ -30,6 +27,7 @@ body.modal-open { transition: filter 150ms; text-decoration: none; color: var(--text-shade-3); + z-index: 5; } .back-arrow:hover { filter: brightness(1.5) @@ -70,7 +68,7 @@ p.caption { margin: 0 auto 72px; padding: 24px; border-radius: 6px; - background: var(--bg-shade-0); + background: var(--bg-shade-2); box-sizing: border-box; } .account-form-wrapper .progress-bar-wrapper p { @@ -262,68 +260,6 @@ form button.unsubscribe:hover { color: var(--text-shade-3); } -div.unsub-modal-wrapper, -div.switch-tier-modal-wrapper { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - - display: flex; - justify-content: center; - align-items: center; - background: rgba(0, 0, 0, 0.6); - - z-index: 10; -} -div.unsub-modal-wrapper.hidden, -div.switch-tier-modal-wrapper.hidden { - display: none; -} -div.unsub-modal, -div.switch-tier-modal { - background: var(--bg-shade-3); - padding: 48px; - border-radius: 8px; - text-align: left; - width: min(660px, 90%); - box-sizing: border-box; -} - -div.unsub-modal h1, -div.switch-tier-modal h1 { - margin-top: 0; -} -p.unsub-modal-caption, -p.switch-tier-modal-caption { - color: var(--text-shade-1); -} -p.unsub-modal-caption span, -p.switch-tier-modal-caption span { - color: var(--text-shade-3); -} - -.unsub-modal-button-wrapper, -.switch-tier-modal-button-wrapper { - margin-top: 24px; - display: flex; - justify-content: flex-end; -} -.unsub-modal-button-wrapper button, -.switch-tier-modal-button-wrapper button { - margin-left: 12px; - width: fit-content; -} -.unsub-modal-button-wrapper button.cancel, -.switch-tier-modal-button-wrapper button.cancel { - background: none; -} -.unsub-modal-button-wrapper button.confirm, -.switch-tier-modal-button-wrapper button.confirm { - padding: 12px 24px; -} - @media screen and (max-width: 900px) { .account-form-wrapper { width: min(500px, 100%); @@ -357,11 +293,7 @@ p.switch-tier-modal-caption span { } } -@media screen and (max-width: 600px) { - div.unsub-modal { - padding: 24px; - } -} + @media screen and (max-width: 380px) { label.tier .tier-perks { diff --git a/public/assets/js/account.js b/public/assets/js/account.js index a73794f..bbbf6e3 100644 --- a/public/assets/js/account.js +++ b/public/assets/js/account.js @@ -21,7 +21,7 @@ document.getElementById('remove-discord-connection')?.addEventListener('click', .catch(console.log); }); -const onlineFilesModal = document.querySelector('.online-files-modal-wrapper'); +const onlineFilesModal = document.querySelector('.modal-wrapper#onlinefiles'); const onlineFilesModalButtonConfirm = document.getElementById('onlineFilesConfirmButton'); const onlineFilesModalButtonClose = document.getElementById('onlineFilesCloseButton'); const onlineFilesModalPasswordInput = document.getElementById('password'); diff --git a/public/assets/js/upgrade.js b/public/assets/js/upgrade.js index bc6b451..a729d30 100644 --- a/public/assets/js/upgrade.js +++ b/public/assets/js/upgrade.js @@ -65,13 +65,13 @@ buttons.submit.addEventListener('click', function(e) { // If the user is already subscribed to another tier, we show the confirm modal, else if this is a new subscription we submit the form. if (currentTierElement) { - const oldTierNameSpan = document.querySelector('.switch-tier-modal-caption span.oldtier'); - const newTierNameSpan = document.querySelector('.switch-tier-modal-caption span.newtier'); + const oldTierNameSpan = document.querySelector('#switchtier .modal-caption span.oldtier'); + const newTierNameSpan = document.querySelector('#switchtier .modal-caption span.newtier'); oldTierNameSpan.innerText = currentTierElement.dataset.tierName; newTierNameSpan.innerText = document.querySelector('input[name="tier"]:checked').dataset.tierName; document.body.classList.add('modal-open'); - document.querySelector('.switch-tier-modal-wrapper').classList.remove('hidden'); + document.querySelector('.modal-wrapper#switchtier').classList.remove('hidden'); } else { submitForm(); } @@ -80,19 +80,19 @@ buttons.submit.addEventListener('click', function(e) { buttons.unsubModal.show.addEventListener('click', function(e) { e.preventDefault(); - const tierNameSpan = document.querySelector('.unsub-modal-caption span'); + const tierNameSpan = document.querySelector('#unsub .modal-caption span'); tierNameSpan.innerText = currentTierElement.dataset.tierName; // Show the unsubscribe modal document.body.classList.add('modal-open'); - document.querySelector('.unsub-modal-wrapper').classList.remove('hidden'); + document.querySelector('.modal-wrapper#unsub').classList.remove('hidden'); }); buttons.unsubModal.close.addEventListener('click', function(e) { e.preventDefault(); // Hide the unsubscribe modal document.body.classList.remove('modal-open'); - document.querySelector('.unsub-modal-wrapper').classList.add('hidden'); + document.querySelector('.modal-wrapper#unsub').classList.add('hidden'); }); buttons.unsubModal.confirm.addEventListener('click', function(e) { e.preventDefault(); @@ -105,7 +105,7 @@ buttons.switchTierModal.close.addEventListener('click', function(e) { // Hide the switch tier modal document.body.classList.remove('modal-open'); - document.querySelector('.switch-tier-modal-wrapper').classList.add('hidden'); + document.querySelector('.modal-wrapper#switchtier').classList.add('hidden'); }); buttons.switchTierModal.confirm.addEventListener('click', function(e) { e.preventDefault(); diff --git a/views/account/account.handlebars b/views/account/account.handlebars index da2a5ef..e37a9a4 100644 --- a/views/account/account.handlebars +++ b/views/account/account.handlebars @@ -176,14 +176,14 @@ {{/if}} -