From 99c0416cc782dbade5476490e429b7c4932c5e0b Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Thu, 28 Apr 2022 10:40:28 +0200 Subject: [PATCH 1/4] Handle long shipping method description with no spaces --- app/views/split_checkout/_summary.html.haml | 4 ++-- app/webpacker/css/darkswarm/split-checkout.scss | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/views/split_checkout/_summary.html.haml b/app/views/split_checkout/_summary.html.haml index 650acb5d46..3e45623ab4 100644 --- a/app/views/split_checkout/_summary.html.haml +++ b/app/views/split_checkout/_summary.html.haml @@ -46,8 +46,8 @@ = t("split_checkout.step1.delivery_address.title") %span.summary-value = @order.shipping_method.name - %div - = @order.shipping_method.description + %div.summary-description + = @order.shipping_method.description %a.summary-edit{href: main_app.checkout_step_path(:details)} = t("split_checkout.step3.your_details.edit") diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index dde049254f..e24cccc7b0 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -140,6 +140,7 @@ #distributor_address.panel { span { white-space: pre-wrap; + word-wrap: break-word; } } @@ -279,8 +280,9 @@ font-weight: bold; } - .summary-value { - + .summary-description { + white-space: pre-wrap; + word-wrap: break-word; } .summary-edit { From 4635e677079416058231d1ab87b8f6de39f561e5 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Thu, 28 Apr 2022 10:46:20 +0200 Subject: [PATCH 2/4] Create mixins to force wrap No need to pre-wrap since we break-word --- app/webpacker/css/darkswarm/mixins.scss | 4 ++++ app/webpacker/css/darkswarm/split-checkout.scss | 6 ++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/webpacker/css/darkswarm/mixins.scss b/app/webpacker/css/darkswarm/mixins.scss index deec6c3831..e7385bd80f 100644 --- a/app/webpacker/css/darkswarm/mixins.scss +++ b/app/webpacker/css/darkswarm/mixins.scss @@ -211,3 +211,7 @@ @media all and (max-width: $mobile_breakpoint) { @content; } } } + +@mixin force-wrap { + word-wrap: break-word; +} diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index e24cccc7b0..ea89a87408 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -139,8 +139,7 @@ #distributor_address.panel { span { - white-space: pre-wrap; - word-wrap: break-word; + @include force-wrap; } } @@ -281,8 +280,7 @@ } .summary-description { - white-space: pre-wrap; - word-wrap: break-word; + @include force-wrap; } .summary-edit { From 89aa76dbbc61cd7878abc24ac934fa69a9b39820 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Thu, 28 Apr 2022 10:54:41 +0200 Subject: [PATCH 3/4] Handle long payment description with no space --- app/views/split_checkout/_summary.html.haml | 4 ++-- app/webpacker/css/darkswarm/split-checkout.scss | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/app/views/split_checkout/_summary.html.haml b/app/views/split_checkout/_summary.html.haml index 3e45623ab4..22567b9218 100644 --- a/app/views/split_checkout/_summary.html.haml +++ b/app/views/split_checkout/_summary.html.haml @@ -59,8 +59,8 @@ %div.summary %span.summary-value = last_payment_method(@order)&.name - %p.text-small.text-skinny.pre-line - %em= last_payment_method(@order)&.description + %div.summary-description + = last_payment_method(@order)&.description %a.summary-edit{href: main_app.checkout_step_path(:payment)} = t("split_checkout.step3.payment_method.edit") diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index ea89a87408..9dac45cb64 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -185,6 +185,10 @@ } } + .paymentmethod-container .paymentmethod-description.panel { + @include force-wrap; + } + .checkout-step3 { padding-left: 15px; padding-right: 15px; @@ -281,6 +285,7 @@ .summary-description { @include force-wrap; + color: $min-accessible-grey; } .summary-edit { From 132ab28070207774b21da5e741ca9abb3c353049 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Thu, 28 Apr 2022 11:22:17 +0200 Subject: [PATCH 4/4] Handle very long description without any space for shipping and ... ... payment methods --- app/views/spree/shared/_order_details.html.haml | 2 +- app/views/spree/shared/_shipment_delivery_details.html.haml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/spree/shared/_order_details.html.haml b/app/views/spree/shared/_order_details.html.haml index 7e47f2d100..b559074bf5 100644 --- a/app/views/spree/shared/_order_details.html.haml +++ b/app/views/spree/shared/_order_details.html.haml @@ -14,7 +14,7 @@ .text-big = t :order_payment %strong= last_payment_method(order)&.name - %p.text-small.text-skinny.pre-line + %p.text-small.text-skinny.pre-line.word-wrap %em= last_payment_method(order)&.description .order-summary.text-small diff --git a/app/views/spree/shared/_shipment_delivery_details.html.haml b/app/views/spree/shared/_shipment_delivery_details.html.haml index 3ae739a8aa..973e03e09a 100644 --- a/app/views/spree/shared/_shipment_delivery_details.html.haml +++ b/app/views/spree/shared/_shipment_delivery_details.html.haml @@ -4,7 +4,7 @@ .text-big = t :order_delivery_time %strong #{order.order_cycle.pickup_time_for(order.distributor)} - %p.text-small.text-skinny.pre-line + %p.text-small.text-skinny.pre-line.word-wrap %em= order.shipping_method.description&.html_safe || "" .order-summary.text-small %strong