Skip to content

Commit

Permalink
Mobilvisning
Browse files Browse the repository at this point in the history
  • Loading branch information
@bjornarne
bjornarne committed May 23, 2024
1 parent f0e27f2 commit 3c44913
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 58 deletions.
188 changes: 139 additions & 49 deletions src/app/(minCV)/_components/MinCVPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import styles from "../../page.module.css";
import "@navikt/ds-css";
import { Box, Stepper, HStack, VStack } from "@navikt/ds-react";
import { Box, Stepper, HStack, VStack, Hide, Show, Accordion } from "@navikt/ds-react";
import { useState } from "react";
import DelingAvCV from "@/app/(minCV)/_components/delingAvCV/DelingAvCV";
import Personalia from "@/app/(minCV)/_components/personalia/Personalia";
Expand Down Expand Up @@ -30,54 +30,144 @@ export default function MinCVPage() {
return (
<>
<HeaderPanel />
<HStack style={{ display: "flex", alignItems: "flex-start", justifyContent: "center" }}>
<div className={styles.sidepanel}>
<Stepper
aria-labelledby="stepper-heading"
orientation="vertical"
className={styles.hideStepper}
activeStep={activeStep}
onStepChange={(x) => onStepChange(x)}
>
<Stepper.Step as="button">Deling av CV</Stepper.Step>
<Stepper.Step as="button">Personalia</Stepper.Step>
<Stepper.Step as="button">Jobbønsker</Stepper.Step>
<Stepper.Step as="button">Utdanninger</Stepper.Step>
<Stepper.Step as="button">Fagbrev</Stepper.Step>
<Stepper.Step as="button">Arbeidsforhold</Stepper.Step>
<Stepper.Step as="button">Andre erfaringer</Stepper.Step>
<Stepper.Step as="button">Kompetanser</Stepper.Step>
<Stepper.Step as="button">Offentlige godkjenninger</Stepper.Step>
<Stepper.Step as="button">Andre godkjenninger</Stepper.Step>
<Stepper.Step as="button">Språk</Stepper.Step>
<Stepper.Step as="button">Førerkort</Stepper.Step>
<Stepper.Step as="button">Kurs</Stepper.Step>
<Stepper.Step as="button">Sammendrag</Stepper.Step>
</Stepper>
</div>
<div>
<Box className={styles.main}>
<HStack gap="4">
<VStack>
{activeStep === 1 && <DelingAvCV />}
{activeStep === 2 && <Personalia />}
{activeStep === 3 && <Jobbonsker />}
{activeStep === 4 && <Utdanninger />}
{activeStep === 5 && <Fagbrev />}
{activeStep === 6 && <Arbeidsforhold />}
{activeStep === 7 && <AndreErfaringer />}
{activeStep === 8 && <Kompetanser />}
{activeStep === 9 && <OffentligeGodkjenninger />}
{activeStep === 10 && <AndreGodkjenninger />}
{activeStep === 11 && <Sprak />}
{activeStep === 12 && <Forerkort />}
{activeStep === 13 && <Kurs />}
{activeStep === 14 && <Sammendrag />}
</VStack>
</HStack>
</Box>
</div>
</HStack>
<Hide below="md">
<HStack style={{ display: "flex", alignItems: "flex-start", justifyContent: "center" }}>
<div className={styles.sidepanel}>
<Stepper
aria-labelledby="stepper-heading"
orientation="vertical"
className={styles.hideStepper}
activeStep={activeStep}
onStepChange={(x) => onStepChange(x)}
>
<Stepper.Step as="button">Deling av CV</Stepper.Step>
<Stepper.Step as="button">Personalia</Stepper.Step>
<Stepper.Step as="button">Jobbønsker</Stepper.Step>
<Stepper.Step as="button">Utdanninger</Stepper.Step>
<Stepper.Step as="button">Fagbrev</Stepper.Step>
<Stepper.Step as="button">Arbeidsforhold</Stepper.Step>
<Stepper.Step as="button">Andre erfaringer</Stepper.Step>
<Stepper.Step as="button">Kompetanser</Stepper.Step>
<Stepper.Step as="button">Offentlige godkjenninger</Stepper.Step>
<Stepper.Step as="button">Andre godkjenninger</Stepper.Step>
<Stepper.Step as="button">Språk</Stepper.Step>
<Stepper.Step as="button">Førerkort</Stepper.Step>
<Stepper.Step as="button">Kurs</Stepper.Step>
<Stepper.Step as="button">Sammendrag</Stepper.Step>
</Stepper>
</div>
<div>
<Box className={styles.main}>
<HStack gap="4">
<VStack>
{activeStep === 1 && <DelingAvCV />}
{activeStep === 2 && <Personalia />}
{activeStep === 3 && <Jobbonsker />}
{activeStep === 4 && <Utdanninger />}
{activeStep === 5 && <Fagbrev />}
{activeStep === 6 && <Arbeidsforhold />}
{activeStep === 7 && <AndreErfaringer />}
{activeStep === 8 && <Kompetanser />}
{activeStep === 9 && <OffentligeGodkjenninger />}
{activeStep === 10 && <AndreGodkjenninger />}
{activeStep === 11 && <Sprak />}
{activeStep === 12 && <Forerkort />}
{activeStep === 13 && <Kurs />}
{activeStep === 14 && <Sammendrag />}
</VStack>
</HStack>
</Box>
</div>
</HStack>
</Hide>
<Show below="md">
<Accordion>
<Accordion.Item defaultOpen>
<Accordion.Header>1: Deling av CV</Accordion.Header>
<Accordion.Content>
<DelingAvCV />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>2: Personalia</Accordion.Header>
<Accordion.Content>
<Personalia />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>3: Jobbønsker</Accordion.Header>
<Accordion.Content>
<Jobbonsker />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>4: Utdanninger</Accordion.Header>
<Accordion.Content>
<Utdanninger />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>5: Fagbrev</Accordion.Header>
<Accordion.Content>
<Fagbrev />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>6: Arbeidsforhold</Accordion.Header>
<Accordion.Content>
<Arbeidsforhold />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>7: Andre erfaringer</Accordion.Header>
<Accordion.Content>
<AndreErfaringer />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>8: Kompetanser</Accordion.Header>
<Accordion.Content>
<Kompetanser />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>9: Offentlige godkjenninger</Accordion.Header>
<Accordion.Content>
<OffentligeGodkjenninger />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>10: Andre godkjenninger</Accordion.Header>
<Accordion.Content>
<AndreGodkjenninger />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>11: Språk</Accordion.Header>
<Accordion.Content>
<Sprak />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>12: Førerkort</Accordion.Header>
<Accordion.Content>
<Forerkort />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>13: Kurs</Accordion.Header>
<Accordion.Content>
<Kurs />
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultOpen>
<Accordion.Header>14: Sammendrag</Accordion.Header>
<Accordion.Content>
<Sammendrag />
</Accordion.Content>
</Accordion.Item>
</Accordion>
</Show>
</>
);
}
8 changes: 5 additions & 3 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,11 @@ body {
max-width: 100vw;
}

body {
color: rgb(var(--foreground-rgb));
background: var(--a-bg-subtle);
@media (min-width: 768px) {
body {
color: rgb(var(--foreground-rgb));
background: var(--a-bg-subtle);
}
}

a {
Expand Down
14 changes: 8 additions & 6 deletions src/app/page.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,20 +250,22 @@
.element {
width: 100%;
}
.box {
margin: 2rem -0.8rem -2.8rem;
}
}

@media (min-width: 767px) {
@media (min-width: 768px) {
.element {
width: 48%;
}
.box {
width: 600px;
margin-top: 4rem;
}
}

.divider {
border-top: 1px solid #bbb;
margin-bottom: 1.5rem;
}

.box {
width: 600px;
margin-top: 4rem;
}

0 comments on commit 3c44913

Please sign in to comment.