Implement hideable sections in Settings

Implemented the same way it was for servers, packages, pages.
zediious · Jun 11, 2024 · ca7661b · ca7661b
1 parent c4b99a9
commit ca7661b
Showing 1 changed file with 57 additions and 10 deletions.
diff --git a/raptorWeb/templates/panel/panel_settings.html b/raptorWeb/templates/panel/panel_settings.html
@@ -4,7 +4,7 @@
     <title>{{ site_info_model.brand_name }} | Settings</title>
 </head>
 
-<div class="container">
+<div class="container" x-data='{selected: 1}'>
     <div class="m-2 mt-3 p-3">
         <div class="text-white">
             <header class="fs-3">Settings</header>
@@ -13,13 +13,60 @@
             </p>
         </div>
     </div>
+    <div class='d-flex flex-wrap justify-content-center gap-1 mb-0'>
+        <button class='btn btn-sm selection-button' @click='selected = 1'
+                :class="{'btn-primary': selected == 1, 'btn-secondary': selected != 1}"
+        >
+            General
+        </button>
+        <button class='btn btn-sm selection-button' @click='selected = 2'
+                :class="{'btn-primary': selected == 2, 'btn-secondary': selected != 2}"
+        >
+            SEO
+        </button>
+        <button class='btn btn-sm selection-button' @click='selected = 3'
+                :class="{'btn-primary': selected == 3, 'btn-secondary': selected != 3}"
+        >
+            Auth
+        </button>
+        <button class='btn btn-sm selection-button' @click='selected = 4'
+                :class="{'btn-primary': selected == 4, 'btn-secondary': selected != 4}"
+        >
+            Game Servers
+        </button>
+        <button class='btn btn-sm selection-button' @click='selected = 5'
+                :class="{'btn-primary': selected == 5, 'btn-secondary': selected != 5}"
+        >
+            Discord Bot
+        </button>
+        <button class='btn btn-sm selection-button' @click='selected = 6'
+                :class="{'btn-primary': selected == 6, 'btn-secondary': selected != 6}"
+        >
+            Donations
+        </button>
+        <button class='btn btn-sm selection-button' @click='selected = 7'
+                :class="{'btn-primary': selected == 7, 'btn-secondary': selected != 7}"
+        >
+            Colors
+        </button>
+        <button class='btn btn-sm selection-button' @click='selected = 8'
+                :class="{'btn-primary': selected == 8, 'btn-secondary': selected != 8}"
+        >
+            Images
+        </button>
+        <button class='btn btn-sm selection-button' @click='selected = 9'
+                :class="{'btn-primary': selected == 9, 'btn-secondary': selected != 9}"
+        >
+            Default Pages
+        </button>
+    </div>
     <form class="form"
           enctype="multipart/form-data" 
           hx-post="{% url 'panel:settings'%}"
           hx-include="#imageConfigInput"
           hx-swap='none'
     >
-        <div class="m-3">
+        <div x-show='selected == 1' class="m-3">
             <div class="card bg-dark p-2">
                 <div class="card-body">
                     <div class="m-3 mt-1 p-1">
@@ -42,7 +89,7 @@
                 </div>
             </div>
         </div>
-        <div class="m-3">
+        <div x-show='selected == 2' class="m-3">
             <div class="card bg-dark p-2">
                 <div class="card-body">
                     <div class="m-3 mt-1 p-1">
@@ -60,7 +107,7 @@
                 </div>
             </div>
         </div>
-        <div class="m-3">
+        <div x-show='selected == 3' class="m-3">
             <div class="card bg-dark p-2">
                 <div class="card-body">
                     <div class="m-3 mt-1 p-1">
@@ -77,7 +124,7 @@
                 </div>
             </div>
         </div>
-        <div class="m-3">
+        <div x-show='selected == 4' class="m-3">
             <div class="card bg-dark p-2">
                 <div class="card-body">
                     <div class="m-3 mt-1 p-1">
@@ -100,7 +147,7 @@
                 </div>
             </div>
         </div>
-        <div class="m-3">
+        <div x-show='selected == 5' class="m-3">
             <div class="card bg-dark p-2">
                 <div class="card-body">
                     <div class="m-3 mt-1 p-1">
@@ -119,7 +166,7 @@
                 </div>
             </div>
         </div>
-        <div class="m-3">
+        <div x-show='selected == 6' class="m-3">
             <div class="card bg-dark p-2">
                 <div class="card-body">
                     <div class="m-3 mt-1 p-1">
@@ -142,7 +189,7 @@
                 </div>
             </div>
         </div>
-        <div class="m-3">
+        <div x-show='selected == 7' class="m-3">
             <div class="card bg-dark p-2">
                 <div class="card-body">
                     <div class="m-3 mt-1 p-1">
@@ -163,7 +210,7 @@
             </div>
         </div>
     </form>
-    <div class="m-3">
+    <div x-show='selected == 8' class="m-3">
         <div class="card bg-dark p-2">
             <div class="card-body">
                 <div class="m-3 mt-1 p-1">
@@ -237,7 +284,7 @@
             </div>
         </div>
     </div>
-    <div class="m-3">
+    <div x-show='selected == 9' class="m-3">
         <div class="card bg-dark p-2">
             <div class="card-body">
                 <div class="m-3 mt-1 p-1">