Commit Graph

17605 Commits

Author SHA1 Message Date
Maikel Linke
450e5cc5e3 Remove indent of product description on iPhone
Our HTML formatting plugin for product descriptions adds whitespace to
the beginning of the description text. While that shouldn't be rendered
in HTML, Safari on iPhone was showing a whitespace and therefore moving
the text a bit to the right.
2020-10-22 15:46:48 +11:00
Maikel Linke
36ead3fdba Remove margin between products and search bar on mobile 2020-10-22 15:46:48 +11:00
Maikel Linke
30bfb1a7bd Fix clickable area when opening price breakdown
Once a price breakdown has been opened, the nub was over the bottom half
of the pie button. It made half of the pie unclickable.

And when you closed the breakdown, it became invisible but stayed
present, absorbing all clicks in that area. So other pie buttons were
unclickable as well.
2020-10-22 15:46:48 +11:00
Maikel Linke
0268782b5e Align price pie with product name
Moving it a bit to the right on mobile.
And giving the variant name a bit more space.
2020-10-22 15:46:48 +11:00
Maikel Linke
152835335d Pre-calculate product image size in layout
Giving a percentage is simpler than the whole formula.
2020-10-22 15:46:48 +11:00
Maikel Linke
fd14d61213 Adjust product separator color
The original design contains grey-100: e6e6e6

Also removed not needed comment.
2020-10-22 15:46:48 +11:00
Maikel Linke
05add9e530 Enlarge product pictures flexibly for devices
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
2020-10-22 15:46:48 +11:00
Maikel Linke
de9b10b227 Darken add-button on hover 2020-10-22 15:46:48 +11:00
Maikel Linke
41ab84c8f9 Add padding to product tags 2020-10-22 15:46:48 +11:00
Maikel Linke
cb5089a69a Increase space for variant name on mobile 2020-10-22 15:46:48 +11:00
Maikel Linke
15c7dad5f2 Left-align prices on mobile 2020-10-22 15:46:48 +11:00
Maikel Linke
b57c912aa0 Add space between products and filters 2020-10-22 15:46:48 +11:00
Maikel Linke
66d5f8d5c1 Align first product flush to the search bar 2020-10-22 15:46:47 +11:00
Maikel Linke
1e3ff141f0 Reduce margin below product description 2020-10-22 15:46:47 +11:00
Maikel Linke
c053ae951b Style product header
Reduce font size.
Adjust margins.
2020-10-22 15:46:47 +11:00
Maikel Linke
3a3ec4e45e Close price breakdown on click outside 2020-10-22 15:46:47 +11:00
Maikel Linke
6bb48c0954 Adjust active colour of price breakdown button 2020-10-22 15:46:47 +11:00
Maikel Linke
1fd4dc471a Position the price breakdown below the button 2020-10-22 15:46:47 +11:00
Maikel Linke
2ce65472ec Remove obsolete styles
I think that this was overlooked when replacing the cart code in
be8c0f3600.
2020-10-22 15:46:47 +11:00
Maikel Linke
230d3e76a1 Label plus and minus symbols as special 2020-10-22 15:46:47 +11:00
Maikel Linke
650686c262 Adjust alignment of variant name with unit 2020-10-22 15:46:47 +11:00
Maikel Linke
cdbbcfd1fe Better naming for translation keys 2020-10-22 15:46:47 +11:00
Maikel Linke
e45941276e Better naming of translation keys
Also splitting one key for two different uses.
2020-10-22 15:46:47 +11:00
Maikel Linke
d2600b1d40 Avoid translation errors by hardcoding symbols
The fullwidth plus and minus signs are well understood in all countries
(that participate in the development of OFN). It's more likely that a
translator enters a normal plus or minus than that they want to change
the symbol. A normal + or - sign doesn't fill a whole character space
and is therefore not well aligned in the design.
2020-10-22 15:46:47 +11:00
Matt-Yorkley
b79d9bd75b Fix screen-width bug for desktop down
The width of these elements was ~105% of total screen width, adding horizontal scrollbars and whitespace on the left hand side
2020-10-22 15:46:47 +11:00
Matt-Yorkley
6bcf11e308 Adjust layout of variant rows for better use of vertical space 2020-10-22 15:46:47 +11:00
Matt-Yorkley
e39a15ed30 Remove margin-bottom with !important from product 2020-10-22 15:46:46 +11:00
Matt-Yorkley
98e581c059 Remove pad-top class from products from to match alignment with filter sidebar 2020-10-22 15:46:46 +11:00
Matt-Yorkley
e968a091f9 Match right and left row padding on phablet down 2020-10-22 15:46:46 +11:00
Matt-Yorkley
a2f710db1e Improve vertical alignment of variant form elements 2020-10-22 15:46:46 +11:00
Matt-Yorkley
898492c409 Remove borders from graph button 2020-10-22 15:46:46 +11:00
Matt-Yorkley
a89c81a033 Hide description paragraph if product has no description
Improves the appearance of the layout when no description is present
2020-10-22 15:46:46 +11:00
Maikel Linke
9da91576ac Fix height of invisible "in cart" text
While the text "x in cart" isn't visible, the item quantity is not set.
A missing variable leads to longer text that is taken up more space. In
this case it was two lines instead of one line. The resulting extra line
of margin disappeared when adding to the cart and the rest of the page
jumped up.
2020-10-22 15:46:46 +11:00
Maikel Linke
57178659c3 Remove bulk icon as per design 2020-10-22 15:46:46 +11:00
Maikel Linke
81cc951ed4 Name symbols on quantity buttons in specs 2020-10-22 15:46:46 +11:00
Maikel Linke
d337561ea8 Move ShopVariantCtrl to own file and spec it 2020-10-22 15:46:46 +11:00
Maikel Linke
755773e5ad Style code 2020-10-22 15:46:46 +11:00
Maikel Linke
58f4d7393c Make quantity labels translatable 2020-10-22 15:46:46 +11:00
Maikel Linke
01c4882759 Replace bulk buy inputs with add-remove-buttons 2020-10-22 15:46:46 +11:00
Maikel Linke
59c13b97ea Replace quantity input with add-remove buttons
The new mobile friendly design contains a nice "Add" button to add
variants to your cart. Once you have the variant in you cart, it's
replaced by plus and minus buttons to adjust the quantity.

