raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6894 from jibees/6878-question-mark-icon-as-svg

Browse Source 
Use svg icon instead of CSS `before` for the question mark icon
This commit is contained in:
Pau Pérez Fabregat
2021-03-09 16:47:30 +01:00
committed by GitHub
parent 4a6de97935 ac70bbfd9b
commit 3543e7f005
7 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/images/question-mark-icon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="24.87" cy="24.87" r="24" fill="#f4f9fd" stroke="#cfe1f3" stroke-miterlimit="10"/><path d="M36.31 18.13c0 7.51-8.11 7.63-8.11 10.4v.71c0 .74-.6 1.34-1.34 1.34h-5.11c-.74 0-1.34-.6-1.34-1.34v-.97c0-4 3.04-5.61 5.33-6.89 1.97-1.1 3.17-1.85 3.17-3.31 0-1.93-2.46-3.21-4.46-3.21-2.6 0-3.8 1.23-5.48 3.36-.45.57-1.28.68-1.87.24l-3.12-2.36a1.35 1.35 0 01-.3-1.83c2.65-3.89 6.02-6.07 11.27-6.07 5.49-.02 11.36 4.27 11.36 9.93zM29 36.86c0 2.59-2.11 4.71-4.71 4.71s-4.71-2.11-4.71-4.71c0-2.59 2.11-4.71 4.71-4.71S29 34.27 29 36.86z" fill="#81b2e1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 618 B

2
app/assets/javascripts/templates/question_mark_with_tooltip.html.haml
View File

@@ -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 }}

2
app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml
View File

@@ -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",

4
app/assets/stylesheets/darkswarm/_shop-product-rows.scss
View File

@@ -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

1
app/assets/stylesheets/darkswarm/cart-dropdown.scss
View File

@@ -55,7 +55,6 @@
.unit-price {
justify-content: flex-end;
align-items: baseline;
}
}

26
app/assets/stylesheets/darkswarm/question-mark-icon.scss
View File

@@ -1,11 +1,20 @@
.unit-price {
display: flex;
align-items: center;
}
.question-mark-icon {
position: relative;
top: 1px;
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;
@@ -13,21 +22,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 {

2
app/views/shared/menu/_cart_sidebar.html.haml
View File

@@ -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",