Skip to content
This repository has been archived by the owner on Jan 5, 2024. It is now read-only.

Commit

Permalink
Merge pull request #227 from SpareBank1/master_warning-message
Browse files Browse the repository at this point in the history 
Fiks visning på mobil
  • Loading branch information
@kariannekristiansen
kariannekristiansen authored Jan 2, 2024
2 parents 99b303f + 65b3fc3 commit 284a7bc
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 88 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@sb1/ffe-grid-react": "^11.0.0",
"@sb1/ffe-icons-react": "^7.2.18",
"@sb1/ffe-lists-react": "^7.0.5",
"@sb1/ffe-message-box": "^12.0.1",
"@sb1/ffe-message-box-react": "^10.0.5",
"@sb1/ffe-webfonts": "^3.0.0",
"babel-jest": "^27.3.1",
Expand Down
56 changes: 28 additions & 28 deletions src/pages/empati.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,24 @@ import dame1 from './empati/images/dame1.svg'
import dame2 from './empati/images/dame2.svg'
import empatiJson from './empati/empati.json'
import textCardsJson from './empati/components/card/textCards.json'
import Cards from "./empati/components/card/Cards";
import Cards from './empati/components/card/Cards'

const EmpatiPage = () => (
<div className="sb1-page empati-page">
<img src={sparebank1} alt="SpareBank 1 Logo" />
<h1 className="ffe-h1--text-center empati-heading">{empatiJson.heading}</h1>
<Grid >
<GridRow>
<GridCol sm={12} lg={{ cols: 6, offset: 3 }}>
<p className="ffe-body-paragraph empati-paragraph">
{empatiJson.firstParagraph}
</p>
<p className="ffe-body-paragraph empati-paragraph">
{empatiJson.secondParagraph}
</p>
</GridCol>
</GridRow>
</Grid>
<h1 className="ffe-h1--text-center empati-heading">{empatiJson.heading}</h1>
<Grid>
<GridRow>
<GridCol sm={12} lg={{ cols: 6, offset: 3 }}>
<p className="ffe-body-paragraph empati-paragraph">
{empatiJson.firstParagraph}
</p>
<p className="ffe-body-paragraph empati-paragraph">
{empatiJson.secondParagraph}
</p>
</GridCol>
</GridRow>
</Grid>

<div className="empati-images">
<img src={mann} alt="" />
Expand All @@ -35,20 +35,20 @@ const EmpatiPage = () => (
<Grid>
<GridRow topPadding={false}>
<GridCol>
{textCardsJson.map((card, index) => (
<Cards
key={index}
hands={card.hands}
color={card.color}
title={card.heading}
subTitle={card.tasks}
text={card.text}
task1={card.task1}
task2={card.task2}
task3={card.task3}
/>
))
}
{textCardsJson.map((card, index) => (
<Cards
key={index}
hands={card.hands}
color={card.color}
title={card.heading}
subTitle={card.tasks}
text={card.text}
task1={card.task1}
task2={card.task2}
task3={card.task3}
warningMessage={card.warningMessage}
/>
))}
</GridCol>
</GridRow>
</Grid>
Expand Down
94 changes: 48 additions & 46 deletions src/pages/empati/components/card/Cards.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React from 'react'
import { clsx } from 'clsx'

import { TextCard } from '@sb1/ffe-cards-react'
import { Heading1, Heading2, Paragraph } from '@sb1/ffe-core-react'
import { Heading3, Heading2, Paragraph } from '@sb1/ffe-core-react'
import { ErrorMessage } from '@sb1/ffe-message-box-react'
import { NumberedList, NumberedListItem } from '@sb1/ffe-lists-react'

import fjell from './svgs/briller-fjell.svg'
Expand All @@ -12,7 +13,6 @@ import syrin from './svgs/briller-syrin.svg'
import hand from './svgs/hånd-fjell.svg'

import * as styles from './text-card.module.less'
import {ErrorMessage} from "@sb1/ffe-message-box-react";

export default function Cards({
hands,
Expand All @@ -23,8 +23,8 @@ export default function Cards({
task3,
task2,
task1,
warningMessage,
}) {

const colorClasses = {
sand: styles.colorSand,
syrin: styles.colorSyrin,
Expand All @@ -35,48 +35,50 @@ export default function Cards({
const dynamicColorClass = clsx(colorClasses[color])

return (
<TextCard className={dynamicColorClass}>
{() => (
<>
<Heading1>{title}</Heading1>
{hands && (
<ErrorMessage className={styles.warningMessage}>
<Paragraph>
{txt.WARNING_MESSAGE}
</Paragraph>
</ErrorMessage>
)}
<Paragraph>{text}</Paragraph>
<Heading2>{subTitle}</Heading2>
<div className={styles.tasks}>
<NumberedList>
<NumberedListItem>{task1}</NumberedListItem>
<NumberedListItem>{task2}</NumberedListItem>
<NumberedListItem>{task3}</NumberedListItem>
</NumberedList>
<TextCard className={dynamicColorClass}>
{() => (
<>
<Heading2>{title}</Heading2>
{hands && (
<ErrorMessage
icon={
<span className="material-symbols-rounded">priority_high</span>
}
>
<Paragraph>{warningMessage}</Paragraph>
</ErrorMessage>
)}
<Paragraph>{text}</Paragraph>
<Heading3>{subTitle}</Heading3>
<div className={styles.tasks}>
<NumberedList>
<NumberedListItem>{task1}</NumberedListItem>
<NumberedListItem>{task2}</NumberedListItem>
<NumberedListItem>{task3}</NumberedListItem>
</NumberedList>

{color === 'sand' ? (
hands ? (
<img
src={hand}
alt=""
width={'250px'}
height={'170px'}
className={styles.svg}
/>
) : (
<img src={sand} alt="" width={'200px'} className={styles.svg}/>
)
) : color === 'syrin' ? (
<img src={syrin} alt="" width={'200px'} className={styles.svg}/>
) : color === 'fjell' ? (
<img src={fjell} alt="" width={'200px'} className={styles.svg}/>
) : color === 'frost' ? (
<img src={frost} alt="" width={'200px'} className={styles.svg}/>
) : null}
</div>
</>
)}
</TextCard>
);
{color === 'sand' ? (
hands ? (
<img
src={hand}
alt=""
width={'250px'}
height={'170px'}
className={styles.svg}
/>
) : (
<img src={sand} alt="" width={'200px'} className={styles.svg} />
)
) : color === 'syrin' ? (
<img src={syrin} alt="" width={'200px'} className={styles.svg} />
) : color === 'fjell' ? (
<img src={fjell} alt="" width={'200px'} className={styles.svg} />
) : color === 'frost' ? (
<img src={frost} alt="" width={'200px'} className={styles.svg} />
) : null}
</div>
</>
)}
</TextCard>
)
}
14 changes: 8 additions & 6 deletions src/pages/empati/components/card/text-card.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
@base-background: @ffe-farge-fjell;

.card-styles(@color, @background) {
:global(.ffe-h1),
:global(.ffe-h2),
:global(.ffe-h3),
:global(.ffe-body-paragraph) {
color: @color;
text-align: start;
Expand All @@ -15,6 +15,7 @@
text-align: start;
color: @color;
border-radius: 50px;
padding: 40px;
}

:global(.ffe-text-card).colorSand {
Expand All @@ -41,10 +42,11 @@
.svg {
margin-left: 7rem;
}
}

:global(.ffe-context-message).warningMessage {
margin-top: 2rem;
margin-bottom: 2rem;
width: 583px;
@media screen and (max-width: 640px) {
.svg {
display: none;
}
}
}

17 changes: 9 additions & 8 deletions src/pages/empati/components/card/textCards.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{
"heading": "Stand 1: Makuladegenerasjon (forkalkning)",
"text": "Det finnes flere typer, men aldersrelatert makuladegenerasjon er den største årsaken til varig synshemming hos personer over 50 år i Norge. Makula er et lite område av netthinnen som er viktig for skarpsynet. Ved makula-degenerasjon vil skarpsynet hemmes.\\n\\nTørr makuladegenerasjon gjør at det oppstår små, gule flekker rundt makula. Våt makuladegenerasjon kjennetegnes av små blodkar som vokser på baksiden av øyet.",
"tasks": "tasks",
"tasks": "Oppgaver",
"task1": "Finn frem mobilen",
"task2": "Ta på deg simuleringsbrillene",
"task3": "Gå inn på yr.no, og finn værvarsel for stedet der du bor",
Expand All @@ -12,7 +12,7 @@
{
"heading": "Stand 2: Grønn stær",
"text": "Grønn stær er en tilstand som ofte skyldes høyt trykk inne i øyet. På sikt kan tilstanden medføre innskrenkninger i synsfeltet og ubehandlet kan man ende opp med «tunnelsyn». Glaukom er en av de vanligste årsakene til blindhet i Norge, særlig i høy alder. Vi regner med at 2-3 prosent av befolkningen over 40 år har glaukom, mens antatt forekomst blant de over 70 år er 15-20 prosent.",
"tasks": "tasks",
"tasks": "Oppgaver",
"task1": "Finn frem mobilen",
"task2": "Ta på deg simuleringsbrillene",
"task3": "Send en melding på slack eller SMS",
Expand All @@ -22,7 +22,7 @@
{
"heading": "Stand 3: Grå stær",
"text": "Grå stær er en sykdom der linsen i øyet mister sin klarhet. Grå stær gir først og fremst nedsatt syn, «tåkesyn», både på avstand og på nært hold. Selv om alder er den viktigste årsaken til grå stær blir noen barn faktisk født med denne sykdommen. Hos yngre mennesker ses sykdommen oftest på grunn av skader eller andre sykdommer i øyet. Grå stær er den ledende årsaken til blindhet i verden.",
"tasks": "tasks",
"tasks": "Oppgaver",
"task1": "Finn frem mobilen",
"task2": "Ta på deg simuleringsbrillene",
"task3": "Gå inn på kameraappen og ta en selfie",
Expand All @@ -32,17 +32,18 @@
{
"heading": "Stand 4: Tremor (skjelving)",
"text": "Tremor er det samme som skjelving. Dette er en ufrivillig, rytmisk, ofte vedvarende aktivering av muskulaturen. Ofte finner ikke legen årsaken til tremor og den kalles da isolert tremor. Den vanligste formen for isolert tremor er essentiell tremor. Dette er en tremor som rammer hendene spesielt. I tillegg kan mange også få litt tremor i nakken/hodet og denne kalles da hodetremor.",
"tasks": "tasks",
"tasks": "Oppgaver",
"task1": "Finn frem mobilen",
"task2": "Ta på deg simuleringshanskene",
"task3": "...",
"color": "sand",
"hands": true
"hands": true,
"warningMessage": "Forsiktighetsregler ved bruk av simuleringshanskene..."
},
{
"heading": "Stand 5: Diabetes retinopati",
"text": "Diabetes retinopati betyr sykdom i øyets netthinne (retina) som følge av diabetes. Dette er den viktigste enkeltårsaken til at personer i yrkesaktiv alder i vestlige land mister synet, helt eller delvis. Personer med diabetisk retinopati kan oppleve svekket syn, blanke områder eller blendende lysflekker når de oppholder seg i sterkt lys. Etter som sykdommen utvikler seg, vil uklart syn, blanke områder og svarte flekker opptre. De svarte flekkene vil kunne flyte omkring i synsfeltet.",
"tasks": "tasks",
"tasks": "Oppgaver",
"task1": "Finn frem mobilen",
"task2": "Ta på deg simuleringsbrillene",
"task3": "...",
Expand All @@ -52,7 +53,7 @@
{
"heading": "Stand 6: Netthinneløsning",
"text": "Symptomer på netthinneløsning er at synet brått forsvinner. Mange beskriver det som en «gardin» som dras for synsfeltet. Synet kan gradvis bedre seg i flere måneder etter operasjon. Det blir imidlertid aldri like bra som før. Etter operasjon opplever opp mot halvparten varig synstap. Nedsatt kontrastsyn og forvrengning av synsinntrykk er vanlige følgetilstander som kan gi problemer med lesing, bilkjøring og nærarbeid.",
"tasks": "tasks",
"tasks": "Oppgaver",
"task1": "Finn frem mobilen",
"task2": "Ta på deg simuleringsbrillene",
"task3": "...",
Expand All @@ -62,7 +63,7 @@
{
"heading": "Stand 7: Retinitis pigmentosa",
"text": "Retinitis pigmentosa (RP) er fellesbetegnelse for en rekke netthinnesykdommer som gir sterk synshemning i form av innsnevret synsfelt eller blindhet. Sykdommen beskrives som å ha kikkertsyn eller tunnelsyn. RP er blant de hyppigste årsakene til alvorlig nedsatt syn hos barn og yngre voksne. Som regel starter RP med at mørkesynet blir dårlig (nattblindhet). Senere er det et stadig mer innsnevret synsfelt (bortfall av sidesyn) som gir de største problemene for mennesker med denne sykdommen.",
"tasks": "tasks",
"tasks": "Oppgaver",
"task1": "Finn frem mobilen",
"task2": "Ta på deg simuleringsbrillene",
"task3": "...",
Expand Down

0 comments on commit 284a7bc

Please sign in to comment.