UI fixes (#82)

* Fix item card sizing * fix account logo spacing
cmintey · Nov 29, 2023 · b2d14f8 · b2d14f8
1 parent 595e53f
commit b2d14f8
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 42 deletions.
diff --git a/src/lib/components/navigation/NavMenu/NavMenu.svelte b/src/lib/components/navigation/NavMenu/NavMenu.svelte
@@ -15,52 +15,54 @@
 </script>
 
 {#if user}
-    <button use:popup={menuSettings}>
-        <Avatar {user} width="h-10 md:h-12" />
-    </button>
-    <div>
-        <nav class="card list-nav p-4 shadow-xl" data-popup="user">
-            <ul>
-                <li>
-                    <a href="/account">
-                        <iconify-icon icon="ion:person" />
-                        <span class="flex-auto">Account</span>
-                    </a>
-                </li>
-                {#if user.roleId == Role.ADMIN}
+    <div class="flex md:pr-4">
+        <button use:popup={menuSettings}>
+            <Avatar {user} width="h-10 md:h-12" />
+        </button>
+        <div>
+            <nav class="card list-nav p-4 shadow-xl" data-popup="user">
+                <ul>
                     <li>
-                        <a href="/admin">
-                            <iconify-icon icon="ion:settings" />
-                            <span class="flex-auto">Admin</span>
+                        <a href="/account">
+                            <iconify-icon icon="ion:person" />
+                            <span class="flex-auto">Account</span>
                         </a>
                     </li>
-                {/if}
+                    {#if user.roleId == Role.ADMIN}
+                        <li>
+                            <a href="/admin">
+                                <iconify-icon icon="ion:settings" />
+                                <span class="flex-auto">Admin</span>
+                            </a>
+                        </li>
+                    {/if}
 
-                <hr />
-                <GroupSubMenu {user} />
-                <hr />
+                    <hr />
+                    <GroupSubMenu {user} />
+                    <hr />
 
-                <li>
-                    <button
-                        class="list-option w-full"
-                        on:click={async () => {
-                            await fetch("/logout", { method: "POST" });
-                            invalidateAll();
-                        }}
-                    >
-                        <iconify-icon icon="ion:log-out" />
-                        <p>Sign Out</p>
-                    </button>
-                </li>
-                <hr class="pb-1" />
-                <li>
-                    <div class="flex w-full justify-around">
-                        <p>Mode</p>
-                        <LightSwitch />
-                    </div>
-                </li>
-            </ul>
-        </nav>
+                    <li>
+                        <button
+                            class="list-option w-full"
+                            on:click={async () => {
+                                await fetch("/logout", { method: "POST" });
+                                invalidateAll();
+                            }}
+                        >
+                            <iconify-icon icon="ion:log-out" />
+                            <p>Sign Out</p>
+                        </button>
+                    </li>
+                    <hr class="pb-1" />
+                    <li>
+                        <div class="flex w-full justify-around">
+                            <p>Mode</p>
+                            <LightSwitch />
+                        </div>
+                    </li>
+                </ul>
+            </nav>
+        </div>
     </div>
 {:else}
     <LightSwitch />

diff --git a/src/lib/components/wishlists/ItemCard/ItemCard.svelte b/src/lib/components/wishlists/ItemCard/ItemCard.svelte
@@ -107,6 +107,7 @@
         id: "item",
         position: "bottom",
         height: "max-h-fit",
+        padding: "md:px-12 lg:px-32 xl:px-56",
         meta: {
             item,
             showFor
@@ -142,7 +143,7 @@
 </script>
 
 <button
-    class="card card-hover block text-start"
+    class="card card-hover block w-full text-start"
     class:variant-ghost-warning={!item.approved}
     type="button"
     on:click={() => drawerStore.open(drawerSettings)}