feat: Add banner to dataset browse page

visualize-admin · Nov 1, 2022 · aaad399 · aaad399
1 parent 227d395
commit aaad399
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 46 deletions.
diff --git a/app/configurator/components/presence.tsx b/app/configurator/components/presence.tsx
@@ -35,3 +35,10 @@ export const navPresenceProps = {
   animate: "center",
   exit: "exit",
 };
+
+export const bannerPresenceProps = {
+  transition: { duration: 0.5 },
+  initial: { scaleY: 0, marginTop: -350 },
+  animate: { scaleY: 1, marginTop: 0 },
+  exit: { scaleY: 0, marginTop: -350 },
+};
diff --git a/app/configurator/components/select-dataset-step.tsx b/app/configurator/components/select-dataset-step.tsx
@@ -1,5 +1,5 @@
 import { t, Trans } from "@lingui/macro";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { AnimatePresence } from "framer-motion";
 import Head from "next/head";
@@ -21,11 +21,13 @@ import {
 import { DataSetMetadata } from "@/configurator/components/dataset-metadata";
 import { DataSetPreview } from "@/configurator/components/dataset-preview";
 import {
+  PanelBannerWrapper,
   PanelLayout,
   PanelLeftWrapper,
   PanelMiddleWrapper,
 } from "@/configurator/components/layout";
 import {
+  bannerPresenceProps,
   MotionBox,
   navPresenceProps,
 } from "@/configurator/components/presence";
@@ -43,31 +45,49 @@ const softJSONParse = (v: string) => {
   }
 };
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles<Theme>((theme) => ({
   panelLayout: {
     width: "100%",
-    maxWidth: 1300,
     margin: "auto",
     left: 0,
     right: 0,
     position: "static",
     // FIXME replace 96px with actual header size
-    marginTop: "96px",
+    marginTop: 96,
     height: "auto",
-    paddingTop: "55px",
   },
   panelLeft: {
     backgroundColor: "transparent",
-    paddingTop: 0,
+    paddingTop: 24,
     boxShadow: "none",
     borderRight: 0,
   },
   panelMiddle: {
-    paddingTop: 0,
+    paddingTop: 24,
     paddingLeft: 18,
     gridColumnStart: "middle",
     gridColumnEnd: "right",
   },
+  panelBanner: {
+    display: "grid",
+    gridTemplateColumns:
+      "minmax(12rem, 20rem) minmax(22rem, 1fr) minmax(12rem, 20rem)",
+    gridTemplateAreas: `". content ."`,
+  },
+  panelBannerContent: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gridArea: "content",
+  },
+  panelBannerTitle: {
+    color: theme.palette.grey[700],
+    marginBottom: theme.spacing(4),
+  },
+  panelBannerDescription: {
+    color: theme.palette.grey[600],
+    marginBottom: theme.spacing(3),
+  },
 }));
 
 export const formatBackLink = (
@@ -160,6 +180,39 @@ const SelectDatasetStepContent = () => {
           )}
         </AnimatePresence>
       </PanelLeftWrapper>
+      <AnimatePresence exitBeforeEnter>
+        {!dataset && (
+          <MotionBox
+            {...bannerPresenceProps}
+            key="banner"
+            sx={{ width: "100vw" }}
+          >
+            <PanelBannerWrapper className={classes.panelBanner}>
+              <Box className={classes.panelBannerContent}>
+                <Typography variant="h1" className={classes.panelBannerTitle}>
+                  Visualize Swiss Open Government Data
+                </Typography>
+                <Typography
+                  variant="body2"
+                  className={classes.panelBannerDescription}
+                >
+                  <Trans id="browse.datasets.description">
+                    Explore datasets provided by the LINDAS Linked Data Service
+                    by either filtering by categories or organisations or search
+                    directly for specific keywords. Click on a dataset to see
+                    more detailed information and start creating your own
+                    visualizations.
+                  </Trans>
+                </Typography>
+                <SearchDatasetBox
+                  browseState={browseState}
+                  searchResult={datacubesQuery.data}
+                />
+              </Box>
+            </PanelBannerWrapper>
+          </MotionBox>
+        )}
+      </AnimatePresence>
       <PanelMiddleWrapper className={classes.panelMiddle}>
         <Box sx={{ maxWidth: 900 }}>
           <AnimatePresence exitBeforeEnter>
@@ -172,7 +225,7 @@ const SelectDatasetStepContent = () => {
               </MotionBox>
             ) : (
               <MotionBox {...navPresenceProps}>
-                {filters.length > 0 ? (
+                {filters.length > 0 && (
                   <Typography
                     key="filters"
                     variant="h1"
@@ -188,45 +241,7 @@ const SelectDatasetStepContent = () => {
                       .map((f) => f.label)
                       .join(", ")}
                   </Typography>
-                ) : (
-                  <>
-                    <Typography
-                      key="all-datasets"
-                      variant="h1"
-                      color="grey.800"
-                      mb={4}
-                      sx={{ display: "block" }}
-                    >
-                      <Trans id="browse.datasets.all-datasets">
-                        All datasets
-                      </Trans>
-                    </Typography>
-                    <Typography
-                      variant="body1"
-                      fontWeight={400}
-                      color="grey.800"
-                      sx={{
-                        mb: 4,
-                        maxWidth: 800,
-                        display: "block",
-                      }}
-                    >
-                      <Trans id="browse.datasets.description">
-                        Explore datasets provided by the LINDAS Linked Data
-                        Service by either filtering by categories or
-                        organisations or search directly for specific keywords.
-                        Click on a dataset to see more detailed information and
-                        start creating your own visualizations.
-                      </Trans>
-                    </Typography>
-                  </>
                 )}
-                <Box mb={1} key="search-box">
-                  <SearchDatasetBox
-                    browseState={browseState}
-                    searchResult={datacubesQuery.data}
-                  />
-                </Box>
                 <DatasetResults key="results" query={datacubesQuery} />
               </MotionBox>
             )}