NEW DESIGN: remaining issues

[alexgarel]

We are implementing a complete redesign of the OFF website based on the design of the new app. The new design is available on Figma here: https://www.figma.com/file/Qg9URUyrjHgYmnDHXRsTTB/New-website-design-(2022)-(Quentin)?node-id=169%3A4043

This issue tracks small problems still to be fixed in redesign2 branch.

The redesign is now live on https://world.openfoodfacts.org
(Before, The redesign2 branch is regularly deployed to the dev server: https://world.openfoodfacts.dev (login and password: off )

To contribute:

• ideally, create a local dev environment by following those instructions: https://github.com/openfoodfacts/openfoodfacts-server/blob/main/docs/introduction/dev-environment-quick-start-guide.md
• (alternatively, you could try to fix those issues in a copy of the pages on https://world.openfoodfacts.dev or by using the web inspector)
• create a new branch from the redesign2 branch.

NICE TO HAVE

Beta Give feedback

1. NEW DESIGN: products not aligned on first row and last row of lists of products #7309
   Hacktoberfest Template::Toolkit ⏰ Stale 🎨 Design 🎨 New design +5
   
2. NEW DESIGN: Create knowledge panels for vitamins and minerals #7333
   vitamins 🎨 Design 🎨 New design 📖 Knowledge Panels +4
3. NEW DESIGN: Add packaging information text to packaging knowledge panel #7334
   🎨 Design 🎨 New design 📖 Knowledge Panels 📦 Packaging +4
4. NEW DESIGN: Update tables styles according to Figma mockup #7411
   CSS Hacktoberfest good first issue ⏰ Stale 🎨 Design 🎨 New design +6
5. NEW DESIGN: Implement new front page according to Figma mockup #7413
   CSS good first issue ⏰ Stale 🎨 Design 🎨 New design +5
6. NEW DESIGN: Have the "modify" button always visible (on the right of section selection) #7476
   🎨 New design 🛣️ Road to scores +2
7. NEW DESIGN - Dark mode support #2407
   0 of 5
   CSS Dark mode 🎨 Design 🎨 New design +4
8. NEW DESIGN - The arrow is not centered in Manage image button #7489
   CSS good first issue ✏️ Editing 🎨 Design 🎨 Needs design 🎨 New design 🐛 bug +7
   
9. NEW DESIGN - Personal search settings are too narrow in mobile mode #7492
   CSS good first issue personal search ⏰ Stale 🎨 New design 🐛 bug +6
   
10. NEW DESIGN - Product name is truncated (JS disabled only ?) #7502
    CSS good first issue product lists ⏰ Stale 🎨 New design 🐛 bug +6
    
11. NEW DESIGN : Leaflet map goes above content. #9118
    CSS HTML JavaScript good first issue 🐛 bug +5
    
12. NEW DESIGN - Not enough padding between tabs in edit mode in responsive view #7495
    CSS good first issue ✏️ Editing 🎨 New design 🐛 bug +5
13. NEW DESIGN - Long username should be wrapped in the data source card #7496
    CSS good first issue product history ⏰ Stale 🎨 New design +5
14. NEW DESIGN - The action menu should be on the left of the Open Food Facts logo when scrolling #7497
    CSS good first issue top navigation ⏰ Stale 🎨 New design +5
15. NEW DESIGN - Content should have some left and right margins in responsive mode #7498
    CSS footer good first issue static content ⏰ Stale 🎨 New design +6
    
16. NEW DESIGN - We should have nicer, looking titles, possibly reusing the ones in the install the app promo (and like in our presentations) #7500
    CSS good first issue ⏰ Stale 🎨 Design 🎨 New design +5
    
17. NEW DESIGN - We should try to display cards when JavaScript is disabled #7503
    CSS JavaScript good first issue product lists ⏰ Stale 🎨 New design +6
18. NEW DESIGN - We should try to avoid a blank when JavaScript is disabled #7504
    CSS JavaScript good first issue top navigation ⏰ Stale 🎨 New design +6
19. NEW DESIGN - Bring back the unselect image buttons #7519
    Product Page good first issue inline edit ⏰ Stale 🎨 Mockup available 🎨 New design 🖼️ Images +7
20. NEW DESIGN - Bring back the inline editing of ingredients #7520
    Product Page good first issue inline edit ⏰ Stale 🎨 New design 🥗 Ingredients +6
21. NEW DESIGN - Add a edit section for the front photo
22. NEW DESIGN - Add examples for all fields
23. NEW DESIGN - Can the user menu be accessible all the time ?
24. NEW DESIGN - Reintroduce → products from the mobile app that need to be completed #7523
    good first issue homepage ⏰ Stale 🎨 New design +4
25. NEW DESIGN - Reintroduce optional pagination above product list
26. Create a new layout for the Contribute page
27. Create a new layout for the Discover page
28. Create new images for the Contribute page
29. Create new images for the Discover page
30. Ensure other projects work well the new design
31. Commit new logos for Open Beauty Facts, Open Pet Food Facts, Open Products Facts

FIXED

Beta Give feedback

1. Reintroduce the checkbox to show the donation banner again if you collapsed it #7621
   ⏰ Stale 🎁 donations 🎨 New design 🎯 P0 +4
2. NEW DESIGN: in product list, product without images have a white on white silhouette icon #7485
   +0
3. NEW DESIGN - The go up button in edit mode should not overlap with the change summary #7494
   CSS good first issue product history responsive ux ✏️ Editing 🎨 New design 🐛 bug +7
4. NEW DESIGN - Capitalization issue in the sign-up form #7488
   CSS Signup Page Template::Toolkit Translations good first issue non tech ⏲️ 5 minute fix 🎨 New design 🐛 bug +9
5. NEW DESIGN - Capitalization issue in the user page #7491
   Admin tools CSS good first issue non tech 🎨 New design 🐛 bug 👥 Users +7
6. NEW DESIGN - The product name is scattered in responsive mode on product lists #7499
   CSS good first issue product lists 🎨 New design 🐛 bug +5
   
7. NEW DESIGN - We should add back arrow in the menu in responsive mode #7501
   CSS good first issue top navigation 🎨 New design 🐛 bug +5
8. NEW DESIGN - Reintroduce product addition from the web ? #7521
   good first issue product addition 🎨 New design +3
   
9. NEW DESIGN - When trying to delete an image, the image is not highlighted when clicked #7522
   ⭐ top issue Admin tools good first issue ✏️ Editing 🎨 New design 🖼️ Images +6
10. New design: it's not possible anymore to click on the images to zoom them #7624
    ⭐ 🐛 top bug ⭐ top issue regression 🎨 New design 🎯 P0 🐛 bug +6
11. NEW DESIGN: barcode missing #7620
    ⭐ 🐛 top bug 🎨 New design 🐛 bug +3
12. NEW DESIGN - The Sort icon is too small in responsive mode #7505
    CSS good first issue icons 🎨 New design +4
13. NEW DESIGN: Move donation banner close button to top right #7412
    CSS Hacktoberfest good first issue ✨ Feature 🎨 Design 🎨 New design +6
    
14. NEW DESIGN: Product page navigation tabs don't work #7336
    +0
15. NEW DESIGN: Add a way to display product images (front, ingredients, nutrition, packaging) through knowledge panels #7320
    +0
    
16. NEW DESIGN: On website, put ingredients knowledge panel before nutrition on product page #7335
    +0
17. NEW DESIGN: Define and implement color scheme for text pages #7310
    🎨 Design 🎨 New design +2
    
18. NEW DESIGN: front product photo edit should be above product characteristics #7518
    good first issue +1
19. NEW DESIGN: Host Google font for Material icons locally #7474
    icons 🎨 New design +2
20. NEW DESIGN: bad colors and icon position in user menu #7306
    🎨 Design 🎨 New design +2
21. NEW DESIGN: Improve footer for pages smaller than the screen #7410
    CSS Hacktoberfest good first issue 🎨 Design 🎨 New design +5
    
22. NEW DESIGN - Not enough padding between the change summary, and the cancel, or confirm button in edit mode #7493
    CSS good first issue product history 🎨 New design 🐛 bug +5

Part of

• 🎨 Look & Feel - Design (Tracker) #5513

[stephanegigandet]

Some information on which files to modify:

• /scss/ contains all the SCSS files from which CSS files are generated. We use the Foundation 5.5.3 framework.
• /templates contains HTML templates
• /templates/web/common/site_layout.tt.html is the main template for all pages
• /templates/web/pages contain templates for specific pages (e.g. product page, forms etc.)
• on the product page, some content is generated from knowledge panels, the corresponding template is in /templates/panels/panel.tt.html

[aleene]

*I can add multiple tabs for the same language in the properties. Seems more like that the tab was doubled when adding a new language.

• I can not edit the product name in the new language.

[aleene]

When editing a new language there is no easy access the the FOP image. I have to scroll down to the ingredients, or switch back to the main language tab.

[aleene]

Adding a language for image or ingredients does not make appear a tab.

[aleene]

• Can not cancel an edit, nothing happens when I press the button.

[teolemon]

@raphael0202

• weird: fix: Redesign fixes - product edit cancel button, creative commons link, product silhouette #7487
• filed: NEW DESIGN - When trying to delete an image, the image is not highlighted when clicked #7522

[teolemon]

@Valimp celle avec les issues du redesign