New Landing Page

Oceans-1876 · Dec 14, 2022 · 5e6d9d4 · 5e6d9d4
1 parent fdd359b
commit 5e6d9d4
Show file tree

Hide file tree

Showing 25 changed files with 768 additions and 105 deletions.
diff --git a/src/components/Home/button_analysis.png b/src/components/Home/button_analysis.png
diff --git a/src/components/Home/button_api.png b/src/components/Home/button_api.png
diff --git a/src/components/Home/button_explore.png b/src/components/Home/button_explore.png
diff --git a/src/components/Home/francesco-ungaro-nlqqldluDBw-unsplash.jpg b/src/components/Home/francesco-ungaro-nlqqldluDBw-unsplash.jpg
diff --git a/src/components/Home/francesco-ungaro-nlqqldluDBw-unsplash.png b/src/components/Home/francesco-ungaro-nlqqldluDBw-unsplash.png
diff --git a/src/components/Home/home_overlay.png b/src/components/Home/home_overlay.png
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
diff --git a/src/components/Home/logo_bw_carnegie.png b/src/components/Home/logo_bw_carnegie.png
diff --git a/src/components/Home/logo_bw_nhm.png b/src/components/Home/logo_bw_nhm.png
diff --git a/src/components/Home/logo_bw_plymouth.png b/src/components/Home/logo_bw_plymouth.png
diff --git a/src/components/Home/logo_bw_sams.png b/src/components/Home/logo_bw_sams.png
diff --git a/src/components/Home/logo_bw_uiuc.png b/src/components/Home/logo_bw_uiuc.png
diff --git a/src/components/Home/logo_color_carnegie.png b/src/components/Home/logo_color_carnegie.png
diff --git a/src/components/Home/logo_color_nhm.png b/src/components/Home/logo_color_nhm.png
diff --git a/src/components/Home/logo_color_plymouth.png b/src/components/Home/logo_color_plymouth.png
diff --git a/src/components/Home/logo_color_sams.png b/src/components/Home/logo_color_sams.png
diff --git a/src/components/Home/logo_color_uiuc.png b/src/components/Home/logo_color_uiuc.png
diff --git a/src/components/Layouts/SinglePage.tsx b/src/components/Layouts/SinglePage.tsx
@@ -11,8 +11,9 @@ import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 
-import { getRandomBackground } from './backgrounds';
 import UnitPreferencesDialog from '../UnitPreferencesDialog';
+import { getRandomBackground } from './backgrounds';
+import './singlePage.scss';
 
 export const headerHeight = 60;
 
@@ -92,7 +93,7 @@ const Layout: React.FC<Props> = ({ children }: Props) => {
                             variant="outlined"
                             startIcon={<Icon baseClassName="icons">data_exploration</Icon>}
                             size="small"
-                            href={`${API_PATH}/docs`}
+                            href={`${window.API_PATH}/docs`}
                             target="_blank"
                         >
                             API
@@ -138,7 +139,7 @@ const Layout: React.FC<Props> = ({ children }: Props) => {
                                 </IconButton>
                                 <p>Analysis</p>
                             </MenuItem>
-                            <MenuItem dense component="a" href={`${API_PATH}/docs`} target="_blank">
+                            <MenuItem dense component="a" href={`${window.API_PATH}/docs`} target="_blank">
                                 <IconButton size="small">
                                     <Icon baseClassName="icons">data_exploration</Icon>
                                 </IconButton>

diff --git a/src/components/Layouts/singlePage.scss b/src/components/Layouts/singlePage.scss
@@ -0,0 +1,3 @@
+html, body, #root {
+  height: 100%;
+}
diff --git a/src/components/Map/styles.ts b/src/components/Map/styles.ts
@@ -75,7 +75,7 @@ export const layerStyles: { [group: string]: { [state: string]: Partial<maplibre
 
 export const mapStyle: maplibregl.StyleSpecification = {
     version: 8,
-    glyphs: `${API_FONTS}/{fontstack}/{range}.pbf`,
+    glyphs: `${window.API_FONTS}/{fontstack}/{range}.pbf`,
     sources: {},
     layers: []
 };
diff --git a/src/index.html b/src/index.html
@@ -8,6 +8,9 @@
     rel="stylesheet"
     href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
   />
+  <link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css?family=Cinzel Decorative">
   <link
     rel="stylesheet"
     href="https://fonts.googleapis.com/icon?family=Material+Icons"

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -1,13 +1,17 @@
-import { lazy } from 'react';
+import React, { Suspense, lazy } from 'react';
 
 import { withLayout } from './components/Layouts/utils';
 import layouts from './components/Layouts';
+import Loading from './components/Loading';
+
+const LazyHome = lazy(() => import('./components/Home'));
 
 const routes: { [key: string]: import('react-router-dom').RouteProps } = {
     '/': {
-        element: withLayout(
-            layouts.Scrollable,
-            lazy(() => import('./components/Home'))
+        element: (
+            <Suspense fallback={<Loading />}>
+                <LazyHome />
+            </Suspense>
         )
     },
     '/explore': {

diff --git a/src/store/api.ts b/src/store/api.ts
@@ -3,7 +3,7 @@ import { Dayjs } from 'dayjs';
 
 export const getData = <T>(endpoint: string, success: (data: T) => void, err: (error: Error | AxiosError) => void) => {
     axios
-        .get(`${API_PATH}/${endpoint}`)
+        .get(`${window.API_PATH}/${endpoint}`)
         .then(({ data }) => success(data))
         .catch((error) => {
             console.error();
@@ -67,7 +67,7 @@ export const searchStations = (
                 : expressions[0];
 
         axios
-            .post(`${API_PATH}/stations/search/`, data)
+            .post(`${window.API_PATH}/stations/search/`, data)
             .then((resp) => success(resp.data))
             .catch(console.error);
     }

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,7 +1,3 @@
-html, body, #root {
-  height: 100%;
-}
-
 .icons {
   font-family: 'Material Icons';
   font-weight: normal;
@@ -16,3 +12,9 @@ html, body, #root {
   -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
 }
+
+.center-horizontal {
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+}
diff --git a/src/theme.ts b/src/theme.ts
@@ -1,6 +1,15 @@
 import { createTheme } from '@mui/material/styles';
 
 export const themeOptions = {
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 900,
+            lg: 1200,
+            xl: 1536
+        }
+    },
     palette: {
         primary: {
             dark: '#002e2c',