Skip to content

Commit

Permalink
fix mobile display of news pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@Haliax
Haliax committed Feb 23, 2024
1 parent 6e25f28 commit c953425
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 34 deletions.
7 changes: 7 additions & 0 deletions components/blocks/headlineBlock/HeadlineTag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,13 @@ interface Props {
children: ReactNode;
}

export const headlineClass = {
h1: 'font-serif leading-none text-3xl md:text-4xl break-words sm:break-normal md:scroll-mt-[96px]',
h2: 'font-serif leading-tight text-2xl md:text-3xl break-words sm:break-normal md:scroll-mt-[96px]',
h3: 'font-serif leading-tight text-xl md:text-2xl break-words sm:break-normal md:scroll-mt-[96px]',
h4: 'font-serif leading-tight text-xl md:text-xl font-bold md:scroll-mt-[96px]',
};

const HeadlineTag = ({ children, level, anchor }: Props): ReactElement => {

const id = getHeadlineId(anchor, children);
Expand Down
6 changes: 2 additions & 4 deletions lib/news/news.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import createCircleLink from '@/lib/events/createCircleLink';
import createOrganisationLink from '@/lib/events/createOrganisationLink';
import type { Circle, Organisation } from '@/types/payload/payload-types';

enum NewsCategoriesDe {
Expand All @@ -23,12 +21,12 @@ export const getCircleOrOrganisationName = (data: Array<{ value: string | Organi
data.map((owner) => {
if (owner.relationTo === 'organisations') {
const organisation: Organisation = owner.value as Organisation;
str.push(`<Link class="" href="${createOrganisationLink(organisation)}" >${organisation.name}</Link>`);
str.push(`${organisation.name}`);
return;
}

const circle: Circle = owner.value as Circle;
str.push(`<Link href="${createCircleLink(circle)}">${circle.name}</Link>`);
str.push(`${circle.name}`);
});

return str.join(' - ');
Expand Down
30 changes: 23 additions & 7 deletions pages/news/[slug].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { faArrowAltCircleLeft } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { GetStaticPaths, GetStaticProps } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import type { ReactElement } from 'react';
import Footer from '@/components/common/Footer';
Expand All @@ -12,7 +15,7 @@ import { getCircleOrOrganisationName, getNewsCategory } from '@/lib/news/news';
import getPayloadResponse from '@/lib/payload/getPayloadResponse';
import type PaginatedDocs from '@/types/payload/PaginatedDocs';
import type { Media, News } from '@/types/payload/payload-types';
import Headline from '@blocks/headlineBlock/Headline';
import { headlineClass } from '@blocks/headlineBlock/HeadlineTag';
import ReusableBlockLayout from '@blocks/reusableLayout/ReusableBlockLayout';

interface Props {
Expand Down Expand Up @@ -77,25 +80,38 @@ export default ({ news: data }: Props): ReactElement => {

<main id="content">
<ContentWrapper>
<Headline
title={data.title}
level="h1"
teaser={`<strong><i>${getNewsCategory(data.newsCategory, locale!)}</i></strong> - ${formatDate(data.newsDate, 'dd.MM.yyyy')} - ${getCircleOrOrganisationName(data.newsAuthor)}`}
/>

<>
<small className="block font-normal leading-none tracking-normal italic text-base md:text-base mb-1">
<strong><i>{getNewsCategory(data.newsCategory, locale!)}</i></strong> - {formatDate(data.newsDate, 'dd.MM.yyyy')} - {getCircleOrOrganisationName(data.newsAuthor)}
</small>

<div className="max-w-full">
<div className={headlineClass.h4}>
{data.title}
</div>
</div>
</>
<div className="float-right p-4">
<Image
src={media.url!}
alt=""
width={400}
height={400}
className="p-4"
className="py-4 lg:p-4"
/>
</div>
</ContentWrapper>

<ReusableBlockLayout
layout={data.layout}
/>

<ContentWrapper>
<Link href="/news" className="mt-4 underline underline-offset-4 flex items-center gap-2 hover:text-orange-500">
<FontAwesomeIcon icon={faArrowAltCircleLeft} height={16} className="inline" /> {locale === 'de' ? 'Zurück zur Übersicht' : 'Back to overview'}
</Link>
</ContentWrapper>
</main>

<Footer />
Expand Down
66 changes: 43 additions & 23 deletions pages/news/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { GetStaticProps } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import type { ReactElement } from 'react';
import { useBreakpointContext } from '@/components/common/BreakpointContext';
import Footer from '@/components/common/Footer';
import ContentWrapper from '@/components/layout/ContentWrapper';
import HeaderBar from '@/components/layout/header/HeaderBar';
Expand All @@ -13,8 +13,8 @@ import { getCircleOrOrganisationName, getNewsCategory } from '@/lib/news/news';
import getPayloadResponse from '@/lib/payload/getPayloadResponse';
import type PaginatedDocs from '@/types/payload/PaginatedDocs';
import type { Media, News } from '@/types/payload/payload-types';
import Headline from '@blocks/headlineBlock/Headline';
import HeadlineBlock from '@blocks/headlineBlock/HeadlineBlock';
import { headlineClass } from '@blocks/headlineBlock/HeadlineTag';

interface Props {
news: Array<News>;
Expand All @@ -40,7 +40,8 @@ export const getStaticProps: GetStaticProps<Props> = async ({ locale }) => {

export default ({ news }: Props): ReactElement => {
const { locale } = useRouter();

const { isMd, isLg } = useBreakpointContext();

return (
<div className="min-h-screen flex flex-col justify-between">
<NextHead
Expand Down Expand Up @@ -75,31 +76,50 @@ export default ({ news }: Props): ReactElement => {
return (
<div key={item.id}>

<div className="flex gap-4 h-[300px] overflow-hidden">
<div className="flex-none">
<a className="lg:flex lg:gap-4" href={`/news/${item.id}`}>

<div className="lg:grow py-4 md:p-4">
<small className="block font-normal leading-none tracking-normal italic text-base md:text-base mb-1">
<strong><i>{getNewsCategory(item.newsCategory, locale!)}</i></strong> - {formatDate(item.newsDate, 'dd.MM.yyyy')} - {getCircleOrOrganisationName(item.newsAuthor)}
</small>

<div className="max-w-full">
<div className={headlineClass.h3}>
{item.title}
</div>
</div>

<div className="lg:hidden md:float-left md:pr-8">
<Image
src={media.url!}
alt=""
width={300}
height={300}
className="mx-auto py-4 md:py-4"
/>
</div>

<p className="py-1 sm:text-lg">
{item.excerpt}
</p>

<p
className="sm:text-lg underline underline-offset-4 flex items-center gap-2 hover:text-orange-500"
>
Weiterlesen...

This comment has been minimized.

Sign in to view

Copy link
@cheeZery

cheeZery Feb 23, 2024

Member

🇬🇧 🙂

This comment has been minimized.

Sign in to view

Copy link
@Haliax

Haliax Feb 23, 2024

Author Member

Ist angepasst.
</p>
</div>

<div className="hidden lg:block lg:flex-none drop-shadow-lg">
<Image
src={media.url!}
alt=""
width={300}
height={300}
className="p-4"
/>
</div>

<div className="grow p-4">
<Headline
title={item.title}
level="h1"
teaser={`<strong><i>${getNewsCategory(item.newsCategory, locale!)}</i></strong> - ${formatDate(item.newsDate, 'dd.MM.yyyy')} - ${getCircleOrOrganisationName(item.newsAuthor)}`}
width={isMd && !isLg ? 450 : 300}
height={isMd && !isLg ? 450 : 300}
className="mx-auto md:p-4"
/>
<p className="py-1 sm:text-lg h-[150px] overflow-hidden">
{item.excerpt}
</p>
<Link href={`/news/${item.id}`} className="sm:text-lg underline underline-offset-4 flex items-center gap-2 hover:text-orange-500">
Weiterlesen...
</Link>
</div>
</div>
</a>

{
// Display a horizontal line after each news item, except for the last one.
Expand Down

0 comments on commit c953425

Please sign in to comment.