Updated lists page to include h2 title, and updated record stubs to b…

…e h3 tags (#18)
SAEON · Jan 19, 2023 · 23627c3 · 23627c3
1 parent 02f1eca
commit 23627c3
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 13 deletions.
diff --git a/clients/src/components/header/application-header/breadcrumbs.jsx b/clients/src/components/header/application-header/breadcrumbs.jsx
@@ -66,7 +66,7 @@ export default ({ contentBase = '/', routes }) => {
           label = breadcrumbsLabel || label
 
           return (
-            <Typography key={label} color="textPrimary" sx={sxLink}>
+            <Typography component={'h2'} key={label} color="textPrimary" sx={{ ...sxLink }}>
               {Icon && breadcrumbsIcon && <MuiIcon sx={sxIcon} size={18} component={Icon} />}
               {label}
             </Typography>

diff --git a/clients/src/components/header/application-header/index.jsx b/clients/src/components/header/application-header/index.jsx
@@ -5,6 +5,7 @@ import Hidden from '@mui/material/Hidden'
 import Divider from '@mui/material/Divider'
 import Breadcrumbs from './breadcrumbs'
 import { Div } from '../../html-tags'
+export { default as TitleHeader } from './title-header'
 
 export const Toolbar = Toolbar_
 

diff --git a/clients/src/components/header/application-header/title-header.jsx b/clients/src/components/header/application-header/title-header.jsx
@@ -0,0 +1,32 @@
+import Toolbar_ from './toolbar'
+import Typography from '@mui/material/Typography'
+
+export const Toolbar = Toolbar_
+
+export default ({ description, ...props }) => {
+  return (
+    <Toolbar_
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+      {...props}
+    >
+      <Typography
+        variant="h6"
+        variantMapping={{
+          h6: 'h2',
+        }}
+        sx={theme => ({
+          fontSize: '0.8rem',
+          textAlign: 'center',
+          [theme.breakpoints.up('md')]: {
+            fontSize: 'unset',
+          },
+        })}
+      >
+        {description}
+      </Typography>
+    </Toolbar_>
+  )
+}
diff --git a/clients/src/components/header/index.jsx b/clients/src/components/header/index.jsx
@@ -5,13 +5,13 @@ import ApplicationBanner, {
   IMAGE_HEIGHT,
   Toolbar as ApplicationBanner_,
 } from './application-banner'
-import AppHeader, { Toolbar as ApplicationHeader_ } from './application-header'
+import AppHeader, { Toolbar as ApplicationHeader_, TitleHeader } from './application-header'
 import Divider from '@mui/material/Divider'
 import HideOnScroll from './animations/hide-on-scroll'
 import ElevationOnScroll from './animations/elevation-on-scroll'
 import { Div } from '../html-tags'
 
-const FullHeader = forwardRef(({ contentBase, title, contentRef, routes }, ref) => {
+const FullHeader = forwardRef(({ title, contentRef, AppHeader }, ref) => {
   return (
     <Div ref={ref}>
       <ElevationOnScroll>
@@ -20,7 +20,7 @@ const FullHeader = forwardRef(({ contentBase, title, contentRef, routes }, ref)
             <ApplicationBanner title={title} />
           </HideOnScroll>
           <Divider />
-          <AppHeader contentBase={contentBase} routes={routes} />
+          <AppHeader />
           <Divider />
         </AppBar>
       </ElevationOnScroll>
@@ -96,11 +96,10 @@ export default ({ contentBase, title, routes }) => {
   const { setHeaderRef, contentRef } = useContext(layoutContext)
   return (
     <FullHeader
-      contentBase={contentBase}
       title={title}
       contentRef={contentRef}
       ref={setHeaderRef}
-      routes={routes}
+      AppHeader={() => <AppHeader contentBase={contentBase} routes={routes} />}
     />
   )
 }
@@ -110,6 +109,18 @@ export const Banner = ({ title }) => {
   return <BannerOnly title={title} ref={setHeaderRef} />
 }
 
+export const ListHeader = ({ title, description }) => {
+  const { setHeaderRef, contentRef } = useContext(layoutContext)
+  return (
+    <FullHeader
+      title={title}
+      contentRef={contentRef}
+      ref={setHeaderRef}
+      AppHeader={() => <TitleHeader description={description} />}
+    />
+  )
+}
+
 export const ApplicationHeader = ({ contentBase, routes, ...props }) => {
   const { setHeaderRef } = useContext(layoutContext)
   return <AppHeaderOnly contentBase={contentBase} routes={routes} ref={setHeaderRef} {...props} />

diff --git a/clients/src/modules/records/search-results/header/index.jsx b/clients/src/modules/records/search-results/header/index.jsx
@@ -8,7 +8,7 @@ import Hidden from '@mui/material/Hidden'
 import ToolbarHeader from '../../../../components/toolbar-header'
 import Divider from '@mui/material/Divider'
 import Search from '../../../../components/search'
-import { Span } from '../../../../components/html-tags'
+import { Div, Span } from '../../../../components/html-tags'
 
 const ConfigurePaginationButton = lazy(() => import('./_configure-pagination-button'))
 const CurrentPageInfo = lazy(() => import('./_current-page-info'))
@@ -29,7 +29,13 @@ export default ({
       <ToolbarHeader>
         {/* SEARCH RESULT COUNT */}
         <Hidden smDown>
-          <Suspense fallback={<LoadingCircular />}>
+          <Suspense
+            fallback={
+              <Div sx={{ display: 'flex', ml: 2.25 }}>
+                <LoadingCircular />
+              </Div>
+            }
+          >
             <Title sx={{ ml: theme => theme.spacing(2) }} catalogue={catalogue} />
           </Suspense>
         </Hidden>

diff --git a/clients/src/modules/records/search-results/records/record/_titles.jsx b/clients/src/modules/records/search-results/records/record/_titles.jsx
@@ -39,7 +39,7 @@ export default ({ titles, id, doi }) => {
             textDecoration: theme => `underline 0.15em ${alpha(theme.palette.primary.main, 1)}`,
           },
         }}
-        variant="h2"
+        variant="h3"
       >
         {titles?.[0]?.title || 'Title missing'}
       </Typography>

diff --git a/clients/src/pages/list/index.html b/clients/src/pages/list/index.html
@@ -20,7 +20,7 @@
     <title id="document-title">$TITLE</title>
     <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="$DESCRIPTION" />
+    <meta id="document-description" name="description" content="$DESCRIPTION" />
     <meta name="keywords" content="$KEYWORDS" />
 
     <!-- Favicon -->

diff --git a/clients/src/pages/list/index.jsx b/clients/src/pages/list/index.jsx
@@ -4,7 +4,7 @@ import Loading from '../../components/loading'
 import RouteSwitcher from '../../entry-point/route-switcher'
 import { SizeContent } from '../../contexts/layout'
 import Footer from '../../components/footer'
-import { Banner } from '../../components/header'
+import { ListHeader } from '../../components/header'
 import configureRoutes from './routes'
 import { SUBDOMAIN_APP_ENTRIES } from '../../config'
 
@@ -19,11 +19,19 @@ const config = {
 const routes = configureRoutes(config)
 
 const Page = () => {
-  const ref = useRef(document.getElementById('document-title'))
+  const titleRef = useRef(document.getElementById('document-title'))
+  const contentRef = useRef(document.getElementById('document-description'))
+
+  const title = (titleRef.current?.innerHTML || '$TITLE').replace('$TITLE', 'SAEON Data')
+  const description = (contentRef.current?.content || '$DESCRIPTION').replace(
+    '$DESCRIPTION',
+    'Curated data collection - but how does it look for much longer titles. The end'
+  )
+
   return (
     <Suspense fallback={<Loading />}>
       <App {...config}>
-        <Banner title={ref.current?.innerHTML || 'SAEON Data'} />
+        <ListHeader title={title} description={description} />
         <SizeContent>
           <RouteSwitcher routes={routes} />
         </SizeContent>