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.

Sign up for GitHub

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

Jump to bottom

Changed components to use Carbon grid instead of inlineDiv #1614

Open
wants to merge 35 commits into
base: develop
Choose a base branch
from
Open

Changed components to use Carbon grid instead of inlineDiv #1614

wants to merge 35 commits into from

Conversation

peach280
Copy link
Contributor

Pull Requests Requirements

  • The PR title includes a brief description of the work done, including the
    Issue number if applicable.
  • The PR title follows conventional commit label standards.
  • The changes confirm to the OpenElis Global x3 Styleguide and design
    documentation.
  • The changes include tests or are validated by existing tests.
  • I have read and agree to the Contributing Guidelines of this project.

Summary

Fixes #978
Almost all components have been changes to use carbon grid instead of inlineDiv

Screenshots

The display is same as before but more responsive.

@peach280
Changed components to use Carbon grid instead of inlineDiv
9cf3d86 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Merge branch 'develop' into Carbon
cd7bf0a
@peach280
Changed components to use Carbon grid instead of inlineDiv
6dd95e5 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Merge branch 'Carbon' of https://github.com/peach280/OpenELIS-Global-2 …
4b5deb6 
…into Carbon
@peach280
Changed components to use Carbon grid instead of inlineDiv
1423f2f 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Changed components to use Carbon grid instead of inlineDiv
06dbe5b 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Changed components to use Carbon grid instead of inlineDiv
7616e4c 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Changed components to use Carbon grid instead of inlineDiv
b96b455 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Changed components to use Carbon grid instead of inlineDiv
df81010 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Changed components to use Carbon grid instead of inlineDiv
c3266c0 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Changed components to use Carbon grid instead of inlineDiv
00b9d32 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
mozzy11
mozzy11 reviewed Feb 27, 2025
View reviewed changes
frontend/src/components/addOrder/SampleType.js
onChange={(date) => handleCollectionDate(date)}
value={sampleXml.collectionDate}
labelText={intl.formatMessage({ id: "sample.collection.date" })}
className="inputText"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you get rid of this class , and we purly rely on carbon grid for the layout?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will change it surely.

mozzy11
mozzy11 reviewed Feb 27, 2025
View reviewed changes
frontend/src/components/addOrder/SampleType.js
}
onChange={(time) => handleCollectionTime(time)}
value={sampleXml.collectionTime}
className="inputText"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

get rid of the css class here

@mozzy11
Copy link
Collaborator

mozzy11 commented Feb 27, 2025

Thanks @peach280 .
you need to attach screen shots of all the affected pages to ensure we dont break the layout

@peach280
Copy link
Contributor Author

pathology
immuno
reflexrule
patientMenu
billing
sampleType

mozzy11
mozzy11 reviewed Mar 25, 2025
View reviewed changes
frontend/src/components/addOrder/SampleType.js Outdated
disallowFutureDate={true}
/>
<Grid>
<Column style={{ margin: 0 }} lg={16} md={8} sm={4}>
Copy link
Collaborator

@mozzy11 mozzy11 Mar 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did you notice you changed the layout of the componenets here ??

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I have fixed the layout now.

mozzy11
mozzy11 reviewed Mar 25, 2025
View reviewed changes
frontend/src/components/addOrder/OrderEntryAdditionalQuestions.js Outdated
{programs.length > 0 && (
<div className="inputText">
<Grid>
<Column lg={8} md={4} sm={4}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you also have a broken layout here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed it

@mozzy11
Copy link
Collaborator

mozzy11 commented Mar 25, 2025

Hello @peach280 . Thanks for the PR.
Please ensure you dont break the existing Layout.

Ensure to add the screen shots before and after for each page you have made changes into

@peach280
Copy link
Contributor Author

I am taking 'before' and 'after' screenshots. I will complete the process for all modified pages and add them to the PR description.

@peach280
Updated
41ebf0b 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Copy link
Contributor Author

I have made the changes to ensure that the layout doesn't break.

@peach280
Copy link
Contributor Author

peach280 commented Mar 25, 2025 •
edited
Loading

Here are the before and after images:
I have observed that the layout has changed a little bit in some pages. I will be ready to make any corrections if needed.

1) Add Sample
Before:
addsamplebefore
After:
addorderafter

2)Additional questions
Before:
additionalquestionsbefore
After:
additionalquestionsafter

3)Billing
Before:
billingbefore
After:
billingafter

4)Menu Utils
Before:

globalmenubefore

patientMenubefore
nonconformitybefore

After:

globalmenuafter
nonconformityafter
patientMenuafter
studymenuafter

5)Reflex
Before:
reflexrulebefore
After:
reflexruleafter

6)Immunohistochemistry
Before:
immunobefore
After:
immunoafter

7)Modify order
Before:
modifyorderbefore
After:
modifyorderafter

8)Pathology
Before:
pathologybefore
After:
pathologyafter

peach280 added 2 commits March 26, 2025 04:51
@peach280
Fixed the layout
76d21b6 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Merge branch 'Carbon' of https://github.com/peach280/OpenELIS-Global-2 …
a542ddb 
…into Carbon
@peach280
Copy link
Contributor Author

Hi @mozzy11, In immunohistochemistry and pathology pages, after these changes Column by default arranges elements like Filters,My Cases vertically so should I change that?

peach280 added 3 commits March 26, 2025 05:11
@peach280
Fixed the layout
c96cd41 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Merge branch 'develop' into Carbon
1b2375f
@peach280
Merge branch 'develop' into Carbon
79e1ab2
@mozzy11
Copy link
Collaborator

mozzy11 commented Mar 28, 2025 •
edited
Loading

You should rightly use the Coloum element.
Columns can arrage components vertivaly or horizontaly when righly used

ie compoenets below would be arragened horizontal. see carbon Grid

<Grid> 
     <Column lg={8}>
     </Column>
     <Columnlg={8}>
     </Column>
 </Grid>

@peach280
Copy link
Contributor Author

Thanks @mozzy11 I will make the changes soon and commit them

peach280 added 3 commits March 28, 2025 15:19
@peach280
Updated pathology and immuno pages
a383235 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Fixed the layout
1c8f8c8 
Signed-off-by: Vaishnavi Bhandari <vaishnavibhandari.128@gmail.com>
@peach280
Merge branch 'Carbon' of https://github.com/peach280/OpenELIS-Global-2 …
34caa50 
…into Carbon
@peach280
Copy link
Contributor Author

Hi @mozzy11, I have corrected the layout of immunohistochemistry and pathology pages and I have also fixed the layout of modify order for both additional questions and add order.
Here are the updated screenshots:

editordera
editorderb

pathologyafter

immunoafter

@peach280
Copy link
Contributor Author

peach280 commented Apr 4, 2025 •
edited
Loading

Hi @mozzy11 , are there any changes that I can make to improve this PR? Please provide your feedback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mozzy11 mozzy11 mozzy11 left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Use Carbon Grid for Layout instead of Using custom css classes
2 participants
@peach280 @mozzy11