feat: Proper list page layout and export user logo logic to class

7 files changed, 66 insertions, 16 deletions

diff --git a/models/user.php b/models/user.php
index 04f5a83..9b76f37 100644
--- a/models/user.php
+++ b/models/user.php
@@ -46,4 +46,15 @@ class User extends Table {
             "WHERE AuthorUID = \"$this->UID\""
         );
     }
+
+    function icon() {
+        global $VIEWS_DIR;
+        // https://tabler.io/icons
+        if ($this->Role === 'User') {
+            include $VIEWS_DIR . '/img/user.svg';
+        }
+        else {
+            include $VIEWS_DIR . '/img/user-star.svg';
+        }
+    }
 }
diff --git a/views/paper.jpg b/views/img/paper.jpg
index 6149260..6149260 100644
--- a/views/paper.jpg
+++ b/views/img/paper.jpg
diff --git a/views/img/user-star.svg b/views/img/user-star.svg
new file mode 100644
index 0000000..5245f4e
--- /dev/null
+++ b/views/img/user-star.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="user-admin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h.5" /><path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z" /></svg>
diff --git a/views/img/user.svg b/views/img/user.svg
new file mode 100644
index 0000000..ce96f88
--- /dev/null
+++ b/views/img/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2a5 5 0 1 1 -5 5l.005 -.217a5 5 0 0 1 4.995 -4.783z" /><path d="M14 14a5 5 0 0 1 5 5v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1a5 5 0 0 1 5 -5h4z" /></svg>
diff --git a/views/list/index.php b/views/list/index.php
index 9bc348d..9b49268 100644
--- a/views/list/index.php
+++ b/views/list/index.php
@@ -10,20 +10,28 @@
 ?>
 
 <?php if ($list !== null): ?>
-    <section>
-        <p><?= $list->Name ?></p>
-        <p><?= $list->Description ?></p>
-        <p><?= $author->Username ?></p>
+    <section class="list-container">
+        <section>
+            <h2><?= $list->Name ?></h2>
+            <p class="user-info">
+                <?php $author->icon(); ?>
+                <?= $author->Username ?>
+            </p>
+            <p><?= $list->Description ?></p>
+        </section>
+        <section>
+            <?php
+                foreach ($list->allItems() as $page) {
+                    include $VIEWS_DIR . '/archive/item.php';
+                }
+                include_once $VIEWS_DIR . '/archive/item_show.php';
+            ?>
+        </section>
     </section>
-    <?php
-        foreach ($list->allItems() as $page) {
-            include $VIEWS_DIR . '/archive/item.php';
-        }
-        include_once $VIEWS_DIR . '/archive/item_show.php';
-    ?>
 
 <?php else: ?>
     <p>
         List doesn't exist
     </p>
+
 <?php endif; ?>
diff --git a/views/profile/index.php b/views/profile/index.php
index 4ade4e7..1462e26 100644
--- a/views/profile/index.php
+++ b/views/profile/index.php
@@ -8,8 +8,7 @@
 
 <?php if ($user !== null): ?>
     <section>
-        <!-- https://tabler.io/icons -->
-        <svg class="user-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="currentColor" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2a5 5 0 1 1 -5 5l.005 -.217a5 5 0 0 1 4.995 -4.783z" /><path d="M14 14a5 5 0 0 1 5 5v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1a5 5 0 0 1 5 -5h4z" /></svg>
+        <span class="user-icon"><?php $user->icon(); ?></span>
         <h1 class="username"><?= $user->Username ?></h1>
     </section>
 
diff --git a/views/styles.css b/views/styles.css
index ffdd805..4d17e51 100644
--- a/views/styles.css
+++ b/views/styles.css
@@ -48,7 +48,7 @@ h1 {
 input, button, textarea, select {
   color: inherit;
 
-  background-image: url(/paper.jpg);
+  background-image: url(/img/paper.jpg);
   background-repeat: repeat;
 
   padding: 0.5em;
@@ -237,7 +237,7 @@ hr.new-section {
   gap: 0.5em;
 
   /* color: #404040 */
-  background-image: url(/paper.jpg);
+  background-image: url(/img/paper.jpg);
   background-repeat: repeat;
 
   height: 8.5em;
@@ -283,7 +283,7 @@ hr.new-section {
 
 /* Webpage item */
 .item, .list {
-  background-image: url(/paper.jpg);
+  background-image: url(/img/paper.jpg);
   background-repeat: repeat;
 
   display: flex;
@@ -381,14 +381,44 @@ hr.new-section {
   text-align: center;
 }
 
+/* List */
+.list-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+}
+
+.list-container > :first-child {
+  flex: 1;
+  font-size: 1.2em;
+}
+
+.list-container > :nth-child(2) {
+  flex: 4;
+  margin-top: 1em;
+}
+
+.list-container .user-info {
+  font-size: 1em;
+}
+
+.list-container .user-info svg {
+  max-height: 1em;
+  vertical-align: middle;
+}
+
 /* User */
 .user-icon {
   height: 7em;
   color: inherit;
-  display: inline-block;
+  display: inline-flex;
   vertical-align: middle;
 }
 
+.user-admin {
+  color: var(--cherry);
+}
+
 .username {
   display: inline-block;
   font-size: 2.5em;