From 9bc0ae8bed5737f0766230ee7208b9ebc779f5e2 Mon Sep 17 00:00:00 2001 From: ro Date: Fri, 24 May 2024 16:22:11 -0600 Subject: [PATCH] site features tab restyled the section housing site features has been restyled and brough into alignment with the new design still needs responsive work --- public/assets/css/dash/settings.css | 175 ++++++++++++------ .../dash/app/controllers/SettingsIndex.js | 2 +- resources/views/back/settings.blade.php | 160 +++++++++------- 3 files changed, 215 insertions(+), 122 deletions(-) diff --git a/public/assets/css/dash/settings.css b/public/assets/css/dash/settings.css index 92b4945..5c2bddc 100644 --- a/public/assets/css/dash/settings.css +++ b/public/assets/css/dash/settings.css @@ -25,7 +25,6 @@ article.settings div.tab-toolbar button { article.settings section.settings-tabs section.section-tab { width: 100%; min-height: 400px; - background: var(--secondary); color: var(--secondary); } @@ -40,58 +39,63 @@ article.settings section.settings-tabs section.section-tab { visibility: hidden; } -section#member-profile { +/* + MEMBER PROFILE TAB +*/ + +section#site-profile { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: auto; gap: 15px; width: 100%; max-width: 900px; - margin: 0 auto; + margin: 10px auto; border-radius: 3px; + background: var(--secondary); } -section#member-profile > div:nth-child(1) { +section#site-profile > div:nth-child(1) { grid-column: 1/2; grid-row: 1/2; height: 250px; } -section#member-profile > div:nth-child(2) { +section#site-profile > div:nth-child(2) { grid-column: 2/4; grid-row: 1/2; } -section#member-profile > div:nth-child(3) { +section#site-profile > div:nth-child(3) { grid-column: 1/2; grid-row: 2/3; padding-left: 10px; } -section#member-profile > div:nth-child(4) { +section#site-profile > div:nth-child(4) { grid-column: 2/3; grid-row: 2/3; } -section#member-profile > div:nth-child(4) a { +section#site-profile > div:nth-child(4) a { font-weight: bold; text-decoration: underline; color: var(--primary-highlight); } -section#member-profile > div:nth-child(5) { +section#site-profile > div:nth-child(5) { grid-column: 3/4; grid-row: 2/3; padding-right: 10px; } -section#member-profile > div:nth-child(6) { +section#site-profile > div:nth-child(6) { grid-column: 1/4; grid-row: 3/4; padding: 0 10px; } -section#member-profile > div:nth-child(6) div { +section#site-profile > div:nth-child(6) div { display: inline-block; color: var(--secondary); word-wrap: break-word; @@ -99,7 +103,7 @@ section#member-profile > div:nth-child(6) div { width: 49.6%; } -section#member-profile > div:nth-child(6) div > span { +section#site-profile > div:nth-child(6) div > span { display: block; background: var(--primary); color: var(--secondary); @@ -108,49 +112,143 @@ section#member-profile > div:nth-child(6) div > span { margin-bottom: 10px; } -section#member-profile > div textarea { +section#site-profile > div textarea { width: 98.4%; height: 85%; } -section#member-profile > div[class="member-avatar"] div, -section#member-profile > div[class="site-background"] div { +section#site-profile > div[class="member-avatar"] div, +section#site-profile > div[class="site-background"] div { height: 100%; border-radius: 3px; } -section#member-profile div input[type="file"] { +section#site-profile div input[type="file"] { display: none; visibility: hidden; } -section#member-profile div input[type="text"] { +section#site-profile div input[type="text"] { width: 98.4%; height: 40px; margin-bottom: 10px; } -article[class="settings"] button { +/* + SITE FEATURES TAB +*/ + +section#site-features > div.features-mail { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-columns: auto; + gap: 15px; width: 100%; - text-align: left; - height: 50px; + max-width: 880px; + margin: 10px auto 10px auto; + border-radius: 3px; + background: var(--secondary); + padding: 10px; +} + +section#site-features > div.features-mail input { + width: 98.4%; + height: 40px; + padding-left: 5px; + margin-bottom: 10px; +} + +section#site-features > div.features-mail a { + margin-right: 3px; + color: var(--primary); + display: inline-block; + height: 40px; + padding: 15px 0 0; +} + +section#site-features > div.features-mail button { + width: 100%; + height: 40px; margin-bottom: 5px; } -article[class="settings"] button > span { +section#site-features div.site-options button, +section#site-features div.site-maintenance button { + width: 90%; + height: 40px; + margin-bottom: 5px; +} + +section#site-features button span { font-size: 0.8em; display: inline; - top: -10px; position: relative; } -section[class="member-settings"] > div[class="features"] button[data-enabled="true"] { +section#site-features > div.features-mail a[data-enabled="true"] { + color: var(--secondary-highlight); + font-weight: bold; +} + +section#site-features > div.features-mail div[data-enabled="false"] { + visibility: hidden; + display: none; +} + +section#site-features > div[class="features"] button[data-enabled="true"] { color: var(--white); } -section[class="member-settings"] > div[class="features"] button[data-enabled="false"] { - color: var(--primary); +section#site-features > div.site-options { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-columns: auto; + gap: 15px; + width: 100%; + max-width: 900px; + margin: 0 auto 10px auto; + border-radius: 3px; +} + +section#site-features div.option-container { background: var(--secondary); + padding: 10px; + border-radius: 3px; +} + +section#site-features div.option-container span { + display: block; + width: 100%; + text-align: center; + font-size: 0.8em; +} + +section#site-features div.option-container svg { + fill: var(--primary); + position: relative; + top: 7px; +} + +section#site-features > div.site-options button[data-enabled="true"] { + color: var(--primary-highlight); + background: var(--primary); +} + +section#site-features > div.site-options button[data-enabled="false"] { + color: var(--secondary); + background: var(--secondary-highlight); +} + +section#site-features > div.site-maintenance { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-columns: auto; + gap: 15px; + width: 100%; + max-width: 900px; + margin: 0 auto 10px auto; + border-radius: 3px; + color: var(--primary); } section[class="member-settings"] > div[class="theme"] button[data-enabled="true"] { @@ -182,33 +280,6 @@ section[class="member-settings"] > div[class="theme"] button[data-enabled="false padding: 3px; } -section[class="member-settings"] > div[class="mail"] a { - margin-right: 3px; - color: var(--secondary); - display: inline-block; - height: 40px; - padding: 15px 0 0; - border-top: var(--primary) 1px solid; -} - -section[class="member-settings"] > div[class="mail"] a[data-enabled="true"] { - color: var(--primary-highlight); - font-weight: bold; - border-top: var(--secondary-highlight) 1px solid; -} - -section[class="member-settings"] > div[class="mail"] div[data-enabled="false"] { - visibility: hidden; - display: none; -} - -section[class="member-settings"] > div[class="mail"] input { - width: 98.4%; - height: 40px; - padding-left: 5px; - margin-bottom: 10px; -} - section[class="data-settings"] { color: var(--white); } diff --git a/public/assets/scripts/dash/app/controllers/SettingsIndex.js b/public/assets/scripts/dash/app/controllers/SettingsIndex.js index f27b9e7..dec9d88 100644 --- a/public/assets/scripts/dash/app/controllers/SettingsIndex.js +++ b/public/assets/scripts/dash/app/controllers/SettingsIndex.js @@ -95,7 +95,7 @@ export default class SettingsIndex { 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; + let tab = 'site-' + e.target.id; for (i = 0, length = tabs.length; i < length; i++) { let tabID = tabs[i].id; if (tab == tabID) { diff --git a/resources/views/back/settings.blade.php b/resources/views/back/settings.blade.php index 7ac4c94..abc2ef6 100644 --- a/resources/views/back/settings.blade.php +++ b/resources/views/back/settings.blade.php @@ -10,7 +10,7 @@
-
+
@@ -43,74 +43,27 @@
-
- MEMBER FEATURES -
- @if(isset($apiStatus) && $apiStatus == 'true') - - @else - +
+
+ +
+ @if($mailOption == "option-none" or $mailOption == "") + NONE + @else + NONE + @endif + @if($mailOption == "option-mg" or $mailOption == "") + MAILGUN + @else + MAILGUN + @endif + @if($mailOption == "option-smtp" or $mailOption == "") + SMTP + @else + SMTP + @endif +
- @endif - @if(isset($dynamicRenderStatus) && $dynamicRenderStatus == 'true') - - - @else - - - @endif -
-
-
- @if($lastBackup != '') - LAST BACK UP
- {{ $lastBackup }}
- @else - span No back ups. Frowny face. - @endif -
-
-
- @if($mailOption == "option-none" or $mailOption == "") - NONE - @else - NONE - @endif - @if($mailOption == "option-mg" or $mailOption == "") - MAILGUN - @else - MAILGUN - @endif - @if($mailOption == "option-smtp" or $mailOption == "") - SMTP - @else - SMTP - @endif @include('forms.mailforms')
+
+
+ + + + @if(isset($apiStatus) && $apiStatus == 'true') + + @else + + @endif +
+
+ + + + @if(isset($dynamicRenderStatus) && $dynamicRenderStatus == 'true') + + + @else + + + @endif +
+
+
+
+ + + + + + @if($lastBackup != '') + LAST BACK UP + {{ $lastBackup }}
+ @else + span No back ups. Frowny face. + @endif + +
+
+ + + + + COMING SOON +
+
+ + + + + COMING SOON +
+
-
+
MEMBER THEMES