Fixed the header responsiveness

I-TECH-UW · Oct 9, 2024 · aad8d4e · aad8d4e
1 parent 369b041
commit aad8d4e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/frontend/src/components/common/PatientHeader.js b/frontend/src/components/common/PatientHeader.js
@@ -25,13 +25,13 @@ const PatientHeader = (props) => {
   } = props;
   const patternUrl = GeoPattern.generate(id).toDataUri();
   return (
-    <Grid fullWidth={true}>
-      <Column lg={16} md={8} sm={4}>
-        <Section>
+    <Grid fullWidth={false}>
+      <Column lg={16} md={8} sm={4} >
+         <Section>
           <Section>
             {id ? (
               <div className={className}>
-                <Grid>
+
                   <Column lg={4} md={2} sm={2}>
                     <div
                       className={
@@ -55,7 +55,7 @@ const PatientHeader = (props) => {
                       />
                     </div>
                   </Column>
-                  <Column lg={10} md={5} sm={2}>
+                  <Column lg={14} md={5} sm={2}>
                     <div className="patient-name">
                       {patientName ? patientName : lastName + " " + firstName}
                     </div>
@@ -132,7 +132,7 @@ const PatientHeader = (props) => {
                       </div>
                     )}
                   </Column>
-                </Grid>
+
               </div>
             ) : (
               <div className={className}>
@@ -165,10 +165,10 @@ const PatientHeader = (props) => {
               </div>
             )}
           </Section>
-        </Section>
+        </Section> 
       </Column>
     </Grid>
   );
 };
 
-export default PatientHeader;
+export default PatientHeader;
diff --git a/frontend/src/components/patient/resultsViewer/results-viewer.styles.scss b/frontend/src/components/patient/resultsViewer/results-viewer.styles.scss
@@ -132,9 +132,9 @@
   border: 1px solid #ddd;
   padding: 20px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: left;
   text-align: left;
   margin-top: 20px;
   background-color: #ffffff;
@@ -143,29 +143,29 @@
   padding: 2%;
 }
 .patient-header2 {
-  //background-color: #f5f5f5;
+
   border: 1px solid #ddd;
-  // padding: 20px;
+   padding: 20px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: left;
   text-align: left;
   margin-top: 20px;
   background-color: #ffffff;
   border-radius: 5px;
   margin-top: 1%;
-  padding: 2%;
+  padding: 20px;
 }
 
 .patient-header3 {
   //background-color: #f5f5f5;
   border: 1px solid #ddd;
-  // padding: 20px;
+  padding: 20px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: left;
   text-align: left;
   background-color: #ffffff;
   border-radius: 5px;
@@ -196,10 +196,32 @@
   width: 5rem;
   height: 5rem;
   border-radius: 1px;
+  margin-right: 13px;
 }
 .patientAvatar2 {
   padding-right: 140px;
   width: 5rem;
   height: 5rem;
   border-radius: 1px;
+  margin-right: 13px;
+}
+@media screen and (max-width:520px){
+  .patient-name {
+    font-size: 16px;
+
+    margin-bottom: 5px;
+  }
+
+  .patient-dob {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 5px;
+  }
+
+  .patient-id {
+    font-size: 12px;
+    color: #888;
+  }
+
 }
+
diff --git a/frontend/src/components/patient/resultsViewer/results-viewer.tsx b/frontend/src/components/patient/resultsViewer/results-viewer.tsx
@@ -104,7 +104,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
   return (
     <>
       <Grid fullWidth={true}>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4} >
           <Breadcrumb>
             <BreadcrumbItem href="/">
               {intl.formatMessage({ id: "home.label" })}
@@ -116,7 +116,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
         </Column>
       </Grid>
       <Grid fullWidth={true}>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4} >
           <Section>
             <Section>
               <Heading>
@@ -127,7 +127,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
         </Column>
       </Grid>
       <Grid fullWidth={true}>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4} >
           <PatientHeader
             id={patient.patientPK}
             lastName={patient.lastName}
@@ -145,7 +145,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
 
       {roots?.length ? (
         <Grid fullWidth={true} className="orderLegendBody">
-          <Column lg={16}>
+          <Column lg={16} md={8} sm={4}  >
             <FilterProvider roots={loading ? roots : []}>
               <ResultsViewer
                 patientId={patientId}
@@ -157,7 +157,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
         </Grid>
       ) : (
         <Grid fullWidth={true} className="orderLegendBody">
-          <Column lg={16}>
+          <Column lg={16} md={8} sm={4} >
             <EmptyState
               headerTitle={intl.formatMessage({ id: "label.test.results" })}
               displayText={intl.formatMessage({