Skip to content

Commit e927504

Browse files
donaldkibetdonaldkibet
committedJun 23, 2021
Fix patient search results positioning
1 parent e83dbac commit e927504

File tree

4 files changed

+76
-37
lines changed

4 files changed

+76
-37
lines changed
 

‎packages/esm-patient-search-app/src/patient-search-result/patient-search-result.scss

+10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
@import "carbon-components/scss/globals/scss/typography.scss";
2+
@import "~@openmrs/esm-styleguide/src/vars";
23

34
.patientChart {
45
text-decoration: none;
56
cursor: pointer;
67
}
8+
:global(.omrs-breakpoint-gt-tablet) .patientChart {
9+
background-color: $ui-02;
10+
margin: 0rem 1rem;
11+
}
712

813
.container {
914
border-bottom: 0.063rem solid $ui-03;
1015
}
1116

17+
:global(.omrs-breakpoint-gt-tablet) .container {
18+
padding: 0rem 1rem;
19+
}
20+
21+
1222
.patientBanner {
1323
display: flex;
1424
}

‎packages/esm-patient-search-app/src/patient-search/patient-search.component.tsx

+31-27
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
22
import { useTranslation, Trans } from 'react-i18next';
33
import debounce from 'lodash-es/debounce';
44
import isEmpty from 'lodash-es/isEmpty';
5-
import { usePagination } from '@openmrs/esm-framework';
5+
import { useLayoutType, usePagination } from '@openmrs/esm-framework';
66
import PaginationNav from 'carbon-components-react/es/components/PaginationNav';
77
import Search from 'carbon-components-react/es/components/Search';
88
import { Tile } from 'carbon-components-react/es/components/Tile';
@@ -25,6 +25,8 @@ interface PatientSearchProps {
2525
}
2626

2727
const PatientSearch: React.FC<PatientSearchProps> = ({ hidePanel }) => {
28+
const layout = useLayoutType();
29+
const isTablet = React.useMemo(() => layout === 'tablet', [layout]);
2830
const { t } = useTranslation();
2931
const [searchTerm, setSearchTerm] = React.useState('');
3032
const [emptyResult, setEmptyResult] = React.useState(false);
@@ -84,38 +86,40 @@ const PatientSearch: React.FC<PatientSearchProps> = ({ hidePanel }) => {
8486
<Search
8587
className={styles.patientSearchInput}
8688
onChange={($event) => handleChange($event.target.value)}
87-
placeholder={t('searchForPatient', 'Search for a patient')}
89+
placeholder={t('searchForPatient', 'Search for a patient by name or identifier number')}
8890
labelText=""
8991
ref={searchInput}
9092
autoFocus={true}
91-
size="xl"
93+
size={isTablet ? 'xl' : 'lg'}
9294
/>
9395

94-
{!isEmpty(searchResults) && (
95-
<div className={styles.searchResults}>
96-
<p className={styles.resultsText}>{t('patientsFound', { count: searchResults.length })}</p>
97-
<PatientSearchResults hidePanel={hidePanel} searchTerm={searchTerm} patients={results} />
98-
<div className={styles.pagination}>
99-
<PaginationNav itemsShown={resultsPerPage} totalItems={totalPages} onChange={handlePageChange} />
96+
<div className={styles.searchResultsContainer}>
97+
{!isEmpty(searchResults) && (
98+
<div className={styles.searchResults}>
99+
<p className={styles.resultsText}>{t('patientsFound', { count: searchResults.length })}</p>
100+
<PatientSearchResults hidePanel={hidePanel} searchTerm={searchTerm} patients={results} />
101+
<div className={styles.pagination}>
102+
<PaginationNav itemsShown={resultsPerPage} totalItems={totalPages} onChange={handlePageChange} />
103+
</div>
100104
</div>
101-
</div>
102-
)}
103-
{emptyResult && (
104-
<div className={styles.searchResults}>
105-
<p className={styles.resultsText}>{t('noResultsFound', 'No results found')}</p>
106-
<Tile className={styles.emptySearchResultsTile}>
107-
<EmptyDataIllustration />
108-
<p className={styles.emptyResultText}>
109-
{t('noPatientChartsFoundMessage', 'Sorry, no patient charts have been found')}
110-
</p>
111-
<p className={styles.actionText}>
112-
<span>{t('trySearchWithPatientUniqueID', "Try searching with the patient's unique ID number")}</span>
113-
<br />
114-
<span>{t('orPatientName', "OR the patient's name(s)")}</span>
115-
</p>
116-
</Tile>
117-
</div>
118-
)}
105+
)}
106+
{emptyResult && (
107+
<div className={styles.searchResults}>
108+
<p className={styles.resultsText}>{t('noResultsFound', 'No results found')}</p>
109+
<Tile className={styles.emptySearchResultsTile}>
110+
<EmptyDataIllustration />
111+
<p className={styles.emptyResultText}>
112+
{t('noPatientChartsFoundMessage', 'Sorry, no patient charts have been found')}
113+
</p>
114+
<p className={styles.actionText}>
115+
<span>{t('trySearchWithPatientUniqueID', "Try searching with the patient's unique ID number")}</span>
116+
<br />
117+
<span>{t('orPatientName', "OR the patient's name(s)")}</span>
118+
</p>
119+
</Tile>
120+
</div>
121+
)}
122+
</div>
119123
</div>
120124
);
121125
};

