From a8e138ed9fe039eb54aefa7f4baf4811b0ff7cac Mon Sep 17 00:00:00 2001 From: Tero Tikkanen Date: Sun, 13 Oct 2024 23:04:49 +0300 Subject: [PATCH] Better styles and content-loader --- components/paths/CategoryCard.tsx | 35 +++++++++++++------ components/paths/PathsPageContent.tsx | 15 +------- components/paths/StreamField.tsx | 9 ++++- .../paths/contentblocks/PathsOutcomeBlock.tsx | 26 ++++++++++---- .../paths/outcome/OutcomeNodeContent.tsx | 4 ++- package.json | 1 + yarn.lock | 10 ++++++ 7 files changed, 67 insertions(+), 33 deletions(-) diff --git a/components/paths/CategoryCard.tsx b/components/paths/CategoryCard.tsx index 0fe8186c..6ae59be5 100644 --- a/components/paths/CategoryCard.tsx +++ b/components/paths/CategoryCard.tsx @@ -5,8 +5,8 @@ import { Link } from 'common/links'; import ActionParameters from 'components/paths/ActionParameters'; import { useTranslations } from 'next-intl'; import { readableColor, transparentize } from 'polished'; -import { Spinner } from 'reactstrap'; -import styled from 'styled-components'; +import ContentLoader from 'react-content-loader'; +import styled, { useTheme } from 'styled-components'; import { activeGoalVar, yearRangeVar } from '@/context/paths/cache'; import { GET_PATHS_ACTION } from '@/queries/paths/get-paths-actions'; @@ -19,11 +19,6 @@ import { getHttpHeaders } from '@/utils/paths/paths.utils'; import PathsActionNode from '@/utils/paths/PathsActionNode'; import { NetworkStatus, useQuery, useReactiveVar } from '@apollo/client'; -const ContentLoader = styled(Spinner)` - margin: 0 auto; - //background-color: ${(props) => props.theme.themeColors.light}; -`; - const GroupIdentifierHeader = styled.div` background-color: ${(props) => props.$color}; color: ${(props) => readableColor(props.$color || '#ffffff')}; @@ -58,6 +53,26 @@ const Identifier = styled.span` color: ${(props) => props.theme.textColor.tertiary}; `; +const PathsContentLoader = (props) => { + const theme = useTheme(); + return ( + + + + + + + ); +}; + const PathsBasicNodeContent = (props) => { const { categoryId, node, pathsInstance, onLoaded } = props; const yearRange = useReactiveVar(yearRangeVar); @@ -96,7 +111,7 @@ const PathsBasicNodeContent = (props) => { }, [activeGoal, data, yearRange]); if (loading && !refetching) { - return ; + return ; } if (error) { return
Error: {error.message}
; // Handle error appropriately @@ -177,7 +192,7 @@ const PathsActionNodeContent = (props) => { }, [activeGoal, data, yearRange]); if (loading && !refetching) { - return ; + return ; } if (error) { return
Error: {error.message}
; // Handle error appropriately @@ -212,7 +227,7 @@ const PathsNodeContent = (props) => { }); if (loading) { - return ; + return ; } if (error) { return
Error: {error.message}
; // Handle error appropriately diff --git a/components/paths/PathsPageContent.tsx b/components/paths/PathsPageContent.tsx index 65bf3608..9acc5658 100644 --- a/components/paths/PathsPageContent.tsx +++ b/components/paths/PathsPageContent.tsx @@ -14,17 +14,6 @@ type CategoryPage = { __typename: 'CategoryPage' } & GeneralPlanPage; const MainContent = styled.div` position: relative; - padding-top: 100px; - &::after { - content: ''; - display: block; - position: absolute; - top: 0; - z-index: -100; - height: 500px; - background-color: ${({ theme }) => theme.brandDark}; - width: 100%; - } `; const columnLayout = css` @@ -56,9 +45,7 @@ const columnLayout = css` } `; -const ContentArea = styled.div` - margin-bottom: 100px; -`; +const ContentArea = styled.div``; const PathsPageContent = ({ page, diff --git a/components/paths/StreamField.tsx b/components/paths/StreamField.tsx index b34a14d6..77966efc 100644 --- a/components/paths/StreamField.tsx +++ b/components/paths/StreamField.tsx @@ -87,7 +87,14 @@ function StreamFieldBlock(props: StreamFieldBlockProps) { } case 'PathsOutcomeBlock': { - return ; + const { heading, helpText, outcomeNodeId } = block; + return ( + + ); } case 'ActionCategoryFilterCardsBlock': { const { cards } = block; diff --git a/components/paths/contentblocks/PathsOutcomeBlock.tsx b/components/paths/contentblocks/PathsOutcomeBlock.tsx index ca719575..24a10e54 100644 --- a/components/paths/contentblocks/PathsOutcomeBlock.tsx +++ b/components/paths/contentblocks/PathsOutcomeBlock.tsx @@ -18,13 +18,24 @@ import GET_PAGE from '@/queries/paths/get-paths-page'; import { getHttpHeaders } from '@/utils/paths/paths.utils'; import { NetworkStatus, useQuery, useReactiveVar } from '@apollo/client'; -const ErrorBackground = styled.div` +const Background = styled.div` + padding: 4rem 0 6rem; background-color: ${(props) => props.theme.brandDark}; + color: ${(props) => props.theme.themeColors.white}; min-height: 800px; `; +const StyledTitle = styled.h1` + margin-bottom: 2rem; + font-size: ${(props) => props.theme.fontSizeLg}; + color: inherit; + + @media (min-width: ${(props) => props.theme.breakpointMd}) { + font-size: ${(props) => props.theme.fontSizeXl}; + } +`; + const StyledCard = styled(Card)<{ $disabled?: boolean }>` - margin-top: 5rem; width: 100%; transition: all 0.5s ease; overflow: hidden; @@ -58,8 +69,8 @@ const findVisibleNodes = (allNodes, lastNodeId: string, visibleNodes) => { return visibleNodes; }; -export default function PathsOutcomeBlock() { - //const { heading, helpText, outcomeNodeId } = props; +export default function PathsOutcomeBlock(props) { + const { heading, helpText, outcomeNodeId } = props; const t = useTranslations(); const pathsInstance = usePaths(); const yearRange = useReactiveVar(yearRangeVar); @@ -69,7 +80,7 @@ export default function PathsOutcomeBlock() { const router = useRouter(); const pathname = usePathname(); const queryNodeId = searchParams.get('node') ?? undefined; - + console.log('PathsOutcomeBlock', props); const [lastActiveNodeId, setLastActiveNodeId] = useState( queryNodeId ); @@ -137,10 +148,11 @@ export default function PathsOutcomeBlock() { //const outcomeType = visibleNodes[0].quantity; return ( - + + {heading} {visibleNodes.map((node, index) => ( @@ -173,7 +185,7 @@ export default function PathsOutcomeBlock() { - + ); } } diff --git a/components/paths/outcome/OutcomeNodeContent.tsx b/components/paths/outcome/OutcomeNodeContent.tsx index 3530ad36..990b3ec0 100644 --- a/components/paths/outcome/OutcomeNodeContent.tsx +++ b/components/paths/outcome/OutcomeNodeContent.tsx @@ -174,6 +174,7 @@ const OutcomeNodeContent = ({ const singleYearGraph = useMemo( () => (
+

COMING SOON

{/**/}
), @@ -290,7 +291,8 @@ const OutcomeNodeContent = ({ {t('table')} - {showNodeLinks && ( + {/* TODO: Hide info tab for now as we can not link to paths actions inside watch */} + {showNodeLinks && false && ( =16.0.0" + checksum: 8f2f97cfb9a831cf487b8295fc60e05b153340a7bbaa2aa117c4af4c694ce0759313d8f538677ed231d3eb11d626e0561c416bc94f4ed158426bab5e8fa2ff67 + languageName: node + linkType: hard + "react-copy-to-clipboard@npm:^5.1.0": version: 5.1.0 resolution: "react-copy-to-clipboard@npm:5.1.0"