Merge pull request #73 from mbwatson/update/news-ui-tweaks

Update/news UI tweaks
RENCI · Dec 5, 2023 · 8953b72 · 8953b72
2 parents be01540 + 6c87904
commit 8953b72
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 20 deletions.
diff --git a/components/layout/section/section.js b/components/layout/section/section.js
@@ -29,7 +29,7 @@ export const Section = ({ title, children }) => {
           )
         }
       </Box>
-      <Box sx={{ flex: '1' , wordWrap: 'break-word'}} >
+      <Box sx={{ flex: '1' , wordWrap: 'break-word', minWidth: 0 }} >
           { children }
       </Box>
     </Stack>

diff --git a/components/news/tag.js b/components/news/tag.js
@@ -25,7 +25,7 @@ const TYPES = {
   },
   default: {
     bgColor: "#ededed",
-    color: "#414141",
+    color: "#474747",
   },
 };
 

diff --git a/pages/news/[year]/[month]/[day]/[slug].js b/pages/news/[year]/[month]/[day]/[slug].js
@@ -1,15 +1,17 @@
 import { Fragment } from "react"
 import { Page, Section } from "@/components/layout";
 import { fetchArticle, fetchStrapiGraphQL } from "@/lib/strapi";
-import { Divider, Typography, Box, Stack } from "@mui/material";
+import { Divider, Typography, Stack, styled } from "@mui/material";
 import { Markdown } from "@/components/markdown";
 import Image from "next/image";
 import { ArticleDate } from "@/components/news/article-date"
 import { Tag } from "@/components/news/tag"
 import qs from "qs";
 import { Link } from "@/components/link"
+import { useRouter } from "next/router";
 
 export default function Article({ article }) {
+  const router = useRouter();
 
   const tags = [
     article.projects.map((x) => ({ ...x, type: 'projects' })),
@@ -60,13 +62,13 @@ export default function Article({ article }) {
           const id = type === 'postTags' ? name : slug;
 
           return (
-            <Link key={i} to={createTagLinkURL(id, type)}>
-              <Tag
-                type={type}
-                contents={name}
-                sx={{ minWidth: 'fit-content', maxWidth: 'revert' }}
-              />
-            </Link>
+            <Tag
+              key={i}
+              type={type}
+              contents={name}
+              onClick={() => { router.push(createTagLinkURL(id, type)); }}
+              sx={{ maxWidth: 'revert', cursor: 'pointer' }}
+            />
           )
         })}
       </Stack>
@@ -78,15 +80,18 @@ export default function Article({ article }) {
       {
         article.content.map((item)=> {
           return item.__typename == "ComponentPostSectionsImage" ? (
-            <Image 
-              priority
-              src={item.image.data.attributes.url}
-              alt={item.altText}
-              width= {item.image.data.attributes.width}
-              height={item.image.data.attributes.height}
-              layout="responsive"
-              objectFit='cover'
-            />
+            <Figure>
+              <Image 
+                priority
+                src={item.image.data.attributes.url}
+                alt={item.altText}
+                width= {item.image.data.attributes.width}
+                height={item.image.data.attributes.height}
+                layout="responsive"
+                objectFit='cover'
+              />
+              <Typography component={"figcaption"} variant="caption">{item.caption}</Typography>
+            </Figure>
           ) : (
             <Markdown>{item.content}</Markdown>
           )
@@ -157,6 +162,18 @@ export default function Article({ article }) {
   )
 }
 
+const Figure = styled('figure')`
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  & figcaption.MuiTypography-root {
+    align-self: center;
+    font-style: italic;
+  }
+`;
+
 export async function getStaticPaths() {
   const postsGql = await fetchStrapiGraphQL(`query {
     posts(pagination: { limit: 1000 }, sort: "publishDate:desc") {

diff --git a/pages/news/index.js b/pages/news/index.js
@@ -111,7 +111,7 @@ export default function News() {
   const isTagSelected = useCallback((id, type) => {
     if (id === undefined || type === undefined) return false;
     return selectedTags[type]?.find((tag) => (
-      tag[type === 'freeSearch' ? 'name' : 'slug'] === id
+      tag[type === 'freeSearch' || type === 'postTags' ? 'name' : 'slug'] === id
       )) !== undefined;
   }, [selectedTags]);