improve merchants list mobile formatting

dragonfly-xyz · Jun 16, 2024 · 4c9854b · 4c9854b
1 parent ca6ec26
commit 4c9854b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -133,7 +133,7 @@
         > .left {
             display: flex;
             align-self: start;
-            justify-content: right;
+            justify-content: center;
             flex-wrap: wrap;
 
             @include mobile {

diff --git a/src/routes/(app)/players/+page.svelte b/src/routes/(app)/players/+page.svelte
@@ -102,18 +102,52 @@
         max-width: min-content;
         padding-inline-start: 0;
         display: table;
+
+        @include mobile {
+            display: block;
+            max-width: none;
+            width: 100%;
+        }
+
         li {
             display: table-row;
 
-            > * {
-                display: table-cell;
-                padding: 0.1em 1ex;
-                width: fit-content;
-                white-space: nowrap;
+            @include desktop {
+                > * {
+                    display: table-cell;
+                    width: fit-content;
+                    white-space: nowrap;
+                    padding: 0.1em 1ex;
+                }
             }
 
-            > .submitted {
-                color: green;
+            @include mobile {
+                display: flex;
+                flex-direction: row;
+                width: 100%;
+                flex-wrap: wrap;
+                gap: 1ex;
+
+                > * {
+                    padding: 0 !important;
+                }
+
+                > .counter {
+                }
+    
+                > .submitted {
+                    color: green;
+                }
+    
+                > .name {
+                    text-align: left;
+                }
+    
+                > .joined {
+                    text-align: end;
+                    flex: 1 0 100%;
+    
+                }
             }
         }
     }
@@ -160,14 +194,14 @@
             <ol>
                 {#each players as player, i (player.address)}
                 <li>
-                    <div>{i + 1}.</div>
-                    <div><Player name={player.name} /></div>
+                    <div class="counter">{i + 1}.</div>
+                    <div class="name"><Player name={player.name} /></div>
                     <div class="submitted">
                         {#if player.submitted}
                         📄 ✓
                         {/if}
                     </div>
-                    <div>Joined {player.created.toLocaleDateString()}</div>
+                    <div class="joined">Joined {player.created.toLocaleDateString()}</div>
                 </li>
                 {/each}
             </ol>