diff --git a/app/assets/stylesheets/darkswarm/split-checkout.scss b/app/assets/stylesheets/darkswarm/split-checkout.scss index 63fe9feb08..ac535ea8c8 100644 --- a/app/assets/stylesheets/darkswarm/split-checkout.scss +++ b/app/assets/stylesheets/darkswarm/split-checkout.scss @@ -7,6 +7,17 @@ span, span > a { font-size: 1.3rem; @include headingFont; + } + + @media screen and (max-width: 700px) { + + span, span > a { + font-size: 1.1rem; + } + + span.checkout-tab-number { + display: none; + } } &:not(.selected) { @@ -30,7 +41,7 @@ &.success { border-bottom: 5px solid $clr-turquoise-bright; - span { + span.checkout-tab-label { &:after { content: '✓'; background-color: $clr-turquoise-bright; diff --git a/app/views/split_checkout/_checkout.html.haml b/app/views/split_checkout/_checkout.html.haml index f56be8a301..f26c8c4ca9 100644 --- a/app/views/split_checkout/_checkout.html.haml +++ b/app/views/split_checkout/_checkout.html.haml @@ -1,4 +1,4 @@ %checkout.row#checkout .small-12.medium-12.columns - = render partial: "split_checkout/tabs" - = render partial: "split_checkout/form" + = render partial: "split_checkout/tabs" + = render partial: "split_checkout/form" diff --git a/app/views/split_checkout/_tabs.html.haml b/app/views/split_checkout/_tabs.html.haml index b285563784..80a4a188e9 100644 --- a/app/views/split_checkout/_tabs.html.haml +++ b/app/views/split_checkout/_tabs.html.haml @@ -1,12 +1,21 @@ %div.flex %div.columns.three.text-center.checkout-tab{"class": [("selected" if checkout_step?(:details)), ("success" unless checkout_step?(:details))]} - %span - = link_to_unless checkout_step?(:details), t("split_checkout.your_details"), main_app.checkout_step_path(:details) do - = t("split_checkout.your_details") + %div + %span.checkout-tab-number + 1 - + %span.checkout-tab-label + = link_to_unless checkout_step?(:details), t("split_checkout.your_details_without_number"), main_app.checkout_step_path(:details) do + = t("split_checkout.your_details_without_number") %div.columns.three.text-center.checkout-tab{"class": [("selected" if checkout_step?(:payment)), ("success" if checkout_step?(:summary))]} - %span - = link_to_if checkout_step?(:summary), t("split_checkout.payment_method"), main_app.checkout_step_path(:payment) do - = t("split_checkout.payment_method") + %div + %span.checkout-tab-number + 2 - + %span.checkout-tab-label + = link_to_if checkout_step?(:summary), t("split_checkout.payment_method_without_number"), main_app.checkout_step_path(:payment) do + = t("split_checkout.payment_method_without_number") %div.columns.three.text-center.checkout-tab{"class": ("selected" if checkout_step?(:summary))} - %span - = t("split_checkout.order_summary") + %div + %span.checkout-tab-number + 3 - + %span.checkout-tab-label + = t("split_checkout.order_summary_without_number") diff --git a/config/locales/en.yml b/config/locales/en.yml index 76398dceef..c915843a7f 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1637,9 +1637,9 @@ en: cost_currency: "Cost Currency" split_checkout: - your_details: 1 - Your details - payment_method: 2 - Payment method - order_summary: 3 - Order summary + your_details_without_number: Your details + payment_method_without_number: Payment method + order_summary_without_number: Order summary step1: your_details: title: Your details