feat(web): improve card layout on main page

nextstrain · Dec 20, 2023 · 99e9f31 · 99e9f31
1 parent 9ce49a0
commit 99e9f31
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 53 deletions.
diff --git a/packages_rs/nextclade-web/src/components/Common/Card.tsx b/packages_rs/nextclade-web/src/components/Common/Card.tsx
@@ -14,7 +14,7 @@ export const CardL1Header = styled(ReactstrapCardHeader)`
   border: none;
   border-image: none;
   border-radius: 5px 5px 0 0 !important;
-  background-color: ${(props) => props.theme.gray700};
+  background-color: ${(props) => props.theme.gray600};
   color: ${(props) => props.theme.gray100};
   padding: 10px 10px;
   display: flex;

diff --git a/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx b/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx
@@ -24,7 +24,7 @@ export const FilePickerContainer = styled.div`
 
 export const FilePickerHeader = styled.div`
   display: flex;
-  margin-bottom: 0.5rem;
+  margin-bottom: 10px;
 `
 
 export const FilePickerBody = styled.div<{ $compact?: boolean }>`

diff --git a/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx b/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx
@@ -28,7 +28,7 @@ const Container = styled.div`
   border: 1px #ccc9 solid;
   border-radius: 5px;
 
-  min-height: 110px;
+  min-height: 200px;
 `
 
 export interface ChangeDatasetButtonProps extends ButtonProps {
@@ -50,8 +50,12 @@ export function ButtonChangeDataset({ onClick, ...restProps }: ChangeDatasetButt
   }, [dataset, t])
 
   return (
-    <Button className="m-auto" color={color} title={tooltip} onClick={onClick} {...restProps}>
+    <ButtonChangeDatasetStyled className="m-auto" color={color} title={tooltip} onClick={onClick} {...restProps}>
       {text}
-    </Button>
+    </ButtonChangeDatasetStyled>
   )
 }
+
+const ButtonChangeDatasetStyled = styled(Button)`
+  min-height: 50px;
+`
diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx
@@ -28,17 +28,27 @@ export function DatasetCurrentSummary() {
     <Container>
       <DatasetCurrentUpdateNotification />
 
-      <Row noGutters className="w-100">
-        <Col className="d-flex">
-          <DatasetInfo dataset={dataset} showSuggestions />
-          <ButtonClear onClick={resetDataset} title={t('Reset dataset')}>
-            <IconClear size={20} />
-          </ButtonClear>
-        </Col>
-      </Row>
       <Row noGutters>
-        <Col className="d-flex w-100">
-          <ButtonLoadExample className="ml-auto" />
+        <Col>
+          <Row noGutters>
+            <Col className="d-flex">
+              <ButtonClear onClick={resetDataset} title={t('Reset dataset')}>
+                <IconClear size={20} />
+              </ButtonClear>
+            </Col>
+          </Row>
+
+          <Row noGutters>
+            <Col>
+              <DatasetInfo dataset={dataset} showSuggestions />
+            </Col>
+          </Row>
+
+          <Row noGutters className="d-flex">
+            <Col className="d-flex ml-auto mt-2">
+              <ButtonLoadExample className="ml-auto" />
+            </Col>
+          </Row>
         </Col>
       </Row>
     </Container>
@@ -51,11 +61,12 @@ const Container = styled.div`
   padding: 12px;
   border: 1px #ccc9 solid;
   border-radius: 5px;
+  min-height: 200px;
 `
 
 const ButtonClear = styled(ButtonTransparent)`
   display: inline;
-  margin: 0 auto;
+  margin-left: auto;
   height: 20px;
   width: 20px;
 `

diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx
@@ -70,7 +70,7 @@ export interface DatasetInfoProps {
   showSuggestions?: boolean
 }
 
-export function DatasetInfo({ dataset, showSuggestions }: DatasetInfoProps) {
+export function DatasetInfo({ dataset, showSuggestions, ...restProps }: DatasetInfoProps) {
   const { t } = useTranslationSafe()
   const { attributes, path, version } = dataset
 
@@ -88,7 +88,7 @@ export function DatasetInfo({ dataset, showSuggestions }: DatasetInfoProps) {
   const datasetPath = t('Dataset name: {{name}}', { name: path })
 
   return (
-    <Container>
+    <Container {...restProps}>
       <FlexLeft>
         <DatasetInfoAutodetectProgressCircle dataset={dataset} showSuggestions={showSuggestions} />
       </FlexLeft>

diff --git a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx
@@ -3,7 +3,7 @@ import { isNil } from 'lodash'
 import { useRouter } from 'next/router'
 import { Col, Row } from 'reactstrap'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { CardL1, CardL1Body, CardL1Header } from 'src/components/Common/Card'
+import { CardL1 as CardL1Base, CardL1Body as CardL1BodyBase, CardL1Header } from 'src/components/Common/Card'
 import styled from 'styled-components'
 import { SuggestionAlertMainPage } from 'src/components/Main/SuggestionAlertMainPage'
 import { AutodetectRunState, autodetectRunStateAtom } from 'src/state/autodetect.state'
@@ -51,27 +51,22 @@ const Main = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  margin-bottom: -12px;
-  padding-bottom: 12px;
+  margin: -12px;
+  padding: 12px;
   overflow: hidden;
 `
 
 const RowCustom = styled(Row)`
   display: flex;
   flex-direction: row;
   width: 100%;
+  margin: -12px;
+  padding: 12px;
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: -12px;
-  padding-bottom: 12px;
   overflow: hidden;
 `
 
