Move items around

hms-dbmi · May 14, 2024 · b3d51df · b3d51df
1 parent a05b135
commit b3d51df
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 54 deletions.
diff --git a/addons/addon-custom/packages/main/css/overrides.css b/addons/addon-custom/packages/main/css/overrides.css
@@ -38,8 +38,14 @@ button.link {
   margin: 0px !important;
   border-radius: 0px;
 }
+
 .center ol,
 .center ul,
 .left {
   text-align: left;
+}
+
+.info-row {
+  display: flex;
+  flex-direction: row;
 }
diff --git a/addons/addon-custom/packages/main/src/parts/BrandingHeader.js b/addons/addon-custom/packages/main/src/parts/BrandingHeader.js
@@ -18,13 +18,9 @@ export function BrandingHeader({ copy, assets, picsureBoxes = true, authenticati
         className="animated fadeIn"
         style={{ maxWidth: '800px', margin: '0 auto', fontSize: '1.2em' }}
       >
-        <Grid.Row columns={1}>
-          <Grid.Column>
-            <Image fluid src={assets.images.registerLogo} style={maxImageWidth} />
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row columns={1}>
+        <Grid.Row columns={2}>
           <Grid.Column className="bodyText">
+            <Image fluid src={assets.images.registerLogo} style={maxImageWidth} />
             <div className="center">
               <Header as="h2" textAlign="center" className="header">
                 {copy.title}
@@ -37,56 +33,68 @@ export function BrandingHeader({ copy, assets, picsureBoxes = true, authenticati
               {renderHTML(copy.subtitle)}
             </div>
           </Grid.Column>
-        </Grid.Row>
-        {branding.picsure.dualBranding && picsureBoxes && (
-          <Grid.Row columns={2}>
+          {branding.picsure.dualBranding && picsureBoxes && (
             <Grid.Column>
-              <div className="bordered center" style={borders}>
-                <h3 className="header" style={{ textTransform: 'uppercase' }}>
-                  Service Workbench
-                </h3>
-                <p>Simple, accessible cloud computing & secure data storage.</p>
-                <span>Access to:</span>
-                <ul>
-                    <li>OCHIN Data (with appropriate data authorization)</li>
-                    <li>Amazon Web Services Open Access Datasets</li>
-                    <li>National Health and Nutrition Examination Survey Data</li>
-                    <li>Upload your own data into the FISMA-secure environment</li>
-                </ul>
-                <span>Computational environments available:</span>
-                <ul>
-                    <li>Rstudio</li>
-                    <li>SageMaker (Jupyter Notebooks)</li>
-                    <li>Linux EC2</li>
-                    <li>Remote WIndows Desktop</li>
-                </ul>
-                <a href="https://pic-sure.gitbook.io/service-workbench/" target="_blank" rel="noreferrer">
-                  Learn More
-                </a>
-              </div>
-            </Grid.Column>
-            <Grid.Column>
-              <div className="bordered center" style={borders}>
-                <h3 className="header" style={{ textTransform: 'uppercase' }}>
-                  PIC-SURE
-                </h3>
-                <p>A self-service, easily navigable patient-level clinical data search and cohort tool.</p>
-                <span>Explore:</span>
-                <ul>
-                    <li>National Health and Nutrition Examination Survey Data</li>
-                </ul>
-                <span>Export patient-level cohorts:</span>
-                <ul>
-                    <li>To your local machine</li>
-                    <li>To Service Workbench</li>
-                </ul>
-                <a href="https://pic-sure.gitbook.io/aim-ahead-pic-sure/" target="_blank" rel="noreferrer">
-                  Learn More
-                </a>
-              </div>
+              <Grid.Row columns={1}>
+                <div className="bordered center" style={borders}>
+                  <h3 className="header" style={{ textTransform: 'uppercase' }}>
+                    Service Workbench
+                  </h3>
+                  <p>Simple, accessible cloud computing & secure data storage.</p>
+                  <div className="info-row">
+                    <div>
+                      <span>Access to:</span>
+                      <ul>
+                        <li>OCHIN Data (with appropriate data authorization)</li>
+                        <li>Amazon Web Services Open Access Datasets</li>
+                        <li>National Health and Nutrition Examination Survey Data</li>
+                        <li>Upload your own data into the FISMA-secure environment</li>
+                      </ul>
+                    </div>
+                    <div>
+                      <span>Computational environments available:</span>
+                      <ul>
+                        <li>Rstudio</li>
+                        <li>SageMaker (Jupyter Notebooks)</li>
+                        <li>Linux EC2</li>
+                        <li>Remote WIndows Desktop</li>
+                      </ul>
+                    </div>
+                  </div>
+                  <a href="https://pic-sure.gitbook.io/service-workbench/" target="_blank" rel="noreferrer">
+                    Learn More
+                  </a>
+                </div>
+              </Grid.Row>
+              <Grid.Row columns={1}>
+                <div className="bordered center" style={borders}>
+                  <h3 className="header" style={{ textTransform: 'uppercase' }}>
+                    PIC-SURE
+                  </h3>
+                  <p>A self-service, easily navigable patient-level clinical data search and cohort tool.</p>
+                  <div className="info-row">
+                    <div>
+                      <span>Explore:</span>
+                      <ul>
+                        <li>National Health and Nutrition Examination Survey Data</li>
+                      </ul>
+                    </div>
+                    <div>
+                      <span>Export patient-level cohorts:</span>
+                      <ul>
+                        <li>To your local machine</li>
+                        <li>To Service Workbench</li>
+                      </ul>
+                    </div>
+                    <a href="https://pic-sure.gitbook.io/aim-ahead-pic-sure/" target="_blank" rel="noreferrer">
+                      Learn More
+                    </a>
+                  </div>
+                </div>
+              </Grid.Row>
             </Grid.Column>
-          </Grid.Row>
-        )}
+          )}
+        </Grid.Row>
       </Grid>
     </>
   );