feat: improve list display on small screens

LeBenLeBen · Nov 4, 2023 · c497459 · c497459
1 parent 0c85fef
commit c497459
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 17 deletions.
diff --git a/packages/frontend/src/assets/css/components/headings.css b/packages/frontend/src/assets/css/components/headings.css
@@ -1,14 +1,7 @@
 .h1 {
-  @apply font-display text-3xl leading-tight;
-}
-
-@screen sm {
-  .h1 {
-    @apply text-4xl;
-    @apply leading-none;
-  }
+  @apply font-display text-2xl/tight sm:text-3xl/none md:text-4xl/none;
 }
 
 .h2 {
-  @apply font-display text-2xl text-alt-700 leading-tight;
+  @apply font-display text-lg/6 sm:text-xl/7 md:text-2xl/8 text-alt-700;
 }
diff --git a/packages/frontend/src/components/RecipeListItem.vue b/packages/frontend/src/components/RecipeListItem.vue
@@ -1,16 +1,16 @@
 <template>
   <router-link
     :to="{ name: 'recipe', params: { id: recipe.id, slug: recipe.slug } }"
-    class="overflow-hidden min-height-150px flex flex-col sm:flex-row text-alt-800 hover:text-alt-800 bg-alt-50 hover:bg-white rounded-xl border-b border-alt-200 ring-offset-2"
+    class="overflow-hidden min-height-150px flex text-alt-800 hover:text-alt-800 bg-alt-50 hover:bg-white rounded-xl border-b border-alt-200 ring-offset-2"
   >
     <RecipeImage
       :image="recipe.image"
       width="200"
       height="150"
-      class="w-full sm:w-auto flex-shrink-0 bg-alt-200 bg-opacity-75"
+      class="flex-shrink-0 w-1/3 sm:w-auto bg-alt-200 bg-opacity-75"
     />
 
-    <div class="flex flex-col p-4 sm:px-5 lg:py-5 lg:px-6 w-full">
+    <div class="flex flex-col py-3 px-4 sm:px-5 lg:py-5 lg:px-6 w-full">
       <h2 class="h2 mb-1">
         {{ recipe.title }}
       </h2>

diff --git a/packages/frontend/src/components/RecipeQuantity.vue b/packages/frontend/src/components/RecipeQuantity.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="inline-flex items-center align-middle">
     <CIcon id="people" class="mr-2 text-alt-500" />
-    <strong class="text-alt-700">{{ quantity }}</strong
-    >&nbsp;{{ $t('recipe.quantity', quantity) }}
+    <strong class="text-alt-700">{{ quantity }}</strong>
+    <span class="max-sm:sr-only">
+      &nbsp;{{ $t('recipe.quantity', quantity) }}
+    </span>
   </div>
 </template>
 

diff --git a/packages/frontend/src/components/RecipeTime.vue b/packages/frontend/src/components/RecipeTime.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="inline-flex items-center align-middle">
     <CIcon id="timer" class="mr-2 text-alt-500" />
-    <strong class="text-alt-700">{{ time }}</strong
-    >&nbsp;{{ $t('recipe.time', time) }}
+    <strong class="text-alt-700">{{ time }}</strong>
+    <span class="max-sm:sr-only">&nbsp;{{ $t('recipe.time', time) }}</span>
   </div>
 </template>
 

diff --git a/packages/frontend/src/components/RecipesList.vue b/packages/frontend/src/components/RecipesList.vue
@@ -10,7 +10,7 @@
       }}
     </h2>
 
-    <ul class="space-y-4">
+    <ul class="space-y-3 sm:space-y-4">
       <li v-for="recipe in recipes" :key="recipe.id">
         <RecipeListItem
           :recipe="recipe"