-const Footer = styled.div`
-  display: flex;
-  flex: 1;
-`
-
 export function Landing() {
   // This periodically fetches dataset index and updates the list of datasets.
   useUpdatedDatasetIndex()
@@ -146,6 +141,12 @@ export function LandingCardDataset() {
   )
 }
 
+const CardL1 = styled(CardL1Base)``
+
+const CardL1Body = styled(CardL1BodyBase)`
+  //min-height: 386px;
+`
+
 export const CardTitle = styled.h4`
   display: inline-flex;
   flex: 1 0;
@@ -184,33 +185,45 @@ function DatasetCurrentOrSelectButton() {
   if (!dataset) {
     return (
       <Container>
-        <DatasetNoneSection toDatasetSelection={toDatasetSelection} />
-
-        <Footer>
-          <div className="w-100 d-flex flex-column">
+        <Row noGutters className="mb-1">
+          <Col>
             <SuggestionPanel />
-            <SuggestionAlertMainPage className="mt-1" />
-          </div>
-        </Footer>
+          </Col>
+        </Row>
+
+        <Row noGutters className="my-1">
+          <Col>
+            <DatasetNoneSection toDatasetSelection={toDatasetSelection} />
+          </Col>
+        </Row>
+
+        <SuggestionAlertMainPage className="mt-1 w-100" />
       </Container>
     )
   }
 
   return (
     <Container>
-      <DatasetCurrentSummary />
-
-      <Footer>
-        <div className="w-100 d-flex flex-column">
+      <Row noGutters className="mb-1">
+        <Col>
           <SuggestionPanel />
-          <SuggestionAlertMainPage className="mt-1" />
-        </div>
-      </Footer>
-
-      <Footer>
-        <ButtonChangeDataset className="mr-auto my-2" onClick={toDatasetSelection} />
-        <ButtonRun className="ml-auto my-2" onClick={run} />
-      </Footer>
+        </Col>
+      </Row>
+
+      <Row noGutters className="my-1">
+        <Col>
+          <DatasetCurrentSummary />
+        </Col>
+      </Row>
+
+      <Row noGutters className="my-1">
+        <Col className="d-flex w-100">
+          <ButtonChangeDataset className="mr-auto" onClick={toDatasetSelection} />
+          <ButtonRun className="ml-auto" onClick={run} />
+        </Col>
+      </Row>
+
+      <SuggestionAlertMainPage className="mt-1 w-100" />
     </Container>
   )
 }
diff --git a/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx b/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { UncontrolledAlert } from 'reactstrap'
+import { Col, Row, UncontrolledAlert } from 'reactstrap'
 import { useRecoilValue } from 'recoil'
 import { datasetCurrentAtom } from 'src/state/dataset.state'
 import styled from 'styled-components'
@@ -96,7 +96,17 @@ export function SuggestionAlertMainPage({ ...restProps }) {
     return null
   }, [autodetectRunState, datasetCurrent, datasetSuggestions, numSuggestions, t])
 
-  return <AlertWrapper {...restProps}>{alert}</AlertWrapper>
+  if (!alert) {
+    return null
+  }
+
+  return (
+    <Row noGutters className="my-1">
+      <Col>
+        <AlertWrapper {...restProps}>{alert}</AlertWrapper>
+      </Col>
+    </Row>
+  )
 }
 
 const AlertWrapper = styled.div`

diff --git a/packages_rs/nextclade-web/src/components/Main/SuggestionPanel.tsx b/packages_rs/nextclade-web/src/components/Main/SuggestionPanel.tsx
@@ -94,10 +94,8 @@ const Container = styled.div`
 const Form = styled(FormBase)`
   display: flex;
   width: 100%;
-  min-height: 45px;
-  padding: 10px;
-  border: 1px #ccc9 solid;
-  border-radius: 5px;
+  min-height: 38px;
+  padding: 0 5px;
 `
 
 export const FlexLeft = styled.div`
@@ -142,6 +140,7 @@ export function AutosuggestionToggle({ ...restProps }) {
         onCheckedChanged={toggleSuggestDatasets}
       >
         <span
+          className="my-auto"
           title={t(
             'Enable suggestion of best matching pathogen datasets. Please add sequence data to launch suggestion engine.',
           )}