From ab158c99b0ce731650da4986646f23f584303e98 Mon Sep 17 00:00:00 2001 From: ro Date: Tue, 21 May 2024 19:15:47 -0600 Subject: [PATCH] settings page tab conversion part 1 the settings page needed to be updated to make space for incoming features and settins, so a tab system has been plugged in to reorganize the options availble of course, everything needs to be restyled to match the new comps https://www.figma.com/design/JQSy6XtVtSkiIxzXEM46IU/Fipamo-Dash?node-id=1204%3A285&t=kDgzU2ONXr3k5yUe-1 but the base structure is in, so now it's just about getting the css right --- public/assets/css/dash/forms.css | 2 +- public/assets/css/dash/settings.css | 51 ++++++++++++++----- .../dash/app/controllers/SettingsIndex.js | 29 ++++++++--- resources/views/back/settings.blade.php | 47 +++++++++++------ 4 files changed, 90 insertions(+), 39 deletions(-) diff --git a/public/assets/css/dash/forms.css b/public/assets/css/dash/forms.css index e228535..be365e7 100644 --- a/public/assets/css/dash/forms.css +++ b/public/assets/css/dash/forms.css @@ -34,7 +34,7 @@ input[type="submit"] { background: var(--secondary-highlight); color: var(--primary); font: 20px var(--base-type); - border-radius: 5px; + border-radius: 3px; position: relative; cursor: pointer; border: 0; diff --git a/public/assets/css/dash/settings.css b/public/assets/css/dash/settings.css index 4973496..ed3f910 100644 --- a/public/assets/css/dash/settings.css +++ b/public/assets/css/dash/settings.css @@ -16,7 +16,30 @@ article[class="settings"] label { font-weight: 400; } -section[class="member-settings"] { +article.settings div.tab-toolbar button { + width: 180px; + height: 40px; + color: var(--secondary); +} + +article.settings section.settings-tabs section.section-tab { + width: 100%; + min-height: 400px; + background: var(--secondary-highlight); + color: var(--secondary); +} + +.show { + display: block; + visibility: visible; +} + +.hide { + display: none; + visibility: hidden; +} + +section#member-profile { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-columns: auto; @@ -26,61 +49,61 @@ section[class="member-settings"] { margin: 10px auto; } -section[class="member-settings"] > div:nth-child(1) { +section#member-profile > div:nth-child(1) { grid-column: 1/2; grid-row: 1/3; } -section[class="member-settings"] > div:nth-child(2) { +section#member-profile > div:nth-child(2) { grid-column: 2/4; grid-row: 1/3; } -section[class="member-settings"] > div:nth-child(3) { +section#member-profile > div:nth-child(3) { grid-row: 1/3; } -section[class="member-settings"] > div:nth-child(4) { +section#member-profile > div:nth-child(4) { color: var(--white); } -section[class="member-settings"] > div:nth-child(4) a { +section#member-profile > div:nth-child(4) a { font-weight: bold; text-decoration: underline; color: var(--primary-highlight); } -section[class="member-settings"] > div:nth-child(5) { +section#member-profile > div:nth-child(5) { grid-column: 2/4; } -section[class="member-settings"] > div:nth-child(6) { +section#member-profile > div:nth-child(6) { grid-column: 1/3; } -section[class="member-settings"] > div:nth-child(7) { +section#member-profile > div:nth-child(7) { grid-column: 3/5; min-height: 325px; } -section[class="member-settings"] > div:nth-child(8) { +section#member-profile > div:nth-child(8) { grid-column: 1/4; color: var(--white); word-wrap: break-word; } -section[class="member-settings"] > div[class="member-avatar"] div, -section[class="member-settings"] > div[class="site-background"] div { +section#member-profile > div[class="member-avatar"] div, +section#member-profile > div[class="site-background"] div { height: 100%; border-radius: 3px; } -section[class="member-settings"] div input[type="file"] { +section#member-profile div input[type="file"] { display: none; visibility: hidden; } -section[class="member-settings"] div input[type="text"] { +section#member-profile div input[type="text"] { width: 98.4%; height: 40px; margin-bottom: 10px; diff --git a/public/assets/scripts/dash/app/controllers/SettingsIndex.js b/public/assets/scripts/dash/app/controllers/SettingsIndex.js index db2e9f3..f27b9e7 100644 --- a/public/assets/scripts/dash/app/controllers/SettingsIndex.js +++ b/public/assets/scripts/dash/app/controllers/SettingsIndex.js @@ -45,6 +45,7 @@ export default class SettingsIndex { document.querySelector('.background').addEventListener('click', () => { document.getElementById('background-upload').click(); }); + document.getElementById('avatar-upload').addEventListener( 'change', e => { @@ -89,6 +90,25 @@ export default class SettingsIndex { } }); + //handle tabs + let tabBtn = document.querySelectorAll('.tab-button'); + let tabs = document.querySelectorAll('.section-tab'); + for (i = 0, length = tabBtn.length; i < length; i++) { + tabBtn[i].addEventListener('click', e => { + let tab = 'member-' + e.target.id; + for (i = 0, length = tabs.length; i < length; i++) { + let tabID = tabs[i].id; + if (tab == tabID) { + tabs[i].classList.add('show'); + tabs[i].classList.remove('hide'); + } else { + tabs[i].classList.add('hide'); + tabs[i].classList.remove('show'); + } + } + }); + } + document .getElementById('send-mail') .addEventListener('click', e => this.handleMailer(e)); @@ -109,17 +129,10 @@ export default class SettingsIndex { for (i = 0, length = mailBtn.length; i < length; i++) { mailBtn[i].addEventListener('click', e => this.handleMailOptions(e)); } - //handle backup from settings [disabled] - + //handle backup from settings document .getElementById('create-backup') .addEventListener('click', e => this.handleBackup(e)); - - /* - document - .getElementById("reindex-pages") - .addEventListener("click", (e) => this.handleReindex(e)); - */ } //-------------------------- // event handlers diff --git a/resources/views/back/settings.blade.php b/resources/views/back/settings.blade.php index 71dc827..785e02c 100644 --- a/resources/views/back/settings.blade.php +++ b/resources/views/back/settings.blade.php @@ -4,23 +4,38 @@ @section('main-content')
+ +
+
+
+
+ +
+
+
+ +
+
+ + + + + + +
+
+
+ MEMBER FEATURES +
+
+ MEMBER THEMES +
+
-
-
- -
-
-
- -
-
- - - - - - -