Commit Graph

1000 Commits

Author SHA1 Message Date
Jean-Baptiste Bellet
fcd304182b specify :hover rule only for devices that can handle it
Since mobile device cannot handle :hover rule (hover is non sense for touch devices), specify css for only devices that effectivly handle it.

see https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
and https://caniuse.com/mdn-css_at-rules_media_hover for compatibility (quite good)
2021-02-01 10:53:34 +01:00
Matt-Yorkley
57f429db58 Merge pull request #6606 from mkllnk/6081-add-to-cart
Add quantity input to shop front
2021-01-28 15:51:08 +01:00
Maikel Linke
cf2a105b2a Prevent line breaks within plus/minus buttons 2021-01-22 16:42:20 +11:00
Maikel Linke
688be46b10 Avoid horizontal scroll bar on small screens 2021-01-22 16:42:20 +11:00
Maikel Linke
66423a1ec3 Add quantity input to shop front product list
Adding bigger quantities can now be done via an input field instead of
clicking a thousand times.

The add-button has been widened to match the new space requirements.
2021-01-22 16:42:20 +11:00
Maikel Linke
e5506df5ea Replace bulk quantity label with input field
Enable the user to enter a number directly.
2021-01-22 16:42:20 +11:00
Luis Ramos
7c9024101b Some css fixes to make it all work in rails 5 2021-01-15 23:26:37 +00:00
Pau Pérez Fabregat
6e48607760 Merge pull request #6629 from jibees/6199-alignment-readyfor-ipad
6199 adjust alignment on the Order Cycle component on ipad
2021-01-13 19:20:14 +01:00
Andy Brett
9cc0f74314 Merge pull request #6620 from mkllnk/6616-emphasize-qty-button-disabled
Emphasize disabled Add button when out of stock
2021-01-09 11:34:57 -08:00
Jean-Baptiste Bellet
fc71808517 use flex property to manage responsive
and remove unsued properties
2021-01-08 11:24:16 +01:00
Maikel Linke
18b1504935 Emphasize disabled Add button when out of stock
Using the same grey as was used in the bulk modal already. This makes it
more consistent and hopefully more clear.
2021-01-07 10:32:10 +11:00
Jean-Baptiste Bellet
39fc80172e move css property 2021-01-06 09:49:12 +01:00
Jean-Baptiste Bellet
1b4906d55a adjust margin according to old design 2021-01-06 09:17:11 +01:00
Jean-Baptiste Bellet
6e6be09740 use display flex to align 2021-01-06 09:16:38 +01:00
Jean-Baptiste Bellet
3a8b63b371 remove height constraint 2021-01-06 09:16:19 +01:00
Matt-Yorkley
0ceba7c0a8 Update orders closing message 2020-12-03 15:29:14 -08:00
Luis Ramos
f71de8123a Dont show 'closing in' message when oc closes in more than 3 months 2020-12-03 15:29:14 -08:00
Andy Brett
65f6f1febf rearrange css 2020-12-02 11:37:25 -08:00
Andy Brett
99b5d9e0c5 use white-space: nowrap on variant prices 2020-12-02 11:37:25 -08:00
Matt-Yorkley
3b92df42c3 Fix the menu!
🙈
2020-11-16 19:05:08 +00:00
Pau Perez
634ab5ca6a Don't scale logo image
The trick using `width: 100%` and a set `max-width` doesn't work if we
can't know the image width as it can be uploaded by superadmins. There's
no need though because the media query breakpoint triggers just before that.
2020-11-10 09:51:41 +01:00
Pau Perez
1903c575ff Reorder properties alphabetically
As Hound demands.
2020-11-09 15:40:25 +01:00
Pau Perez
9a885173b9 Remove element from class selector
Fixes Hound error `Avoid qualifying class selectors with an element.`.
2020-11-09 15:39:09 +01:00
Pau Perez
b5f27d48df Fix .top-bar-section not to wrap the icons-menu
This line-wrap makes the icons-menu overlap the OC selector. The menu's
background is transparent, what makes it look even more broken.

The fix involves refactoring the `.top-bar-section` into using flexbox
instead of this highly coupled CSS and floats. With flexbox it becomes
as easy as telling the browser to space the three sections evenly
filling-up the window, while scaling down the logo if there's not enough
room.

The root cause is that every instance uses a custom logo, which wasn't
the one we used while designing and implementing. This is why using
fixed-sizes in pixels won't work.
2020-11-06 17:35:24 +01:00
Matt-Yorkley
9b72f7e45c Merge pull request #6234 from Matt-Yorkley/fix-ordercyle-layout
Fix minor ordercyle selector layout regression
2020-10-23 10:52:25 +02:00
Matt-Yorkley
176021b201 Fix minor ordercyle selector layout regression 2020-10-22 19:57:32 +01:00
Matt-Yorkley
4dbe966fcf Add subtle hover effect on clickable image 2020-10-22 10:37:11 +01:00
Matt-Yorkley
fb482fc1c7 Quickfix: unwanted border-right on bulk buy buttons 2020-10-22 15:46:49 +11:00
Maikel Linke
e0a7f50626 Standardise new grey colour 2020-10-22 15:46:49 +11:00
Maikel Linke
db321da02a Fade "From" producer label 2020-10-22 15:46:49 +11:00
Maikel Linke
d5f0fb10f4 Distinguish unit size more from variant name 2020-10-22 15:46:49 +11:00
Maikel Linke
f6f029666a Remove gaps in multi-line variant name 2020-10-22 15:46:49 +11:00
Maikel Linke
23454ba3bf Show product property description nub on mobile 2020-10-22 15:46:49 +11:00
Maikel Linke
a3e83f2f70 Grey out disabled bulk quantity buttons
Since they are further away from each other, the colour difference has
to be stronger to be recognised.
2020-10-22 15:46:49 +11:00
Maikel Linke
ec1887544e Reduce bulk input modal size
This brings the related elements closer together.
2020-10-22 15:46:49 +11:00
Maikel Linke
e37fedc435 Add bulk ribbon to bulk products 2020-10-22 15:46:49 +11:00
Maikel Linke
ed902e7489 Reduce price breakdown size
It doesn't need as much space. This brings related text closer together
and hides less of the page, e.g. the add-to-cart button.
2020-10-22 15:46:49 +11:00
Maikel Linke
68777039bf Adjust padding in the price breakdown modal 2020-10-22 15:46:48 +11:00
Maikel Linke
bbe2ce9cba Add "Price breakdown" heading to pop-up
The translation key was already present even though it was unused.
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
15c7dad5f2 Left-align prices on mobile 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