O3-2895: Fix Layout of Patient Search Patient Banner #1000
Conversation
|
Size Change: +14 B (0%) Total Size: 2.96 MB ℹ️ View Unchanged
|
|
See my comments, but here are a few "before" screenshots (note how overlay is wider than normal, how the "show details" is not always displayed, and when it does it makes the overlay even wider)
and one "after" screen shot:
|
| @@ -30,7 +30,7 @@ export const useCalendarDistribution = ( | |||
| ) => { | |||
| const appointmentSummary = useAppointmentSummary(new Date(appointmentDate), serviceUuid); | |||
| const monthlyData = getMonthlyCalendarDistribution(new Date(appointmentDate), appointmentSummary) ?? []; | |||
| return distributionType === 'month' ? monthlyData : monthlyData.slice(0, 7); | |||
| return distributionType === 'month' ? monthlyData : monthlyData.slice(0, 6); | |||
There was a problem hiding this comment.
This is kind of strange, but the view of 7 days of workload distribution is too big for the 420px view, so I changed the "weekly" view to show only 6. This seems acceptable in the short-term because it really isn't a weekly view (rather it shows "the next x days out from the selected appointment date") and likely needs to be improved in the future. (I thought I wrote a ticket but can't find it now)
| <div className={styles.identifiers}> | ||
| {patient.identifiers?.length ? patient.identifiers.map((i) => i.identifier).join(', ') : '--'} | ||
| <div> | ||
| <div className={styles.identifiers}> |
There was a problem hiding this comment.
see comments below and on the left for details.
| @@ -135,35 +145,13 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid | |||
| </CustomOverflowMenuComponent> | |||
| </div> | |||
| )} | |||
There was a problem hiding this comment.
So the below code had some strange logic to only show the show details for a patient if they were deceased or if they didn't have an active visit. Not sure what the logic was meant to be, but I'm assuming it was just "don't show the start visit button if the button is button is deceased or already had an active visit", so I pulled all the show details button out of this if block.
I also deduplicated and moved it up, because as it currently stands it was expanding the view (see screen shots) or pushing all the patient information to the left and eating up real estate which didn't really work in this 420px view (see my comments/questions above about the use of this patient banner). The way I have it now it appears below all details, which increases the vertical spacing, but I can try to narrow that down a bit until someone with better layout skills than I can reformat.
Also (as in the above) I'm wondering if we want to remove all the action/details/etc buttons from this patient banner (see above). Right now the "Actions" button causes similar layout issues, and I suspect that the "start visits" will do the same.
| @@ -9,7 +9,6 @@ import { | |||
| formatDate, | |||
There was a problem hiding this comment.
Broad question is how this patient-banner differs from the patient-banner in the patient-chart ESM? My guess would be that patient-chart is a broad banner to use for the patient chart as a header, while this is one specifically for search results? If so, can I suggest we remove all the action elements (start visit, show details, and the actions menu) from this banner?
Also, this banner can be used n an overlay context, so needs to work well in a 420px context (we have a compact patient search but that is only meant to be used from the navigation bar). So if we do want to keep the above action elements we need to make sure they are formatted properly in a 420px view.
(I'll attach some screen shots to to the overall PR)
| @@ -90,6 +90,7 @@ | |||
| @include type.type-style('body-compact-02'); | |||
| color: $text-02; | |||
| margin-top: 0.375rem; | |||
| text-align: left; | |||
There was a problem hiding this comment.
The demographics and the identifiers were bought center aligned (see screen shots) this and the line below just left-aligns them.
| @@ -8,7 +8,7 @@ | |||
| top: spacing.$spacing-09; | |||
| right: 0; | |||
| height: 100vh; | |||
| min-width: 33rem; | |||
| width: 26.25rem; | |||
There was a problem hiding this comment.
Changing the overlay to the standard 420px workspace/overlay size
mogoodrich
requested review from
jwnasambu,
ibacher,
denniskigen,
vasharma05,
mseaton,
chibongho,
cioan and
brandones
|
@mogoodrich Could we indent the overlay heading with a horizontal margin of 1rem? It'd look a lot better if it weren't flush with the left border of the overlay. Also, the Close button on the overlay should be flush with the right border. |
Yep, @denniskigen ... the overlay layout is somewhat screwed up. The coloring of the button is wrong, too, as you can tell. I started looking into that this morning but wasn't immediately able to track down how to fix and wanted to get this PR out this week... I can either fix in a follow-on commit or ticket. |
|
@denniskigen are you okay with the PR if the overlay heading is ticketed separately? @ibacher @brandones do you want to add any thoughts before I merge? |
|
Going to merge this in because I'm running into some weird layout issues with another commit and need to see if this fixes it. Post commit reviews still welcome. |
Requirements
Summary
Screenshots
Related Issue
Other