Skip to content

Commit 2dd0b8d

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

File tree

4 files changed

+72
-36
lines changed

4 files changed

+72
-36
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

+27-26
Original file line numberDiff line numberDiff line change
@@ -84,38 +84,39 @@ const PatientSearch: React.FC<PatientSearchProps> = ({ hidePanel }) => {
8484
<Search
8585
className={styles.patientSearchInput}
8686
onChange={($event) => handleChange($event.target.value)}
87-
placeholder={t('searchForPatient', 'Search for a patient')}
87+
placeholder={t('searchForPatient', 'Search for a patient by name or identifier number')}
8888
labelText=""
8989
ref={searchInput}
9090
autoFocus={true}
91-
size="xl"
9291
/>
9392

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} />
93+
<div className={styles.searchResultsContainer}>
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} />
100+
</div>
100101
</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-
)}
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+
)}
119+
</div>
119120
</div>
120121
);
121122
};

‎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.