fix: style components to add responsivity
This commit is contained in:
Christel Westerberg
@@ -0,0 +1,82 @@
|
||||
import styles from "./contact.module.css"
|
||||
|
||||
import { langEnum } from "@/types/lang"
|
||||
import type { Lang } from "@/types/lang"
|
||||
import type { ContactNode } from "@/types/requests/asides/contact"
|
||||
|
||||
export default function Contact({
|
||||
title,
|
||||
mailing_address,
|
||||
visiting_address,
|
||||
phone,
|
||||
system: { locale },
|
||||
}: ContactNode) {
|
||||
const visitingAddressMessage = getVisitingAddressMessage(locale)
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h2 className={styles.heading}>{title}</h2>
|
||||
<p>
|
||||
{mailing_address.name}
|
||||
<br />
|
||||
{mailing_address.street}
|
||||
<br />
|
||||
{mailing_address.zip} {mailing_address.city}
|
||||
<br />
|
||||
{mailing_address.country}
|
||||
</p>
|
||||
<p>
|
||||
{visitingAddressMessage}: {visiting_address.street}{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.highlightBlock}>
|
||||
<h3>{phone.title}</h3>
|
||||
<div className={styles.phoneContainer}>
|
||||
<svg
|
||||
focusable="false"
|
||||
className={styles.phoneIcon}
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<use
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
xlinkHref="/Static/img/icons/sprites.svg#icon-phone"
|
||||
></use>
|
||||
</svg>
|
||||
|
||||
<a
|
||||
href={phone.number}
|
||||
itemProp="telephone"
|
||||
className={styles.phoneNumberLink}
|
||||
>
|
||||
{phone.number}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getVisitingAddressMessage(lang: Lang) {
|
||||
switch (lang) {
|
||||
case langEnum.sv:
|
||||
return "Besöksadress"
|
||||
case langEnum.en:
|
||||
return "Visiting address"
|
||||
case langEnum.da:
|
||||
return "Besøgsadresse"
|
||||
case langEnum.de:
|
||||
return "Besuchsadresse"
|
||||
case langEnum.fi:
|
||||
return "Vierailuosoite"
|
||||
case langEnum.no:
|
||||
return "Besøksadresse"
|
||||
default:
|
||||
return ""
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
|
||||
.highlightBlock {
|
||||
background: #fff;
|
||||
padding: 10px 10px 15px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: BrandonText-Bold, Arial, Helvetica, sans-serif;
|
||||
font-size: 1.375rem;
|
||||
line-height: 1.1em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
color: #483729;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.phoneContainer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.phoneNumberLink {
|
||||
line-height: 1.1em;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
font-size: 1.125rem;
|
||||
color: #00838e;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.phoneIcon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
fill: #00838e;
|
||||
}
|
||||
|
||||
.p {
|
||||
color: #333;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1em;
|
||||
padding-top: 7px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.phoneNumberLink:active,
|
||||
.phoneNumberLink:hover {
|
||||
outline: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 950px) {
|
||||
.heading {
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
|
||||
.phoneNumberLink {
|
||||
line-height: 1.1em;
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { ContactsProps } from "@/types/components/current/asides/contact"
|
||||
import Contact from "./Contact"
|
||||
|
||||
export default function Contacts({ contacts }: ContactsProps) {
|
||||
return contacts.map((contact) => (
|
||||
<Contact key={contact.node.system.uid} {...contact.node} />
|
||||
))
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { renderOptions } from "./renderOptions"
|
||||
|
||||
import JsonToHtml from "@/components/JsonToHtml"
|
||||
import Link from "next/link"
|
||||
|
||||
import styles from "./puff.module.css"
|
||||
|
||||
import type { PuffProps } from "@/types/components/current/asides/puff"
|
||||
import Image from "@/components/Image"
|
||||
|
||||
export default function Puff({
|
||||
imageConnection,
|
||||
is_internal,
|
||||
link,
|
||||
pageConnection,
|
||||
text,
|
||||
title,
|
||||
}: PuffProps) {
|
||||
if (is_internal) {
|
||||
const page = pageConnection.edges[0]
|
||||
if (!page?.node?.url) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<Link className={styles.link} href={page.node.url}>
|
||||
<PuffContent
|
||||
imageConnection={imageConnection}
|
||||
text={text}
|
||||
title={title}
|
||||
/>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<a className={styles.link} href={link.href} target="_blank">
|
||||
<PuffContent
|
||||
imageConnection={imageConnection}
|
||||
text={text}
|
||||
title={title}
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
function PuffContent({
|
||||
imageConnection,
|
||||
text,
|
||||
title,
|
||||
}: Pick<PuffProps, "imageConnection" | "text" | "title">) {
|
||||
return (
|
||||
<article>
|
||||
{imageConnection.edges.map((image) => (
|
||||
<Image
|
||||
alt={image.node.title}
|
||||
className={styles.image}
|
||||
height={image.node.dimension.height}
|
||||
key={image.node.system.uid}
|
||||
src={image.node.url}
|
||||
width={image.node.dimension.width}
|
||||
/>
|
||||
))}
|
||||
<section className={styles.content}>
|
||||
<header>
|
||||
<h3 className={styles.heading}>{title}</h3>
|
||||
</header>
|
||||
<JsonToHtml
|
||||
embeds={text.embedded_itemsConnection.edges}
|
||||
nodes={text.json.children}
|
||||
renderOptions={renderOptions}
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
.link {
|
||||
display: inline-block;
|
||||
transition: 200ms ease;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
text-decoration: none;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.image {
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: #00838e;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-bottom: 0;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.link:hover .heading {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.p {
|
||||
color: #333;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0;
|
||||
padding-top: 7px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 740px) {
|
||||
.content {
|
||||
padding: 20px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 950px) {
|
||||
.heading {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import styles from "./puff.module.css"
|
||||
|
||||
import { RTETypeEnum } from "@/types/rte/enums"
|
||||
|
||||
import type { EmbedByUid } from "@/types/components/jsontohtml"
|
||||
import type { RTENext, RTEDefaultNode } from "@/types/rte/node"
|
||||
import type { RenderOptions } from "@/types/rte/option"
|
||||
|
||||
export const renderOptions: RenderOptions = {
|
||||
[RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
|
||||
return <p className={styles.p}>{next(node.children, embeds, fullRenderOptions)}</p>
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import Puff from "./Puff"
|
||||
|
||||
import type { PuffsProps } from "@/types/components/current/asides/puffs"
|
||||
|
||||
export default function Puffs({ puffs }: PuffsProps) {
|
||||
if (!puffs.length) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{puffs.map(puff => (
|
||||
<Puff key={puff.node.system.uid} {...puff.node} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.wrapper {
|
||||
padding: 20px 10px 5px;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import Puffs from "./Puffs"
|
||||
import Contacts from "./Contacts"
|
||||
|
||||
import { AsideTypenameEnum } from "@/types/requests/utils/typename"
|
||||
import type { AsideProps } from "@/types/components/current/aside"
|
||||
|
||||
import styles from "./aside.module.css"
|
||||
|
||||
export default function Aside({ blocks }: AsideProps) {
|
||||
if (!blocks?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className={styles.wrapper}>
|
||||
{blocks.map((block, idx) => {
|
||||
const type = block.__typename
|
||||
switch (type) {
|
||||
case AsideTypenameEnum.CurrentBlocksPageAsideContact:
|
||||
return <Contacts contacts={block.contact.contactConnection.edges} />
|
||||
case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
|
||||
return (
|
||||
<Puffs
|
||||
key={`block-${idx}`}
|
||||
puffs={block.puff.puffConnection.edges}
|
||||
/>
|
||||
)
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user