🎨 Look & Feel - Design (Tracker)

[teolemon]

What

New design (Work in Progress)

Beta Give feedback

1. NEW DESIGN: Integrate new CSS / HTML website redesign #6783
   🎨 Design 🎨 New design +2
   
2. NEW DESIGN: remaining issues #7295
   27 of 53
   CSS Hacktoberfest JavaScript Template::Toolkit good first issue 🎨 Design 🎨 New design +7

Cross-topic issues

Templatisation of all pages

Beta Give feedback

1. Use a templating system for the HTML code #2416
   Epic Outreachy Perl Template::Toolkit ✨ Feature 🎯 P1 candidate +6
   
2. Finishing templatization
3. Removing the last remnants of embedded HTML

CSS Framework

Beta Give feedback

1. Keeping Foundation up to date
2. Bump foundation-sites from 5.5.3 to 6.4.3 #3393
   dependencies +1
3. feat: Upgrade to Foundation 6.6 #2987
   CSS dependencies foundation 💥 Merge Conflicts +4
   
4. Thinking beyond Foundation (the framework seems to be loosing momentum)
5. Issues
6. Remove unneeded CSS style in user form #5287
   +0
7. CSS issue with the save button #4804
   CSS can't reproduce ✏️ Editing 🐛 bug +4

JS code

JavaScript bugs

Beta Give feedback

1. Publish personal search product ranking code as separate external JS library #5028
   JavaScript personal search ⏰ Stale ✨ Feature +4
2. The bottom of the pages are randomly cropped #4806
   CSS JavaScript ⏰ Stale 🐛 bug +4

Done

Beta Give feedback

1. Javascript error on Google Chrome: Uncaught TypeError: $(...).foundation is not a function #5279
   JavaScript foundation 🐛 bug +3
2. fix JS issue in import_file_process #5414
   +0
3. Bump cropperjs from 1.5.11 to 1.5.12 #5313
   JavaScript dependencies +2
4. Eco-Score calculation details dropdown is not fully visible on some screens #4789
   CSS JavaScript Product Page ⏰ Stale 🌱 Eco-Score 🐛 bug +6

Dark mode

Beta Give feedback

1. NEW DESIGN - Dark mode support #2407
   0 of 5
   CSS Dark mode ✨ Feature 🎨 Design 🎨 New design +5
2. feat: Make some images aware of dark mode #3911
   Dark mode logos 🎨 Design +3
   
3. feat: New Dark Scheme Part 2 #3317
   ⭐ top pull request CSS Dark mode HTML foundation 🎨 Design 💥 Merge Conflicts +7
   
4. Issue with the Environment tab in dark mode & light mode #4976
   environment 🌱 Eco-Score 📖 Knowledge Panels 🤳🥫 blocking mobile apps +4

Onboarding

Beta Give feedback

1. Add first time onboarding on various components of the site #8886
   onboarding ⏰ Stale 🏭 Producers Platform - onboarding +3

Components

Buttons

Beta Give feedback

1. Adopt the color and radius of the app
2. Button should have coherent sizes
3. Buttons should always have a text AND a material design icon

Fields

Beta Give feedback

1. Fields should always drive you to make the right input
2. JS checks for fields
3. Add Hints to fields

Cards

Navigation bar (top)

Beta Give feedback

1. We should remove the duplicates for advanced search

Landing page

Beta Give feedback

1. Create a web landing page for never seen before users #1686
   onboarding ✨ Feature 🎨 Design 🎯 P1 🎯 P1 candidate 👍 Top 10 Issue! +6

Common User interface

Beta Give feedback

1. Put menus, user menus… in more conventional places
2. User management is on the top right of the screen
3. Additional menu on the top left (hamburger menu)
4. Consider a fixed bottom bar on the mobile web

Content pages

Beta Give feedback

1. Remove the /lang directory #5158
   static content +1
2. test: GitHub action to validate HTML in the static files #4471
   HTML static content 🧪 tests +3
   

Promotion system

Beta Give feedback

1. Insert a DriveOFF extension promo in the French Eco-Score page #4878
   static content ⏰ Stale ✨ Feature 🌱 Eco-Score 🛒 DriveOFF +5

Product page

Beta Give feedback

1. 📖 Knowledge panels (Tracker) #5493
   0 of 67
   Epic ♞ Epic 📖 Knowledge Panels +3

Product lists

Beta Give feedback

1. Mobile Layout for Product List (css fix) #3420
   CSS product lists +2

Search

Beta Give feedback

1. 🔎 Search (Tracking bug) #5492
   0 of 19
   Epic personal search ⏰ Stale 🔎 Search 🔎 Advanced Search +5

Part of

• 🎯 What can I work on ? #5529

[github-actions]

This issue is stale because it has been open 90 days with no activity.

[mundume]

hello @teolemon can I work on the whole user experience..?

[alexgarel]

@nzaih1999 (sorry for latency), you are welcome. Maybe you should join on slack. Also be aware we have a redesign in progress: #6783 so your reflection should start from there !

[teolemon]

@Valimp

[github-actions]

This issue has been open 90 days with no activity. Can you give it a little love by linking it to a parent issue, adding relevant labels and projets, creating a mockup if applicable, adding code pointers from https://github.com/openfoodfacts/openfoodfacts-server/blob/main/.github/labeler.yml, giving it a priority, editing the original issue to have a more comprehensive description… Thank you very much for your contribution to 🍊 Open Food Facts