From db5ee3f87f26b6a18a021c294bc31dcee6642df4 Mon Sep 17 00:00:00 2001
From: ro <iam@roiskinda.cool>
Date: Tue, 28 May 2024 13:00:25 -0600
Subject: [PATCH] settings responsive pt. 1

ripped out all of the old responsive styles from the setting layou and
plugged in the new format.

still needs some polish but the new structure is in place, so progress
will be easier
---
 public/assets/css/dash/settings.css     | 174 +++++++++++-------------
 resources/views/back/settings.blade.php |   4 +-
 2 files changed, 83 insertions(+), 95 deletions(-)

diff --git a/public/assets/css/dash/settings.css b/public/assets/css/dash/settings.css
index d2509d2..1ed95f2 100644
--- a/public/assets/css/dash/settings.css
+++ b/public/assets/css/dash/settings.css
@@ -318,111 +318,99 @@ section#site-themes > a {
   z-index: 30;
 }
 
-section[class="data-settings"] {
-  color: var(--white);
-}
-
-@media only screen and (max-width: 900px) {
-  main > article[class="settings"] {
-    width: 97%;
-  }
-}
-
-@media only screen and (max-width: 650px) {
-  section[class="member-settings"] div input[type="text"] {
-    width: 99.3%;
-    height: 40px;
-    margin-bottom: 10px;
-  }
-
-  section[class="member-settings"] {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  section[class="member-settings"] > div[class="mail"] input {
-    width: 97.7%;
-    height: 40px;
-    padding-left: 5px;
-    margin-bottom: 10px;
-  }
-
-  section[class="member-settings"] div textarea {
-    height: 80px;
-    width: 99.3%;
-  }
-
-  section[class="member-settings"] > div:nth-child(1) {
-    grid-column: 1/2;
-    grid-row: 1/3;
-    height: 200px;
-  }
-
-  section[class="member-settings"] > div:nth-child(2) {
-    grid-column: 2/3;
-    grid-row: 1/3;
-  }
-
-  section[class="member-settings"] > div:nth-child(3) {
-    grid-column: 1/3;
-    grid-row: 3/5;
-  }
-
-  section[class="member-settings"] > div:nth-child(4) {
-    grid-column: 1/2;
-  }
-
-  section[class="member-settings"] > div:nth-child(5) {
-    grid-column: 2/3;
-  }
-
-  section[class="member-settings"] > div:nth-child(6) {
-    grid-column: 1/2;
-  }
-
-  section[class="member-settings"] > div:nth-child(7) {
-    grid-column: 2/3;
-    min-height: 325px;
-  }
-
-  section[class="member-settings"] > div:nth-child(8) {
-    grid-column: 1/3;
-  }
-}
-
 @media only screen and (max-width: 530px) {
-  section[class="member-settings"] > div[class="mail"] input {
-    width: 98.5%;
+  article.settings div.tab-toolbar button {
+    width: 20%;
+    height: 40px;
+    color: var(--secondary);
+    font-size: 0.7em;
   }
 
-  section[class="member-settings"] {
-    grid-template-columns: 100%;
+  section#site-profile {
+    grid-template-columns: 1fr;
   }
 
-  section[class="member-settings"] div textarea {
-    height: 80px;
+  section#site-profile > div:nth-child(1) {
+    grid-column: 1/4;
+    grid-row: 1;
+    height: 250px;
+    padding: 10px;
   }
 
-  section[class="member-settings"] > div:nth-child(1) {
-    grid-row: 1/3;
-    height: 200px;
+  section#site-profile > div:nth-child(2) {
+    grid-column: 1/4;
+    grid-row: 2;
+    height: 250px;
+    padding: 10px;
   }
 
-  section[class="member-settings"] > div:nth-child(2) {
-    grid-row: 3/5;
-    grid-column: 1;
-    height: 200px;
+  section#site-profile > div:nth-child(3) {
+    grid-column: 1/4;
+    grid-row: 3;
+    padding-left: 10px;
   }
 
-  section[class="member-settings"] > div:nth-child(3) {
-    grid-column: 1;
-    grid-row: 5/7;
+  section#site-profile > div:nth-child(4) {
+    grid-column: 1/4;
+    grid-row: 4;
+    padding: 5px;
   }
 
-  section[class="member-settings"] > div:nth-child(4),
-  section[class="member-settings"] > div:nth-child(5),
-  section[class="member-settings"] > div:nth-child(6),
-  section[class="member-settings"] > div:nth-child(7),
-  section[class="member-settings"] > div:nth-child(8) {
-    grid-column: 1;
+  section#site-profile > div:nth-child(4) a {
+    font-weight: bold;
+    text-decoration: underline;
+    color: var(--primary-highlight);
+  }
+
+  section#site-profile > div:nth-child(5) {
+    grid-column: 1/4;
+    grid-row: 5;
+    padding: 10px;
+  }
+
+  section#site-profile > div:nth-child(6) {
+    grid-column: 1/4;
+    grid-row: 6;
+    padding: 0 10px;
+  }
+
+  section#site-profile > div:nth-child(6) div {
+    display: inline-block;
+    color: var(--secondary);
+    word-wrap: break-word;
+    vertical-align: top;
+    width: 49%;
+  }
+
+  section#site-profile > div:nth-child(6) div > span {
+    display: block;
+    background: var(--primary);
+    color: var(--secondary);
+    border-radius: 3px;
+    padding: 3px;
+    margin-bottom: 10px;
+  }
+
+  section#site-profile > div textarea {
+    width: 98.4%;
+    height: 85%;
+  }
+
+  article.settings section.settings-tabs section.section-tab {
+    width: 98%;
+    padding: 5px;
+  }
+
+  section#site-features > div.features-mail {
+    width: 96%;
+  }
+
+  section#site-features div.site-options button,
+  section#site-features div.site-maintenance button {
+    width: 86%;
+  }
+
+  section#site-features div.option-container span {
+    font-size: 0.7em;
   }
 }
diff --git a/resources/views/back/settings.blade.php b/resources/views/back/settings.blade.php
index 2269a9e..db9ffb1 100644
--- a/resources/views/back/settings.blade.php
+++ b/resources/views/back/settings.blade.php
@@ -10,7 +10,7 @@
             <button id="themes" class="tab-button">THEMES</button>
         </div>
         <section class="settings-tabs">
-            <section id="site-profile" class="section-tab hide">
+            <section id="site-profile" class="section-tab show">
                 <div class="member-avatar">
                     <div class="avatar" style="background: url({{ $member['avatar'] }} ) no-repeat center center / cover"></div>
                     <input id="avatar-upload" type="file" name="avatar-upload"/>
@@ -142,7 +142,7 @@
                     </div>
                 </div>
             </section>
-            <section id="site-themes" class="section-tab show">
+            <section id="site-themes" class="section-tab hide">
                 @foreach($themes as $theme)
                     @if($theme['name'] == $currentTheme)
                         <!--