Improve mobile grid view

sillsdev · Jun 11, 2024 · 1e967bb · 1e967bb
1 parent 052a157
commit 1e967bb
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 26 deletions.
diff --git a/frontend/src/lib/components/ProjectList.svelte b/frontend/src/lib/components/ProjectList.svelte
@@ -8,34 +8,32 @@
   export let projects: ProjectItemWithDraftStatus[];
 </script>
 
-<div class="grid grid-cols-2 sm:grid-cols-3 auto-rows-fr gap-2 md:gap-4">
+<div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 auto-rows-fr gap-2 md:gap-4 justify-items-center">
   {#each projects as project}
     {#if project.isDraft}
-      <div class="project draft">
-        <div data-sveltekit-preload-data="false" class="card aspect-square bg-base-200 shadow-base-300 group overflow-hidden">
-          <div class="bg" style="background-image: url('{getProjectTypeIcon(project.type)}')" />
-          <div class="card-body z-[1]">
-            <h2 class="card-title overflow-hidden text-ellipsis" title={project.name}>
-              <span class="text-primary inline-flex gap-2 items-center">
-                {project.name}
-                <span
-                  class="tooltip text-warning text-xl shrink-0 leading-0"
-                  data-tip={$t('projectlist.is_draft')}>
-                  <Icon icon="i-mdi-script" />
-                </span>
+      <div data-sveltekit-preload-data="false" class="draft card aspect-square bg-base-200 shadow-base-300 group overflow-hidden">
+        <div class="bg" style="background-image: url('{getProjectTypeIcon(project.type)}')" />
+        <div class="card-body z-[1]">
+          <h2 class="card-title overflow-hidden text-ellipsis" title={project.name}>
+            <span class="text-primary inline-flex gap-2 items-center">
+              {project.name}
+              <span
+                class="tooltip text-warning text-xl shrink-0 leading-0"
+                data-tip={$t('projectlist.is_draft')}>
+                <Icon icon="i-mdi-script" />
               </span>
-            </h2>
-            <p>{project.code}</p>
-            <Badge variant="badge-warning" outline>
-              <Icon icon="i-mdi-progress-clock" />
-              Awaiting approval
-            </Badge>
-            <p class="flex items-end">
-              {$t('projectlist.requested', {
-                requested: new Date(project.createdDate),
-              })}
-            </p>
-          </div>
+            </span>
+          </h2>
+          <p>{project.code}</p>
+          <Badge variant="badge-warning" outline>
+            <Icon icon="i-mdi-progress-clock" />
+            Awaiting approval
+          </Badge>
+          <p class="flex items-end">
+            {$t('projectlist.requested', {
+              requested: new Date(project.createdDate),
+            })}
+          </p>
         </div>
       </div>
     {:else}
@@ -80,6 +78,9 @@
       hover:border-neutral
       hover:shadow-xl;
 
+    max-height: 50vh;
+    max-width: 100%;
+
     .bg {
       @apply absolute
           w-full
@@ -104,7 +105,7 @@
     }
   }
 
-  .project.draft .card {
+  .draft.card {
     pointer-events: none;
     box-shadow: none;
   }

diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
@@ -1,4 +1,6 @@
 const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{svelte,ts}'],
@@ -31,6 +33,10 @@ module.exports = {
     logs: false,
   },
   theme: {
+    screens: {
+      'xs': '475px',
+      ...defaultTheme.screens,
+    },
     extend: {
       screens: {
         'max-xs': { 'max': '400px' },