From 509bf72ebbd2918026ccc3cbf64aff81e7dfd52f Mon Sep 17 00:00:00 2001 From: Santiago Botta Date: Sun, 8 Oct 2023 00:46:21 -0300 Subject: [PATCH 1/5] Add a custom tailwind media query --- assets/tailwind.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 0affd1e..1d7ac3f 100644 --- 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: { From bfb46cb116af8f8856726596d866d4d6e44b0113 Mon Sep 17 00:00:00 2001 From: Santiago Botta Date: Sun, 8 Oct 2023 00:46:39 -0300 Subject: [PATCH 2/5] Add some reusable styles for the checkout floating button --- assets/css/components/buttons.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/css/components/buttons.css b/assets/css/components/buttons.css index 17e8dd9..224a42b 100644 --- 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 + } } From e7f2f63ff39a29cc0d8a04a73721d76003e4aa15 Mon Sep 17 00:00:00 2001 From: Santiago Botta Date: Sun, 8 Oct 2023 00:46:55 -0300 Subject: [PATCH 3/5] Update title font size --- lib/ex_commerce_web/live/live_helpers.ex | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ex_commerce_web/live/live_helpers.ex b/lib/ex_commerce_web/live/live_helpers.ex index 1c6949c..7e6c864 100644 --- a/lib/ex_commerce_web/live/live_helpers.ex +++ b/lib/ex_commerce_web/live/live_helpers.ex @@ -301,7 +301,7 @@ defmodule ExCommerceWeb.LiveHelpers do ">

From bc50d40068609af206ff76ba0e1687dd148bc980 Mon Sep 17 00:00:00 2001 From: Santiago Botta Date: Sun, 8 Oct 2023 00:47:06 -0300 Subject: [PATCH 4/5] Fix a few translations --- priv/gettext/es/LC_MESSAGES/default.po | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/priv/gettext/es/LC_MESSAGES/default.po b/priv/gettext/es/LC_MESSAGES/default.po index 19e8dde..3b4e35f 100644 --- a/priv/gettext/es/LC_MESSAGES/default.po +++ b/priv/gettext/es/LC_MESSAGES/default.po @@ -103,7 +103,7 @@ msgstr "Agregar productos a su orden" #: lib/ex_commerce_web/live/checkout_live/catalogue_item.html.heex:351 #, elixir-autogen, elixir-format msgid "Add to order" -msgstr "Agregar a la orden" +msgstr "Agregar" #: lib/ex_commerce_web/live/checkout_live/order.html.heex:54 #: lib/ex_commerce_web/live/checkout_live/order_details.html.heex:55 @@ -215,7 +215,7 @@ msgstr "Asignar a productos" #: lib/ex_commerce_web/live/checkout_live/shop.html.heex:112 #, elixir-autogen, elixir-format msgid "Available Catalogues" -msgstr "Catálogos disponibles" +msgstr "Catálogos" #: lib/ex_commerce_web/live/brand_live/show.html.heex:37 #: lib/ex_commerce_web/live/catalogue_category_live/show.html.heex:65 @@ -411,7 +411,7 @@ msgstr "Elije una imagen de producto" #: lib/ex_commerce_web/live/checkout_live/catalogue_item.html.heex:157 #, elixir-autogen, elixir-format msgid "Choose one of the folowing" -msgstr "Elige una de lasd opciones" +msgstr "Elige una de las opciones" #: lib/ex_commerce_web/live/checkout_live/order.html.heex:79 #, elixir-autogen, elixir-format @@ -1072,7 +1072,7 @@ msgstr "Eliminar" #: lib/ex_commerce_web/live/checkout_live/catalogue_item.ex:269 #, elixir-autogen, elixir-format msgid "Required" -msgstr "¿Es requerido?" +msgstr "Requerido" #: lib/ex_commerce_web/templates/user_confirmation/new.html.heex:3 #, elixir-autogen, elixir-format From c1e21e93d9ebfb1cc0e11cc9b4fadd6f0e887d62 Mon Sep 17 00:00:00 2001 From: Santiago Botta Date: Sun, 8 Oct 2023 00:47:46 -0300 Subject: [PATCH 5/5] Update checkout font sizes for different screens --- .../live/checkout_live/catalogue.html.heex | 28 +-- .../checkout_live/catalogue_item.html.heex | 162 +++++++++--------- .../components/cart_component.ex | 9 +- .../live/checkout_live/order.html.heex | 39 ++--- .../checkout_live/order_details.html.heex | 33 ++-- .../live/checkout_live/shop.html.heex | 34 ++-- 6 files changed, 157 insertions(+), 148 deletions(-) diff --git a/lib/ex_commerce_web/live/checkout_live/catalogue.html.heex b/lib/ex_commerce_web/live/checkout_live/catalogue.html.heex index 8235a35..5d18f08 100644 --- 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 %>
-

+

<%= category_name %>

@@ -82,7 +82,7 @@

<%= item_name %> @@ -90,7 +90,7 @@

<%= item_description %> @@ -98,7 +98,8 @@

<%= get_item_price(item_variants) %> @@ -149,7 +150,9 @@ on_click_event="checkout_order" > <:enabled_content> -

+

(<%= get_order_items(@cart) %>) @@ -165,10 +168,10 @@ <%= gettext("Checkout") %>

-
+
<.icon name={:shopping_bag} outlined class=" - text-white - flex-shrink-0 h-7 w-7 + flex-shrink-0 text-white + checkout-button-icon "/>
@@ -177,15 +180,14 @@ <:disabled_content>
-

+

<%= gettext("Add products to your order") %>

-
+
<.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 "/>
diff --git a/lib/ex_commerce_web/live/checkout_live/catalogue_item.html.heex b/lib/ex_commerce_web/live/checkout_live/catalogue_item.html.heex index 5689ab2..7783023 100644 --- a/lib/ex_commerce_web/live/checkout_live/catalogue_item.html.heex +++ b/lib/ex_commerce_web/live/checkout_live/catalogue_item.html.heex @@ -48,7 +48,7 @@ exit={[y: [-1000]]} class="flex justify-center" > -
+
-

+

<%= @catalogue_item.name %>

@@ -90,7 +90,7 @@ "/>
-

+

<%= @catalogue_item.description %>

@@ -100,7 +100,7 @@
<% else %>