improve mobile experience

peufo · Jan 6, 2025 · d5e23fa · d5e23fa
1 parent a4f07a5
commit d5e23fa
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git a/src/lib/algo/CardAlgo.svelte b/src/lib/algo/CardAlgo.svelte
@@ -91,7 +91,7 @@
         {#if $page.data.user?.id === algo.authorId}
             <a href="/edit/{algo.id}" class="btn btn-ghost btn-sm">
                 <Icon path={mdiPencilOutline} />
-                <span>Edit</span>
+                <span class="max-sm:hidden">Edit</span>
             </a>
         {/if}
     </div>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -15,43 +15,43 @@
 <Toaster theme={$mode} />
 
 <div
-    class="flex gap-2 border-b shadow-md items-center p-1 pl-4 bordered sticky top-0 bg-base-100 z-10"
+    class="flex flex-wrap gap-2 border-b shadow-md items-center p-1 pl-4 bordered sticky top-0 bg-base-100 z-10"
 >
     <a href="/">
         <h2 class="text-2xl text-primary">push_swap_ui</h2>
     </a>
 
-    <div class="grow"></div>
-
-    <a href="/analyze" class="btn">
-        <Icon path={mdiChartBoxOutline} />
-        <span>Analyze</span>
-    </a>
-    {#if data.user}
-        <a href="/new" class="btn btn-primary btn-outline group">
-            <Icon
-                path={mdiPlus}
-                class="fill-primary group-hover:fill-base-100"
-            />
-            <span>new algorithm</span>
+    <div class="flex gap-2 justify-end grow">
+        <a href="/analyze" class="btn">
+            <Icon path={mdiChartBoxOutline} />
+            <span class="max-sm:hidden">Analyze</span>
         </a>
-        <a href="/me" class="btn gap-3 pr-0 overflow-hidden">
-            <div>{data.user.login}</div>
-            <div class="h-full p-0.5">
-                <img
-                    src={data.user.imageSmall}
-                    alt="User avatar"
-                    class="h-full rounded"
+        {#if data.user}
+            <a href="/new" class="btn btn-primary btn-outline group">
+                <Icon
+                    path={mdiPlus}
+                    class="fill-primary group-hover:fill-base-100"
                 />
-            </div>
-        </a>
-    {:else}
-        <a href="/auth/42" class="btn btn-square">
-            <Icon path={mdiAccountHeartOutline} />
-        </a>
-    {/if}
+                <span class="max-sm:hidden">new algorithm</span>
+            </a>
+            <a href="/me" class="btn gap-3 pr-0 max-sm:px-2 overflow-hidden">
+                <div class="max-sm:hidden">{data.user.login}</div>
+                <div class="h-full p-0.5">
+                    <img
+                        src={data.user.imageSmall}
+                        alt="User avatar"
+                        class="h-full rounded"
+                    />
+                </div>
+            </a>
+        {:else}
+            <a href="/auth/42" class="btn btn-square">
+                <Icon path={mdiAccountHeartOutline} />
+            </a>
+        {/if}
 
-    <ToggleMode class="btn-md" defaultMode="dark" />
+        <ToggleMode class="btn-md" defaultMode="dark" />
+    </div>
 </div>
 
 {@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,7 +4,7 @@
     let { data } = $props()
 </script>
 
-<div class="flex flex-col gap-6 max-w-lg mx-auto my-10">
+<div class="flex flex-col gap-6 max-w-lg mx-auto my-10 px-2">
     <div class="flex gap-2 items-end">
         <h2 class="text-2xl">Algorithms</h2>
         <div class="grow"></div>

diff --git a/src/routes/me/+page.svelte b/src/routes/me/+page.svelte
@@ -7,7 +7,7 @@
     export let data
 </script>
 
-<div class="flex flex-col gap-6 max-w-lg mx-auto my-10">
+<div class="flex flex-col gap-6 max-w-lg mx-auto my-10 px-2">
     <div class="flex gap-2 items-end">
         <h2 class="text-2xl">
             {data.user.displayname.split(' ')[0]}'s algorithms