Improve styling of <DatasetSelect>

Allows injected components to <DatasetSelect> (see previous commit) to no longer be bounded by the large margins we use for the default elements rendered by <DatasetSelect>. Co-authored-by: eharkins <eli.harkins@gmail.com>
Priyaraj17 · Apr 10, 2021 · 97925b6 · 97925b6
1 parent 20974e6
commit 97925b6
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 49 deletions.
diff --git a/static-site/src/components/Datasets/filter-display.jsx b/static-site/src/components/Datasets/filter-display.jsx
@@ -5,6 +5,7 @@
 import { sum } from "lodash";
 import React from "react";
 import { Tooltip, FilterBadge} from "./filterBadge";
+import { CenteredContainer } from "./styles";
 
 
 const Intersect = ({id}) => (
@@ -31,7 +32,7 @@ export const FilterDisplay = ({filters, applyFilter}) => {
   if (!sum(filtersByCategory.map((c) => c.badges.length))) return null;
 
   return (
-    <>
+    <CenteredContainer>
       {"Filtered to "}
       {filtersByCategory.map((filterCategory, idx) => {
         const multipleFilterBadges = filterCategory.badges.length > 1;
@@ -68,7 +69,7 @@ export const FilterDisplay = ({filters, applyFilter}) => {
         );
       })}
       {". "}
-    </>
+    </CenteredContainer>
   );
 };
 

diff --git a/static-site/src/components/Datasets/filter-selection.jsx b/static-site/src/components/Datasets/filter-selection.jsx
@@ -10,14 +10,10 @@ import { FaInfoCircle } from "react-icons/fa";
 import Select from "react-virtualized-select";
 import * as splashStyles from "../splash/styles";
 import { collectAvailableFilteringOptions } from "./filter-helpers";
+import { CenteredContainer } from "./styles";
 
 const DEBOUNCE_TIME = 200;
 
-const Container = styled.div`
-  margin-bottom: 0px;
-  font-size: 14px;
-`;
-
 const StyledTooltip = styled(ReactTooltip)`
   max-width: 30vh;
   white-space: normal;
@@ -32,7 +28,7 @@ export const FilterSelect = ({datasets, applyFilter}) => {
   const options = collectAvailableFilteringOptions(datasets);
 
   return (
-    <Container>
+    <CenteredContainer>
       <splashStyles.H3 left>
         {`Filter datasets `}
         <>
@@ -64,7 +60,7 @@ export const FilterSelect = ({datasets, applyFilter}) => {
         valueKey="label"
         onChange={(sel) => applyFilter("add", sel.value[0], [sel.value[1]])}
       />
-    </Container>
+    </CenteredContainer>
   );
 };
 
diff --git a/static-site/src/components/Datasets/list-datasets.jsx b/static-site/src/components/Datasets/list-datasets.jsx
@@ -5,6 +5,7 @@ import { get } from 'lodash';
 import styled from 'styled-components';
 import { MdPerson } from "react-icons/md";
 import {Grid, Col, Row} from 'react-styled-flexboxgrid';
+import { CenteredContainer } from "./styles";
 
 const logoPNG = require("../../../static/logos/favicon.png");
 
@@ -53,7 +54,7 @@ const LogoContainer = styled.a`
 
 export const ListDatasets = ({datasets, showDates}) => {
   return (
-    <>
+    <CenteredContainer>
       <Grid fluid>
         <DatasetContainer key="Column labels" style={{borderBottom: "1px solid #CCC"}}>
           <Row>
@@ -109,6 +110,6 @@ export const ListDatasets = ({datasets, showDates}) => {
           }
         </DatasetSelectionResultsContainer>
       </Grid>
-    </>
+    </CenteredContainer>
   );
 };
diff --git a/static-site/src/components/Datasets/styles.jsx b/static-site/src/components/Datasets/styles.jsx
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const CenteredContainer = styled.div`
+  margin: 0px auto 0px auto;
+  max-width: 800px;
+`;
diff --git a/static-site/src/pages/influenza-page.jsx b/static-site/src/pages/influenza-page.jsx
@@ -102,26 +102,17 @@ class Index extends React.Component {
               <ScrollableAnchor id={"datasets"}>
                 <div>
                   <HugeSpacer /><HugeSpacer />
-                  <splashStyles.H2 left>
+                  <splashStyles.H2>
                     Influenza datasets
                   </splashStyles.H2>
-                  <SmallSpacer />
-                  <splashStyles.FocusParagraph>
-                    This section is an index of Nextstrain datasets for flu, organized by type.
-                  </splashStyles.FocusParagraph>
-                  <div className="row">
-                    <MediumSpacer />
-                    <div className="col-md-1"/>
-                    <div className="col-md-10">
-                      {this.state.dataLoaded && (
-                        <DatasetSelect
-                          datasets={this.state.datasets}
-                          urlDefinedFilterPath={this.props["*"]}
-                          intendedUri={this.props.uri}
-                        />
-                      )}
-                    </div>
-                  </div>
+                  <HugeSpacer />
+                  {this.state.dataLoaded && (
+                    <DatasetSelect
+                      datasets={this.state.datasets}
+                      urlDefinedFilterPath={this.props["*"]}
+                      intendedUri={this.props.uri}
+                    />
+                  )}
                   { this.state.errorFetchingData && <splashStyles.CenteredFocusParagraph>
                               Something went wrong getting data.
                               Please <a href="mailto:hello@nextstrain.org">contact us at hello@nextstrain.org </a>

diff --git a/static-site/src/pages/sars-cov-2-page.jsx b/static-site/src/pages/sars-cov-2-page.jsx
@@ -160,26 +160,23 @@ class Index extends React.Component {
                     If you know of a dataset not listed here, please let us know!
                     Please note that inclusion on this list does not indicate an endorsement by the Nextstrain team.
                   </splashStyles.FocusParagraph>
-                  <div className="row">
-                    <MediumSpacer />
-                    <div className="col-md-1"/>
-                    <div className="col-md-10">
-                      {this.state.filterParsed && (
-                        <DatasetSelect
-                          datasets={this.state.filterList}
-                          noDates
-                          interface={[
-                            DatasetMap,
-                            "FilterSelect",
-                            "FilterDisplay",
-                            "ListDatasets"
-                          ]}
-                          urlDefinedFilterPath={this.props["*"]}
-                          intendedUri={this.props.uri}
-                        />
-                      )}
-                    </div>
-                  </div>
+
+                  <HugeSpacer/>
+                  {this.state.filterParsed && (
+                    <DatasetSelect
+                      datasets={this.state.filterList}
+                      noDates
+                      interface={[
+                        DatasetMap,
+                        "FilterSelect",
+                        "FilterDisplay",
+                        "ListDatasets"
+                      ]}
+                      urlDefinedFilterPath={this.props["*"]}
+                      intendedUri={this.props.uri}
+                    />
+                  )}
+
                 </div>
               </ScrollableAnchor>