Skip to content

style: ui restyle #1860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

style: ui restyle #1860

wants to merge 7 commits into from

Conversation

nitrosx
Copy link
Member

@nitrosx nitrosx commented May 23, 2025

Description

This PR includes some of the restyle of the header and the buttons in the datasets list, following the suggestion from ESS UI/EX expert.

Motivation

In the last few years of the project, it has become increasingly evident that SciCat FE needs to evolve, adopt industry UX standards and become a mature tool.
This PR includes the attempts to improve the UI

Changes:

Please provide a list of the changes implemented by this PR

  • header components
  • datasets filters and search components

Tests included

  • Included for each change/fix?
  • Passing? (Merge will not be approved unless this is checked)

Documentation

  • swagger documentation updated [required]
  • official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

  • Does it require a specific version of the backend
  • which version of the backend is required:

Summary by Sourcery

Restyle the application header and dataset controls to improve UX and align with updated UI standards

Enhancements:

  • Update header to use dynamic logos from config, display siteTitle, reorganize main and user menus, and replace cart icon with consistent styling
  • Add secondary-colored "Clear" buttons and reorder actions on the full-text search bar and datasets filter panel
  • Adjust breadcrumb, search card, and dataset filter component margins and paddings for a tighter layout
  • Extend app configuration to include siteTitle and siteSciCatLogo options and update default user avatar asset path

@henrikjohansson712

This comment was marked as outdated.

@nitrosx
Copy link
Member Author

nitrosx commented May 23, 2025

Following are some screenshots of the first draft.
Screenshot from 2025-05-23 21-31-07

@nitrosx
Copy link
Member Author

nitrosx commented May 23, 2025

Screenshot from 2025-05-23 21-31-33

@nitrosx
Copy link
Member Author

nitrosx commented May 23, 2025

Screenshot from 2025-05-23 21-31-57

@nitrosx nitrosx changed the title UI restyle style: UI restyle May 23, 2025
@nitrosx nitrosx changed the title style: UI restyle style: ui restyle May 23, 2025
@emigun
Copy link
Member

emigun commented May 26, 2025

Screenshot from 2025-05-23 21-31-33

How will the user know that you can click here to show this menu?

@nitrosx
Copy link
Member Author

nitrosx commented May 26, 2025

@emigun good questions....
The latest version should answer your question.
...happy to brainstorm anyway.

@nitrosx
Copy link
Member Author

nitrosx commented May 26, 2025

image

@nitrosx
Copy link
Member Author

nitrosx commented May 26, 2025

The hamburger menu icon allow the user to access the menu, the scicat logo will be configurable to point the main page for the facility (aka Datasets, Proposals, etc) and the facility logo can be set to point to the facility website.

@cfelder
Copy link
Contributor

cfelder commented Jun 27, 2025

Before:
Screenshot 2025-06-27 at 14 43 56

After:
Screenshot 2025-06-27 at 14 44 56

With this patch we loose some theming of the title bar (dark blue vs. white), especially resulting in not seeing our site-header-logo.png b/c it is white on transparent background.

Screenshot 2025-06-27 at 14 46 46

otherwise looking forward to this, especially the new burger menu on the left 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants