raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-22 05:18:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enlarge product pictures flexibly for devices

Browse Source 
This change will need a change of the `small` image size. The new format
should be `227x227#`. The `#` crops the center of an image to make it
square if necessary. All old images should then be regenerated:

  rake paperclip:refresh:thumbnails CLASS=Spree::Image
This commit is contained in:
Maikel Linke
2020-08-31 16:32:14 +10:00
parent de9b10b227
commit 05add9e530
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,8 @@
}
.shop-variants {
padding-left: 7.9375rem;
// product-thumb width + 1rem
padding-left: calc(100% / 9 * 2 + 1rem);
@include breakpoint(phablet) {
padding-left: 0;
@@ -93,9 +94,14 @@
}
.summary-header {
padding-left: 7.9375rem;
// product-thumb width + 1rem
padding-left: calc(100% / 9 * 2 + 1rem);
padding-right: 1rem;
@include breakpoint(phablet) {
padding-left: calc(100% / 12 * 4 + 1rem);
}
.product-producer {
white-space: nowrap;
overflow: hidden;

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

@@ -2,9 +2,16 @@
products {
product {
.product-thumb {
width: 7rem;
height: 7rem;
// 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);
float: left;
// Mobile: the summary has full twelve columns and the image
// should take four of them. Maximum is 227px.
@include breakpoint(phablet) {
width: calc(100% / 12 * 4);
}
}
}
}