Other languages have longer words than "Add" which need to fit on the
button. Since the add button and the +/- buttons should have the same
width, I widened them a little bit so that they fit the longest words
Aggiungi and Добавить.
2020-10-22 15:46:46 +11:00
Maikel Linke
35747dc2b1 Emphasize first identifying name of a variant
That can be a variant name or the unit if the name is missing. Putting
the second and third element in the background consistently.
2020-10-22 15:46:45 +11:00
Maikel Linke
7660116792 Display variant name only when set
The previous method was falling back to the product name which is
displayed already.
2020-10-22 15:46:45 +11:00
Maikel Linke
8734fb1776 Override *active* states for product properties w/o tooltip 2020-10-22 15:46:45 +11:00
Maikel Linke
9379e21bca Increase margin between product summary and variants 2020-10-22 15:46:45 +11:00
Maikel Linke
4ab2375832 Reduce margin on the right of product listing 2020-10-22 15:46:45 +11:00
Maikel Linke
1fb544b803 Remove margin of product listing on mobile and tablet 2020-10-22 15:46:45 +11:00
Maikel Linke
96cd5ca1fe Fix "Place price-breakdown and price in the middle" 2020-10-22 15:46:45 +11:00
Maikel Linke
e1a3c351e5 Fix "Removal of category icon" 2020-10-22 15:46:45 +11:00
Maikel Linke
4f6e900327 Fix "Remove background and border colors from product list" 2020-10-22 15:46:45 +11:00
Maikel Linke
615678db56 Align inline graph vertically 2020-10-22 15:46:45 +11:00