Skip to content
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

Redesign the header to be consistent across all pages #7316

Closed
sainak opened this issue Feb 29, 2024 · 37 comments
Closed

Redesign the header to be consistent across all pages #7316

sainak opened this issue Feb 29, 2024 · 37 comments
Assignees
Labels

Comments

@sainak
Copy link
Member

sainak commented Feb 29, 2024

Currently the header is very inconsistent and space consuming on the screen so, to fix that make the header a reusable component

current headers across pages
image
image
image
image
image
image
image
image
image

very rough sketch:

image

cc: @aparnacoronasafe

@saloni0419
Copy link
Contributor

@sainak @rithviknishad can you please assign this issue to me

@sainak
Copy link
Member Author

sainak commented Feb 29, 2024

@saloni0419 wait for a thumbs up from @aparnacoronasafe

@saloni0419
Copy link
Contributor

Sure

@ab1123
Copy link

ab1123 commented Feb 29, 2024

I would like to work on this issue. I will focus on making the header a separate component. In order to make the header reusable I would like to use the concept of barrel export with the header component. If you kindly allow me to work on this issue @sainak @aparnacoronasafe @rithviknishad

@sainak sainak added the good first issue Good for newcomers label Mar 1, 2024
@SinghYuvraj0506
Copy link
Contributor

Hi, @sainak can I work on the issue, I would create a new general header component that would fit most of the types shown, for any extra case we can create a separate functional component in the same component file

@ab1123
Copy link

ab1123 commented Mar 1, 2024

@sainak @aparnacoronasafe any updates on this issue??

@kumar11jr
Copy link

Hii @sainak can i work on this issue.

@UdaySagar-Git
Copy link
Contributor

I would like to work on this , can you please assign me

@aparnacoronasafe
Copy link
Member

Please go ahead.

However, the suggested design is missing some elements. like the "Live / Discharge" tabs.

Please be mindful of retaining all the elements in the headers

@sainak
Copy link
Member Author

sainak commented Mar 6, 2024

@saloni0419 @ab1123 @SinghYuvraj0506 @kumar11jr @UdaySagar-Git
Post your mockups and implementation plan before working on this issue

cc: @Ashesh3 @rithviknishad @nihal467

@Shahbaz898414
Copy link

Hii @sainak can i work on this issue.

@bishwas-10
Copy link

bishwas-10 commented Mar 7, 2024

hi @sainak can i work on this issue?
my implementation plan will be :

-i will make a reusable component named Header in a Common/components/ directory named Header.js file
-and another component named HeaderCountBlock in CAREUI/display/Count.js directory for no of counts of each sections like results sample like this
image
-for the header section each component like searchbox , advanced filter , switch tabs will be sent as a props and will render

and the final result may look like this
image
image
image
will be changed according to your suggestions!!

@yashdargude
Copy link

Hii @sainak , I would like to work on this , can you please assign me

@rithviknishad
Copy link
Member

hi @sainak can i work on this issue? my implementation plan will be :

-i will make a reusable component named Header in a Common/components/ directory named Header.js file -and another component named HeaderCountBlock in CAREUI/display/Count.js directory for no of counts of each sections like results sample like this image -for the header section each component like searchbox , advanced filter , switch tabs will be sent as a props and will render

and the final result may look like this image image image will be changed according to your suggestions!!

@bishwas-10 this still does not look consistent at all across all pages.

The objective is to have consistent placement of common elements like filter buttons should be present in the same location on every page. Same with Import/Export, Add (Patient | Asset | ...), etc.

@bishwas-10
Copy link

@rithviknishad ok i will work on that as i mentioned above will be changed according to your suggestion.
And it will be easy for me to work on this if you guys assign me this issue

@rithviknishad
Copy link
Member

@rithviknishad ok i will work on that as i mentioned above will be changed according to your suggestion. And it will be easy for me to work on this if you guys assign me this issue

#7316 (comment)

@SinghYuvraj0506
Copy link
Contributor

SinghYuvraj0506 commented Mar 7, 2024

@sainak @rithviknishad , i have built a mockup considering all the above conditions

Screenshot 2024-03-08 at 1 11 10 AM

