Merge pull request #827 from emmaroche/feature/cards-layout-update

Refine new card layout for improved consistency
tutors-sdk · Oct 15, 2024 · 499fea2 · 499fea2
2 parents c31ccec + 4e45d45
commit 499fea2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/src/lib/ui/learning-objects/layout/Cards.svelte b/src/lib/ui/learning-objects/layout/Cards.svelte
@@ -35,17 +35,27 @@
 </script>
 
 {#if los.length > 0}
-  <div class="bg-surface-100-800-token mx-auto mb-2 place-items-center overflow-hidden rounded-xl p-4 {border ? bordered : unbordered}">
-    <div class="{los.length > 5 && !inSidebar ? 'grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5' : 'flex justify-center flex-wrap mx-auto'}">
-      {#key refresh}
-        {#each los as lo}
-          {#if !lo.hide}
-            <div class="flex justify-center">
-              <Card {lo} />
-            </div>
-          {/if}
-        {/each}
-      {/key}
+    <div class="bg-surface-100-800-token mx-auto mb-2 place-items-center overflow-hidden rounded-xl p-4 {border ? bordered : unbordered}">
+        <div class="{ 
+                    los.length > 4 && !inSidebar 
+                    ? 'grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5' 
+                    : los.length > 3 && !inSidebar 
+                    ? 'grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4' 
+                    : los.length > 2 && !inSidebar 
+                    ? 'grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3' 
+                    : los.length > 1 && !inSidebar 
+                    ? 'grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2' 
+                    : 'flex justify-center flex-wrap mx-auto'
+                  }">
+            {#key refresh}
+                {#each los as lo}
+                    {#if !lo.hide}
+                        <div class="flex justify-center">
+                            <Card {lo} />
+                        </div>
+                    {/if}
+                {/each}
+            {/key}
+        </div>
     </div>
-  </div>
 {/if}
diff --git a/src/lib/ui/learning-objects/layout/Units.svelte b/src/lib/ui/learning-objects/layout/Units.svelte
@@ -19,6 +19,7 @@
   onDestroy(unsubscribe);
 </script>
 
+<div class={inSidebar ? 'flex flex-col' : 'grid grid-cols-1'}>
   {#each units as unit}
     <div class="bg-surface-100-800-token mx-auto mb-2 w-full place-items-center overflow-hidden rounded-xl p-4 border-[1px] border-surface-200-700-token">
       <div class="flex w-full justify-between pb-2">
@@ -33,3 +34,4 @@
       </div>
     </div>
   {/each}
+</div>
diff --git a/src/lib/ui/learning-objects/structure/Composite.svelte b/src/lib/ui/learning-objects/structure/Composite.svelte
@@ -8,13 +8,13 @@
 </script>
 
 {#if composite?.units?.sides?.length > 0}
-  <div class="block md:flex w-11/12 mx-auto">
-    <div class="w-full">
+  <div class="block md:flex w-11/12 mx-auto justify-center">
+    <div>
       <Panels panels={composite.panels} />
-      <Units units={composite.units.units} />
-      <Cards los={composite.units.standardLos} /> 
+      <Units units={composite.units.units} inSidebar={true} />
+      <Cards los={composite.units.standardLos} inSidebar={true}/> 
     </div>
-    <div class="block w-full md:w-[30rem] md:ml-2 flex">
+    <div class="block w-full md:w-[20rem] md:ml-2 flex">
       <Units units={composite.units?.sides} inSidebar={true} />
     </div>
   </div>