Skip to content

Commit

Permalink
Style headers
Browse files Browse the repository at this point in the history
  • Loading branch information
@terotik
terotik committed Oct 13, 2024
1 parent a8e138e commit a7a187b
Show file tree
Hide file tree
Showing 5 changed files with 234 additions and 161 deletions.
15 changes: 6 additions & 9 deletions components/paths/PathsPageContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';

import { GetContentPageQuery } from 'common/__generated__/graphql';
import StreamField from 'components/paths/StreamField';
import { Container } from 'reactstrap';
import styled, { css } from 'styled-components';

import { ActionListPage } from '@/app/[domain]/[lang]/[plan]/(with-layout-elements)/actions/ActionListPage';
Expand Down Expand Up @@ -62,14 +61,12 @@ const PathsPageContent = ({
{isCategoryPage && (
<ContentArea>
<MainContent>
<Container>
<CategoryPageHeaderBlock
page={page}
title={page.title}
lead="Category page header title"
/>
{page.body && <StreamField page={page} blocks={page.body} />}
</Container>
<CategoryPageHeaderBlock
page={page}
title={page.title}
lead="Category page header title"
/>
{page.body && <StreamField page={page} blocks={page.body} />}
</MainContent>
</ContentArea>
)}
Expand Down
39 changes: 36 additions & 3 deletions components/paths/StreamField.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React from 'react';

import { ColProps } from 'reactstrap';
import { Col, ColProps, Container, Row } from 'reactstrap';

import type { StreamFieldFragmentFragment } from '@/common/__generated__/graphql';
import { ErrorBoundary } from '@/components/common/ErrorBoundary';
import { ErrorPage } from '@/components/common/ErrorPage';
import RichText from '@/components/common/RichText';
import ActionCategoryFilterCardsBlock from '@/components/contentblocks/ActionCategoryFilterCardsBlock';
import ActionListBlock from '@/components/contentblocks/ActionListBlock';
import IndicatorGroupBlock from '@/components/contentblocks/IndicatorGroupBlock';
import QuestionAnswerBlock from '@/components/contentblocks/QuestionAnswerBlock';
import CategoryListBlock from '@/components/paths/contentblocks/CategoryListBlock';
import CategoryTypeListBlock from '@/components/paths/contentblocks/CategoryTypeListBlock';
import PathsOutcomeBlock from '@/components/paths/contentblocks/PathsOutcomeBlock';
Expand Down Expand Up @@ -116,8 +118,39 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
</div>
);
}
case 'RichTextBlock':
case 'QuestionAnswerBlock':
case 'RichTextBlock': {
const { value } = block;
const COLLAPSIBLE_BREAKPOINT = 1200;
const isCollapsible =
page.__typename === 'CategoryPage' &&
value.length > COLLAPSIBLE_BREAKPOINT;
return (
<Container id={id}>
<Row>
<Col
xl={{ size: 6, offset: 3 }}
lg={{ size: 8, offset: 2 }}
md={{ size: 10, offset: 1 }}
className="my-4"
>
<RichText html={value} isCollapsible={isCollapsible} />
</Col>
</Row>
</Container>
);
}
case 'QuestionAnswerBlock': {
const { heading, questions } = block;

return (
<QuestionAnswerBlock
id={id}
heading={heading || ''}
questions={questions || []}
hasSidebar={false}
/>
);
}
case 'CharBlock':
case 'FrontPageHeroBlock':
case 'LargeImageBlock':
Expand Down
106 changes: 53 additions & 53 deletions components/paths/contentblocks/CategoryListBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,56 +135,54 @@ const CategoryList = (props) => {

//console.log('categoryData', categoryData);
return (
<Container>
<Row>
{categories
?.filter((cat) => cat?.categoryPage?.live)
.map(
(cat) =>
cat.categoryPage && (
<Col
tag="li"
xs="12"
sm="6"
lg="4"
key={cat.id}
className="mb-5 d-flex align-items-stretch"
>
<Link href={cat.categoryPage.urlPath} legacyBehavior>
<a className="card-wrapper">
<Card
colorEffect={cat.color ?? undefined}
altText={cat.image?.altText}
>
<div>
<CardHeader className="card-title">
{!cat?.type.hideCategoryIdentifiers && (
<Identifier>{cat.identifier}. </Identifier>
)}
{cat.name}
</CardHeader>
{cat.leadParagraph && <p>{cat.leadParagraph}</p>}
{cat.pathsAction && (
<div>
{yearRange ? (
beautifyValue(
cat.pathsAction.getYearlyImpact(yearRange[1])
)
) : (
<span>---</span>
)}
{cat.pathsAction.getUnit()}
</div>
<Row>
{categories
?.filter((cat) => cat?.categoryPage?.live)
.map(
(cat) =>
cat.categoryPage && (
<Col
tag="li"
xs="12"
sm="6"
lg="4"
key={cat.id}
className="mb-5 d-flex align-items-stretch"
>
<Link href={cat.categoryPage.urlPath} legacyBehavior>
<a className="card-wrapper">
<Card
colorEffect={cat.color ?? undefined}
altText={cat.image?.altText}
>
<div>
<CardHeader className="card-title">
{!cat?.type.hideCategoryIdentifiers && (
<Identifier>{cat.identifier}. </Identifier>
)}
</div>
</Card>
</a>
</Link>
</Col>
)
)}
</Row>
</Container>
{cat.name}
</CardHeader>
{cat.leadParagraph && <p>{cat.leadParagraph}</p>}
{cat.pathsAction && (
<div>
{yearRange ? (
beautifyValue(
cat.pathsAction.getYearlyImpact(yearRange[1])
)
) : (
<span>---</span>
)}
{cat.pathsAction.getUnit()}
</div>
)}
</div>
</Card>
</a>
</Link>
</Col>
)
)}
</Row>
);
};

Expand All @@ -201,10 +199,12 @@ const CategoryListBlock = (props: CategoryListBlockProps) => {
//console.log('CategoryListBlock', props);
return (
<CategoryListSection id={id}>
{heading && <h4>{heading}</h4>}
<Suspense fallback={<div>Loading...</div>}>
<CategoryList categories={categories} />
</Suspense>
<Container>
{heading && <h4>{heading}</h4>}
<Suspense fallback={<div>Loading...</div>}>
<CategoryList categories={categories} />
</Suspense>
</Container>
</CategoryListSection>
);
};
Expand Down
104 changes: 57 additions & 47 deletions components/paths/contentblocks/CategoryPageHeaderBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { CategoryPage } from 'components/common/CategoryPageStreamField';
import { usePaths } from 'context/paths/paths';
import { usePlan } from 'context/plan';
import { useTranslations } from 'next-intl';
import { Container } from 'reactstrap';
import styled, { useTheme } from 'styled-components';

import { gql } from '@apollo/client';
Expand All @@ -30,6 +31,11 @@ export const GET_CATEGORY_ATTRIBUTE_TYPES = gql`
}
`;

const Background = styled.div`
padding: 4rem 0 2em;
background-color: ${(props) => props.theme.brandDark};
`;

const PathsActionImpact = styled.div`
display: flex;
margin-right: 1rem;
Expand Down Expand Up @@ -92,57 +98,61 @@ function CategoryPageHeaderBlock(props: Props) {
level && !theme.settings.categories.categoryPageHideCategoryLabel;

return (
<CategoryHeader>
<Breadcrumbs
breadcrumbs={[
{
id: '1',
name: 'Massnahmenpakete',
url: '/',
},
{
id: '2',
name: 'Pakete',
url: '/categories/',
},
{
id: '3',
name: title,
url: `/categories/${identifier}/`,
},
]}
/>
<h1>
{identifier && <Identifier>{identifier}.</Identifier>} {title}
</h1>
{hasPaths && (
<PathsActionImpact>
<div>
<h4>Emissions (2022)</h4>
<div>
<div>
Direct emissions<h5>XXX</h5>
</div>
<div>
Indirect emissions<h5>XXX</h5>
</div>
</div>
</div>
<div>
<h4>Emissions target (2024)</h4>
<div>
<Background>
<Container>
<CategoryHeader>
<Breadcrumbs
breadcrumbs={[
{
id: '1',
name: 'Massnahmenpakete',
url: '/',
},
{
id: '2',
name: 'Pakete',
url: '/categories/',
},
{
id: '3',
name: title,
url: `/categories/${identifier}/`,
},
]}
/>
<h1>
{identifier && <Identifier>{identifier}.</Identifier>} {title}
</h1>
{hasPaths && (
<PathsActionImpact>
<div>
Direct emissions<h5>XXX</h5>
<h4>Emissions (2022)</h4>
<div>
<div>
Direct emissions<h5>XXX</h5>
</div>
<div>
Indirect emissions<h5>XXX</h5>
</div>
</div>
</div>
<div>
Indirect emissions<h5>XXX</h5>
<h4>Emissions target (2024)</h4>
<div>
<div>
Direct emissions<h5>XXX</h5>
</div>
<div>
Indirect emissions<h5>XXX</h5>
</div>
</div>
</div>
</div>
</div>
</PathsActionImpact>
)}
{lead && <p>{lead}</p>}
</CategoryHeader>
</PathsActionImpact>
)}
{lead && <p>{lead}</p>}
</CategoryHeader>
</Container>
</Background>
);
}

Expand Down
Loading

0 comments on commit a7a187b

Please sign in to comment.