Merge pull request #53 from sgobotta/feature/translations-and-ux-impr…

…ovements feature/translations and ux improvements
sgobotta · Oct 8, 2023 · 37cd7d9 · 37cd7d9
2 parents ee021e9 + c1e21e9
commit 37cd7d9
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 154 deletions.
diff --git a/assets/css/components/buttons.css b/assets/css/components/buttons.css
@@ -22,4 +22,12 @@
   .pill-button {
     @apply rounded-full text-xl font-bold
   }
+
+  .checkout-button-text {
+    @apply text-sm sm:text-lg lg:text-2xl
+  }
+
+  .checkout-button-icon {
+    @apply h-5 w-5 sm:h-7 sm:w-7 lg:h-7 lg:w-7
+  }
 }
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -76,7 +76,8 @@ module.exports = {
       },
       screens: {
         '2xl': {'max': '1920px', 'min': '1536px'},
-        '3xl': {'raw': '(min-width: 1920px)'}
+        '3xl': {'raw': '(min-width: 1920px)'},
+        'xs': {'max': '640px', 'min': '420px'}
       },
       top: {},
       transitionDuration: {

diff --git a/lib/ex_commerce_web/live/checkout_live/catalogue.html.heex b/lib/ex_commerce_web/live/checkout_live/catalogue.html.heex
@@ -42,7 +42,7 @@
   >
     <%= for %CatalogueCategory{name: category_name} = catalogue_category <- @catalogue.categories do %>
       <div class="py-3">
-        <p class="font-bold text-xl tracking-wider text-sky-600 text-center">
+        <p class="font-bold text-lg sm:text-xl tracking-wider text-sky-600 text-center">
           <%= category_name %>
         </p>
       </div>
@@ -82,23 +82,24 @@
               </div>
               <div class="col-span-10 lg:col-span-9 row-span-1">
                 <p class="
-                  text-xl text-black font-medium
+                  text-base sm:text-lg text-black font-medium
                   text-ellipsis overflow-hidden whitespace-nowrap
                 ">
                   <%= item_name  %>
                 </p>
               </div>
               <div class="col-span-10 lg:col-span-9 row-span-1">
                 <p class="
-                  text-base text-gray-700
+                  text-sm sm:text-base text-gray-700
                   text-ellipsis overflow-hidden whitespace-nowrap
                 ">
                   <%= item_description  %>
                 </p>
               </div>
               <div class="col-span-5 lg:col-span-5 row-span-1 self-center">
                 <p class="
-                  tracking-wider font-bold text-xl text-sky-600
+                  text-base sm:text-lg
+                  tracking-wider font-bold text-sky-600
                   text-ellipsis overflow-hidden whitespace-nowrap
                 ">
                   <%= get_item_price(item_variants) %>
@@ -149,7 +150,9 @@
       on_click_event="checkout_order"
     >
       <:enabled_content>
-        <div class="flex flex-row">
+        <div class="
+          flex flex-row text-center checkout-button-text
+        ">
           <div class="px-2">
             <p class="font-medium text-white">
               (<%= get_order_items(@cart) %>)
@@ -165,10 +168,10 @@
               <%= gettext("Checkout") %>
             </p>
           </div>
-          <div class="pt-1">
+          <div class="">
             <.icon name={:shopping_bag} outlined class="
-              text-white
-              flex-shrink-0 h-7 w-7
+              flex-shrink-0 text-white
+              checkout-button-icon
             "/>
           </div>
         </div>
@@ -177,15 +180,14 @@
       <:disabled_content>
         <div class="flex flex-row">
           <div class="px-2">
-            <p class="font-medium text-white text-center">
+            <p class="checkout-button-text font-medium text-white text-center">
               <%= gettext("Add products to your order") %>
             </p>
           </div>
-          <div class="pt-1 self-center">
+          <div class="lg:pt-1 self-center">
             <.icon name={:shopping_bag} outlined class="
-              pr-2
-              text-white
-              flex-shrink-0 h-7 w-7
+              text-white flex-shrink-0
+              checkout-button-icon
             "/>
           </div>
         </div>