Vue-storefront: Adjustments of the homepage on mobile

[karolbzik]

Adjustments to the homepage on mobile

• [x] 1. Remove left and right margin in the top, near the „menu” and „cart” buttons
• [x] 2.Make slider higher
• [x] 3. Change color of circle on „cart” button, like in the design;
• [x] 4. Add 2 columns of product boxes;
• [x] 5. Add gray background to the photo in the product box;
• [x] 6. Add transparency of product photo (20%), like in the design (it changes to 0% after mouseover);
• [x] 7. Change color of the headlines of sections, like in the design;
• [x] 8. Change colors of fonts in product box, like in the design;
• [x] 9. Add mouseover effect on the product box - change color of background, change transparency of the photo from 20% to 0%;
• [x] 10. Remove underline of price for mouseover for product box;
• [x] 11. Change size of font of headline „New Luna Yoga Collection” and other headlines of sections, like in the design;
• [x] 12. Adjust sizes, margins etc. in „New Luna Yoga Collection” section, like in the design;
• [x] 13. Turn off automatic sliding of product in „New Luna Yoga Collection” section;
• [x] 14. Adjust size and margin of Inspiration blocks in "Get inspired" section
• [x] 15. Change font, colors, button in „Subscribe to the newsletter” section - like in the design;
• [x] 16. Add Social media section in the bottom - like in the design;
• [x] 17. Add mouseover effect for buttons in "social media section”;
• [x] 18. Add underline in footer
• [x] 19. Add changes in colors of font and underline for mouseover state of links

Improvements:

• [x] Adding slider’s pagination (dots) on the slides;
• [x] Add „search" and „favorite" button in the top - it requires changes of left and right margins
• [x] When there’s no product in cart - there should be only the icon of cart in the top, without circle and number 0;
• [ ] Change animation of the top while scrolling from the top to bottom, only above the fold;
• [ ] Add one product box - like in the design;
• [ ] Add static new section „Promoted offers” with static banners below slider.

There's the view "Homepage on mobile" available here - https://www.figma.com/file/VKyqbHFI55TKIKcQlFLiVpVF/Vue-Storefront-Open-Source.

[pkarw]

Please just mark the issues you’re working on or already fixed by marking the specific points in comments

[pkarw]

@talalus

[pkarw]

Hi All! We do have a release date for 22.01 can I count on you with this issue? :) @rossmc @talalus @collymore @mercs600 @filrak

[rossmc]

@pkarw My day job has me pretty busy but will have time to work on a few more.

Below is a list of what I'm working on or have done:

• [x]  1. Remove left and right margin in the top, near the „menu” and „cart” buttons
• [x]  2. Make slider higher
• [x]  3. Change color of circle on „cart” button, like in the design;
• [x] 15. Change font, colors, button in „Subscribe to the newsletter” section - like in the design;
• [x] 16. Add Social media section in the bottom - like in the design;
• [x] 17. Add mouseover effect for buttons in "social media section”;

Improvements:

• [x] Adding slider’s pagination (dots) on the slides;
• [x] Add „search" and „favorite" button in the top - it requires changes of left and right margins
• [x] When there’s no product in cart - there should be only the icon of cart in the top, without circle and number 0;

[pkarw]

Thanks @rossmc; Great job

[pkarw]

@rossmc could you take care of the rest bullets here (4-12?) and then we'll just close the task? :)

[rossmc]

@pkarw I won't have time until next Tues/Weds, so happy for anyone else to take a few in the meantime :)

... but I'll have a look at whats left next week

[pkarw]

Sure Ross! Let's see who's willing to take this one? :)

We've 2 weeks yet till the release date, I belive we'll handle this

[mercs600]

@karolbzik I allowed myself to edit your comment and add task list, because I couldn't see what was fixed
@rossmc I applied your changes on main task list.

[mercs600]

@karolbzik
According to 12. We will have a problem with slider on mobile, it is a little buggy :/ I added issue, but I think it can be problem, because this project wasn't updated from october https://github.com/SSENSE/vue-carousel/issues/116

[mercs600]

I moved rest of improvements to new issues.