From the above images of headers we currently have, I found some points :-

  1. There are some fields which are common on every header like export/import , filters , a search field, section name, counts
  2. Some CTA are present on some headers, these are different for different sections .
  3. Some pages contain some switches for parsing different data.
  4. Some pages contain more than one search fields.

The mockup solves all these problems,:

  1. The fixed fields are kept constant at one corner.
  2. These CTA can be added according to our needs and are optional, can handle more buttons too in a grid system
  3. We can fix a switch on the topmost side of the header which is optional
  4. I have provided a dropdown in the search field, where one can select the search prop to be searched and add more such search fields.

in technical aspect
Let's create a header component capable of all these features, it would have props that would control all these features like:

image

cc: @nihal467 @Ashesh3

@rithviknishad
Copy link
Member

@SinghYuvraj0506 This looks great and example code seems to be very reusable and would lead to a consistent design pattern.

Just letting you know that, we generally refrain from "Icon Only" designs. It'd be great if labels are also present along with the icons so any users who may not be able to interpret icons would also find it easy to use.

@SinghYuvraj0506
Copy link
Contributor

@rithviknishad i would use labels instead of icons, or we could even use the tip to tell about the tool over hovering it.
Also we need a responsive mobile UI , I think it would be best if we could align all the features of top row of the design I provided into hamburger menu and rest could be adjusted

@rithviknishad
Copy link
Member

But we already have a hamburger menu for mobile. Did you mean to have two hamburger menus?

@ishaanxgupta
Copy link

Hi @sainak, I would like to work on this issue, please assign.
Thanks

@manmeetnagii
Copy link
Contributor

@rithviknishad I noticed the issue about enhancing all the headers across the pages. I’d like to take up this task.

In my recent PR #9392 , I worked on enhancing the header of the Asset page, which gave me a deeper understanding of the codebase and the header structure. For this task, I will:

  • Create a reusable header component using ShadCN UI button and SearchByMultipleFields.

I would like to work on this issue.

@github-actions github-actions bot added needs-triage question Further information is requested labels Dec 13, 2024
@manmeetnagii
Copy link
Contributor

@Jacobjeevan can I create an issue for enhancing the Shifting Page Header Layout to align it with the Facilities and Patient header layouts. Also, I will ensure to use shadcn UI components.

@Jacobjeevan
Copy link
Contributor

@Jacobjeevan can I create an issue for enhancing the Shifting Page Header Layout to align it with the Facilities and Patient header layouts. Also, I will ensure to use shadcn UI components.

No need to create a new issue; I can assign this one to you 👍

@manmeetnagii
Copy link
Contributor

@Jacobjeevan sure, thank you

@manmeetnagii
Copy link
Contributor

manmeetnagii commented Dec 19, 2024

@Jacobjeevan please check this.What we can add in resources count 🤔

Desktop View

Image
Image
Image
Image
Image
Image

Mobile View

Image
Image
Image
Image
Image
Image

@rithviknishad
Copy link
Member

before you work on this, do checkout:

things have changed quite a bit over there.

@manmeetnagii
Copy link
Contributor

manmeetnagii commented Dec 19, 2024

Do I have to make changes according to these PRs' codebase? or wait to merge these

@github-actions github-actions bot added needs-triage question Further information is requested labels Dec 19, 2024
@rithviknishad
Copy link
Member

i'd recommend hold this for now, and take this up if necessary after #9262 is merged.

@rithviknishad rithviknishad added hold and removed question Further information is requested needs-triage labels Dec 20, 2024
@jeevjacobgeorge
Copy link

let me help

@manmeetnagii
Copy link
Contributor

i'd recommend hold this for now, and take this up if necessary after #9262 is merged.

@rithviknishad Okay , I will wait for the merge. However, I have gone through these PRs and set up the form-field-v1 branch locally.

@github-actions github-actions bot added needs-triage question Further information is requested labels Dec 20, 2024
@nihal467 nihal467 removed question Further information is requested needs-triage labels Dec 30, 2024
@nihal467
Copy link
Member

most of the pages are designed already, closing this issue

@github-project-automation github-project-automation bot moved this from Wishlist to Done in Care Dec 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Done