raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-19 04:49:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pre-calculate product image size in layout

Browse Source 
Giving a percentage is simpler than the whole formula.
This commit is contained in:
Maikel Linke
2020-09-02 12:16:55 +10:00
parent fd14d61213
commit 152835335d
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@
.shop-variants {
// product-thumb width + 1rem
padding-left: calc(100% / 9 * 2 + 1rem);
padding-left: calc(22.222% + 1rem);
@include breakpoint(phablet) {
padding-left: 0;
@@ -95,11 +95,11 @@
.summary-header {
// product-thumb width + 1rem
padding-left: calc(100% / 9 * 2 + 1rem);
padding-left: calc(22.222% + 1rem);
padding-right: 1rem;
@include breakpoint(phablet) {
padding-left: calc(100% / 12 * 4 + 1rem);
padding-left: calc(33.333% + 1rem);
}
.product-producer {

8
app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
View File

@@ -3,14 +3,14 @@
product {
.product-thumb {
// Desktop: the product summary is nine columns wide. Use two
// for the image. In our design, that's a max of 192px.
width: calc(100% / 9 * 2);
// for the image. 100% / 9 * 2 = 22.222% <= 192px
width: calc(22.222%);
float: left;
// Mobile: the summary has full twelve columns and the image
// should take four of them. Maximum is 227px.
// should take four of them. 100% / 12 * 4 = 33.333% <= 227px
@include breakpoint(phablet) {
width: calc(100% / 12 * 4);
width: calc(33.333%);
}
}
}