Refactor Ontoportal UI/UX

[syphax-bouazzouni]

Context

In this current first semester of 2023, we plan for our Agroportal team, to update our UI/UX. For now, it will be mostly an intern @Bilelkihal and me (@syphax-bouazzouni) that will work on it, for the next 6 months. But we are open if people want to collaborate or work with us on it in parallel.

Anyway will be happy to catch up and implement (if possible) your requirements,

Goals

Our goals are:

• Have a Fluent UI (with the limit of what is possible with our current backend)
• Simple and beautiful UI
• Have a better UX(User experience)
• Use modern technologies (remove the technical debt)
• Have composable UI

Our workflow/plan

1. List all our views ( done in this Google sheet)
2. Order the views by order of importance or easiness to update
3. For each view, we will decide on an action: Nothing, Update, or remove
4. If the action is to remove or update, we will create a GitHub issue for the details
5. If the action is to update, we create a Figma link to design and review future templates (Figma is a collaborative web application for interface design) (see our current Figma templates)
6. Implement and test the new template
7. Deploy or stage it for a specific release.

Requirements

Below are the issues opened about this subject in our local repositories (work in progress)

• Migrate our old (JS) code to Hotwire
• Have a system of components ( a design system) (see https://github.com/allmarkedup/lookbook)
• Update to Bootstrap 5
• Update Login & Register views design ontoportal-lirmm/bioportal_web_ui#130 (comment)
• Update feedback page design ontoportal-lirmm/bioportal_web_ui#151
• Refactor the browse page UI agroportal/project-management#313
• Harmonize, correct and generalize the terminology used by the user interface  agroportal/project-management#321 (comment)
• Refactor Summary page ontoportal-lirmm/bioportal_web_ui#75
• Refactor concept Details page ontoportal-lirmm/bioportal_web_ui#86
• Make the UI easily customizable (have a theme system, with a configuration file, or in real-time with a UI like this https://codepen.io/smashingmag/pen/LYNEXdw)

To be continued: need to see the ncbo issues and start a discussion related to this topic/issue

Links

• Google sheet of our list views
• FIgma Templates
• Agroportal local roadmap Refactor Ontoportal UI agroportal/project-management#287

[syphax-bouazzouni]

FYI: @ontoportal/bioportal , @ontoportal/ecoportal , @ontoportal/agroportal , @ontoportal/cognizone , @ontoportal/earthportal, @ontoportal/industryportal, @ontoportal/medportal

I will open a discussion for general discussions, here we will put only the action items (or technical discussions)

Link to the discussion #15