From 36573701dc656ea6e70743e50d51e71da7e489a8 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 16 Feb 2021 16:57:13 +0100 Subject: [PATCH 1/3] Use svg icon instead of CSS `before` CSS can be sometimes a little bit inconsistent to create such an icon. Using SVG is better solution to create beautiful icon. --- app/assets/images/question-mark-icon.svg | 1 + .../darkswarm/question-mark-icon.scss | 18 ++---------------- 2 files changed, 3 insertions(+), 16 deletions(-) create mode 100644 app/assets/images/question-mark-icon.svg diff --git a/app/assets/images/question-mark-icon.svg b/app/assets/images/question-mark-icon.svg new file mode 100644 index 0000000000..cbef96910d --- /dev/null +++ b/app/assets/images/question-mark-icon.svg @@ -0,0 +1 @@ + diff --git a/app/assets/stylesheets/darkswarm/question-mark-icon.scss b/app/assets/stylesheets/darkswarm/question-mark-icon.scss index 47696191ee..c8b33a727e 100644 --- a/app/assets/stylesheets/darkswarm/question-mark-icon.scss +++ b/app/assets/stylesheets/darkswarm/question-mark-icon.scss @@ -1,6 +1,7 @@ .question-mark-icon { position: relative; - top: 1px; + top: 6px; + background-image: image-url("question-mark-icon.svg"); // Reset button element css attributes padding: 0; @@ -13,21 +14,6 @@ &:focus { background-color: transparent; } - - &::before { - content: "?"; - padding-left: 1px; - display: inline-block; - color: $tiny-blue; - border: 1px solid $grey-250; - border-radius: 50%; - text-align: center; - background-color: $grey-075; - width: 20px; - height: 20px; - font-weight: bold; - font-size: 1rem; - } } .joyride-tip-guide.question-mark-tooltip { From d6cf69df347531dda524994c0cd33bc82ddaf742 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 1 Mar 2021 16:37:27 +0100 Subject: [PATCH 2/3] Fix vertical alignment using flex - Firefox displayed the icon above the legend - Use `display: flex;` and `align-items: center;` to vertical align icon and text --- .../templates/shop_variant_with_unit_price.html.haml | 2 +- .../stylesheets/darkswarm/_shop-product-rows.scss | 4 +++- app/assets/stylesheets/darkswarm/cart-dropdown.scss | 1 - .../stylesheets/darkswarm/question-mark-icon.scss | 10 +++++++++- app/views/shared/menu/_cart_sidebar.html.haml | 2 +- 5 files changed, 14 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml b/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml index 3250f032c0..4a3d2d7211 100644 --- a/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml +++ b/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml @@ -8,7 +8,7 @@ "price-breakdown-placement" => "bottom", "price-breakdown-animation" => true} {{ variant.price_with_fees | localizeCurrency }} - .variant-unit-price + .unit-price.variant-unit-price %question-mark-with-tooltip{"question-mark-with-tooltip" => "_", "question-mark-with-tooltip-append-to-body" => "true", "question-mark-with-tooltip-placement" => "top", diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss index a008b916ad..4ecfd5182d 100644 --- a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss +++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss @@ -67,8 +67,10 @@ .variant-unit-price { color: $grey-700; - font-size: 0.9rem; + font-size: 0.85rem; margin-top: 15px; + position: relative; + left: -1px; } // Total price diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.scss index 8584e3fa44..eeb6681a7f 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.scss @@ -55,7 +55,6 @@ .unit-price { justify-content: flex-end; - align-items: baseline; } } diff --git a/app/assets/stylesheets/darkswarm/question-mark-icon.scss b/app/assets/stylesheets/darkswarm/question-mark-icon.scss index c8b33a727e..7bee5f2c04 100644 --- a/app/assets/stylesheets/darkswarm/question-mark-icon.scss +++ b/app/assets/stylesheets/darkswarm/question-mark-icon.scss @@ -1,12 +1,20 @@ +.unit-price { + display: flex; + align-items: center; +} + .question-mark-icon { position: relative; - top: 6px; + right: 1px; background-image: image-url("question-mark-icon.svg"); + background-size: cover; + background-repeat: no-repeat; // Reset button element css attributes padding: 0; margin: 0; width: 20px; + min-width: 20px; height: 20px; background-color: transparent; diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index 8a1561903c..6a6c085782 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -24,7 +24,7 @@ %td .total-price.text-right {{ line_item.total_price | localizeCurrency }} - if feature? :unit_price, spree_current_user - .flex.unit-price + .unit-price %div{:style => "margin-right: 5px"} %question-mark-with-tooltip{"question-mark-with-tooltip" => "_", "question-mark-with-tooltip-append-to-body" => "true", From ac70bbfd9b304eaf1b9dc0cd4144f511fdec54fc Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 8 Mar 2021 15:58:26 +0100 Subject: [PATCH 3/3] Add missing closing curly bracket --- .../javascripts/templates/question_mark_with_tooltip.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml b/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml index ea0ee22f6b..75a697fe12 100644 --- a/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml +++ b/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml @@ -1,4 +1,4 @@ -.joyride-tip-guide.question-mark-tooltip{class: "{{ context }}", ng: {class: "{ in: tt_isOpen, fade: tt_animation", show: "tt_isOpen"}} +.joyride-tip-guide.question-mark-tooltip{class: "{{ context }}", ng: {class: "{ in: tt_isOpen, fade: tt_animation }", show: "tt_isOpen"}} .background{ng: {click: "tt_isOpen = false"}} .joyride-content-wrapper {{ "js.shopfront.unit_price_tooltip" | t }}