From 230cd1bcb845908373e6d80ae0b10e51662eaba2 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Sun, 9 Feb 2025 20:20:16 +0200
Subject: feat(user/update): Move buttons to side and replace text with icons

---
 views/img/global-settings.svg |  1 +
 views/img/list-add.svg        |  1 +
 views/img/settings.svg        |  1 +
 views/styles.css              | 30 +++++++++++++++++++++++++++--
 views/user/index.php          | 44 +++++++++++++++++++++----------------------
 5 files changed, 53 insertions(+), 24 deletions(-)
 create mode 100644 views/img/global-settings.svg
 create mode 100644 views/img/list-add.svg
 create mode 100644 views/img/settings.svg

diff --git a/views/img/global-settings.svg b/views/img/global-settings.svg
new file mode 100644
index 0000000..424494c
--- /dev/null
+++ b/views/img/global-settings.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class=""><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 12a9 9 0 1 0 -8.979 9" /><path d="M3.6 9h16.8" /><path d="M3.6 15h8.9" /><path d="M11.5 3a17 17 0 0 0 0 18" /><path d="M12.5 3a16.992 16.992 0 0 1 2.522 10.376" /><path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19.001 15.5v1.5" /><path d="M19.001 21v1.5" /><path d="M22.032 17.25l-1.299 .75" /><path d="M17.27 20l-1.3 .75" /><path d="M15.97 17.25l1.3 .75" /><path d="M20.733 20l1.3 .75" /></svg>
diff --git a/views/img/list-add.svg b/views/img/list-add.svg
new file mode 100644
index 0000000..e19454a
--- /dev/null
+++ b/views/img/list-add.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class=""><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 8h-14" /><path d="M5 12h9" /><path d="M11 16h-6" /><path d="M15 16h6" /><path d="M18 13v6" /></svg>
diff --git a/views/img/settings.svg b/views/img/settings.svg
new file mode 100644
index 0000000..d16a901
--- /dev/null
+++ b/views/img/settings.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class=""><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>
diff --git a/views/styles.css b/views/styles.css
index 0ec7895..cd151d0 100644
--- a/views/styles.css
+++ b/views/styles.css
@@ -449,18 +449,44 @@ hr.new-section {
   height: 4em;
 }
 
+#user-main {
+  display: flex;
+  gap: 1em;
+}
+
+#user-main > * {
+  text-align: unset;
+}
+
+#user-main > :nth-child(2) {
+  flex: 1;
+}
+
 #user-buttons {
   margin: 0 1em 2em 1em;
   display: flex;
-  flex-direction: row;
-  gap: 1em;
+  flex-direction: column;
+  gap: 0.5em;
+  float: right;
+}
+
+.standalone-button {
+  border: none;
+  box-shadow: none;
+}
+
+.standalone-button svg {
+  height: 1.5em;
+  vertical-align: middle;
 }
 
 #user-nav {
   display: flex;
   flex-direction: row;
   gap: 1em;
+  margin-left: -1em;
   margin-bottom: 2em;
+  width: calc(100% + 2em);
 }
 
 #user-nav button {
diff --git a/views/user/index.php b/views/user/index.php
index 40995d2..ef888c7 100644
--- a/views/user/index.php
+++ b/views/user/index.php
@@ -9,34 +9,34 @@
 ?>
 
 <?php if ($user !== null): ?>
-    <section>
+    <section id="user-main">
         <span class="user-icon"><?php $user->icon(); ?></span>
         <h1 class="username"><?= $user->Username ?></h1>
-    </section>
-
-    <div class="user-blank-afterspace"></div>
 
-    <section id="user-buttons" hidden>
-        <?php if ($user !== null && $loggedin !== null && $user->UID === $loggedin->UID): ?>
-            <form action="/list/new" method="GET">
-                <input type="submit" value="Create a new list">
-            </form>
-            <form action="/user/settings" method="GET">
-                <input type="submit" value="Account settings">
-            </form>
-            <?php if ($user->Role === 'Admin'): ?>
-                <form action="/admin" method="GET">
-                    <input type="submit" value="Admin panel">
+        <section id="user-buttons" hidden>
+            <?php if ($user !== null && $loggedin !== null && $user->UID === $loggedin->UID): ?>
+                <form action="/list/new" method="GET">
+                    <button title="Create a new list" class="standalone-button"><?php include $VIEWS_DIR . '/img/list-add.svg' ?></button>
                 </form>
+                <form action="/user/settings" method="GET">
+                    <button title="Account settings" class="standalone-button"><?php include $VIEWS_DIR . '/img/settings.svg' ?></button>
+                </form>
+                <?php if ($user->Role === 'Admin'): ?>
+                    <form action="/admin" method="GET">
+                        <button title="Global settings" class="standalone-button"><?php include $VIEWS_DIR . '/img/global-settings.svg' ?></button>
+                    </form>
+                <?php endif; ?>
             <?php endif; ?>
-        <?php endif; ?>
+        </section>
+        <script type="text/javascript">
+            function showUserButtons() {
+                document.getElementById('user-buttons').hidden = false;
+            }
+            authenticated(showUserButtons);
+        </script>
     </section>
-    <script type="text/javascript">
-        function showUserButtons() {
-            document.getElementById('user-buttons').hidden = false;
-        }
-        authenticated(showUserButtons);
-    </script>
+
+    <div class="user-blank-afterspace"></div>
 
     <nav id="user-nav">
         <button id="openArchives" onclick="openArchives()">Archives</button>
-- 
cgit v1.2.3