search

AI4HF / passport-web

The user interface of AI4HF Product Passport
0 stars 0 forks source link

Study Page Implementation and Adapting #2

Closed KeremHmd closed 4 months ago

KeremHmd commented 5 months ago
dogukan10 commented 4 months ago

There is a typo in StudyPageComponent. Here is the error:

Error: Module not found: Error: Can't resolve 'passport-web/src/app/components/study-page/study-page.component.css?ngResource' in 'passport-web'

Error: The loader "passport-web/src/app/components/study-page/study-page.component.css" didn't return a string.

dogukan10 commented 4 months ago

While http://localhost:4200/study_page is open, I refresh the page and the left menu and logout button is gone.

image

dogukan10 commented 4 months ago

Let's reimplement the header part using Bootstrap Navbar: https://getbootstrap.com/docs/4.2/components/navbar/#color-schemes

We should have the same design as the mockup. AI4HF icon if possible, the text and at the end, there is a logout button. You can use a proper background color for the header as well.

dogukan10 commented 4 months ago

Too much space above the study table. Let's get rid of it.

dogukan10 commented 4 months ago

Rename the buttons as follows: Delete, Update, Create image

Further, let's display the create button at first and if the user selects a study, display the other buttons and hide the create button.

dogukan10 commented 4 months ago

I think it would be good if we have some borders and colorful headers in the study table.

dogukan10 commented 4 months ago

Please refer to the following example: https://getbootstrap.com/docs/4.2/examples/dashboard/# to implement the sidebar menu. It should extend to the end of page. You can add some icons as well if you can find some appropriate icons in the Bootstrap, if not skip it.

dogukan10 commented 4 months ago

Add some top margin between the previous/next buttons and the table.