‎packages/esm-patient-search-app/src/patient-search/patient-search.scss

+34-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,31 @@
11
@import "../root.scss";
22
@import "~@openmrs/esm-styleguide/src/vars";
33

4+
.searchResultsContainer {
5+
display: flex;
6+
justify-content: center;
7+
position: fixed;
8+
width: 100vw;
9+
top: 3rem;
10+
bottom: 0;
11+
left: 0;
12+
right: 0;
13+
background-color:$ui-02;
14+
padding: 0rem 1rem;
15+
}
16+
17+
:global(.omrs-breakpoint-gt-tablet) .searchResultsContainer {
18+
padding: 0;
19+
background-color:var(--omrs-color-bg-low-contrast);
20+
}
21+
422
.searchResults {
5-
margin-top: 3rem;
6-
width: 100%;
7-
padding: 1rem;
8-
background: $ui-background;
9-
min-height: 100vh;
10-
position: relative;
23+
height: 100%;
24+
width: 100vw;
25+
}
26+
27+
:global(.omrs-breakpoint-gt-tablet) .searchResults {
28+
width: 50vw;
1129
}
1230

1331
.searchTerm {
@@ -21,6 +39,11 @@
2139
color: $text-02;
2240
border-bottom: 0.063rem solid $ui-03;
2341
padding: 0.5rem 0rem;
42+
43+
}
44+
45+
:global(.omrs-breakpoint-gt-tablet) .resultsText {
46+
margin: 1rem;
2447
}
2548

2649
.patientSearchInput {
@@ -77,9 +100,6 @@
77100
width: 100vw;
78101
}
79102

80-
:global(.omrs-breakpoint-gt-tablet) .patientSearchInput input {
81-
height: 2.75rem;
82-
}
83103
.patientSearch {
84104
width: 100%;
85105
display: flex;
@@ -90,3 +110,8 @@
90110
margin-top: 1rem;
91111
padding: 3rem 0rem;
92112
}
113+
114+
:global(.omrs-breakpoint-gt-tablet) .emptySearchResultsTile {
115+
margin: 1rem;
116+
background-color: $ui-02;
117+
}

‎packages/esm-patient-search-app/translations/en.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
"orPatientName": "OR the patient's name(s)",
55
"patientsFound": "Found {count, plural, one{{count} patient} other{{count} patients}}",
66
"patientsFound_plural": "",
7-
"searchForPatient": "Search for a patient",
7+
"searchForPatient": "Search for a patient by name or identifier number",
88
"trySearchWithPatientUniqueID": "Try searching with the patient's unique ID number"
99
}

0 commit comments

Comments
 (0)
Failed to load comments.