Skip to content

Commit

Permalink
øker responsiviteten til siden
Browse files Browse the repository at this point in the history
  • Loading branch information
@haakoaho
haakoaho committed Jul 6, 2023
1 parent 3f6ff46 commit 472c05e
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 53 deletions.
17 changes: 15 additions & 2 deletions src/summersplash2022/Content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@ const Content = () => {

const [whichButtonSelected, setWhichButtonSelected] = useState('');
const [isMobile, setIsMobile] = useState(false);
const [isPad, setIsPad] = useState(false);

const handleResize = () => {
setIsMobile(window.matchMedia('(max-width: 900px)').matches);
setIsMobile(window.matchMedia('(max-width: 700px)').matches);
setIsPad(window.matchMedia('(min-width: 701px) and (max-width: 1200px)').matches);
};

const handleOnClick = (buttonValue: string) => {
Expand Down Expand Up @@ -93,6 +95,17 @@ const Content = () => {
<h2 className={style.heading}>Hva går sommerjobben ut på?</h2>
<div className={style.section2Flex}>
<div className={style.section2Text}>
{isPad ? (
<div className={style.officeMapMobile}>
<img
src={norwayMap}
alt="Vi ansetter 10 i Trondheim, 10 i Oslo og 3 i Bergen!"
width="100%"
/>
</div>
) : (
<></>
)}
<p className={style.section2Paragraph}>
En sommerjobb i Variant er en fin mulighet til å anvende det
du har lært på skolen i praksis. Det forventes ikke at du er
Expand Down Expand Up @@ -135,7 +148,7 @@ const Content = () => {
hva Variant står for og tilbyr.
</p>
</div>
{!isMobile ? (
{!isMobile && !isPad ? (
<img
src={norwayMap}
alt="Vi ansetter 10 i Trondheim, 10 i Oslo og 3 i Bergen"
Expand Down
37 changes: 20 additions & 17 deletions src/summersplash2022/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@
width: 60%;
margin-top: 5%;
margin-bottom: 5%;
position: relative;
z-index: 2;
/* or 135% */
}

Expand Down Expand Up @@ -214,20 +216,20 @@
}

.section2Paragraph {
width: 74%;
}

.section2Text {
width: 60%;
width: 100%;
}

.section2Flex {
display: flex;
flex-direction: row;
width: 100%;
}

.officeMapMobile {
display: none;
display: block;
position: static;
margin: 0;
width: 100%;
}

/* Section 3 styling */
Expand Down Expand Up @@ -377,12 +379,6 @@
justify-content: center;
}

.søknadstips {
margin-top: 20%;
margin-top: 120px;
margin-bottom: 30%;
}

.section5Div1 {
width: 50%;
}
Expand Down Expand Up @@ -721,7 +717,6 @@
position: static;
margin: 0;
width: 100%;
/* bottom: 50px; */
}

.officeMapSVG {
Expand Down Expand Up @@ -848,12 +843,12 @@

.timeLine {
position: relative;
bottom: 400px;
bottom: 1000px;
margin-top: 0%;
}

.søknadstips {
bottom: 400px;
margin-top: -900px;
}

/* Section 1 mobile*/
Expand Down Expand Up @@ -993,14 +988,15 @@
.summerstudent1Paragraph,
.summerstudent2Paragraph,
.summerstudent3Paragraph {
position: static;
position: relative;
width: 80%;
height: fit-content;
font-family: 'Graphik Web';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
z-index: 2;
}

.summerstudent1Paragraph {
Expand Down Expand Up @@ -1295,8 +1291,15 @@
}
}

@media (max-width: 900px) and (min-width: 720px) {
@media (max-width: 1100px) and (min-width: 720px) {
.EvenPicture {
width: 35%;
}
.timeLine {
position: relative;
bottom: 900px;
}
.søknadstips {
margin-top: -900px;
}
}
4 changes: 1 addition & 3 deletions src/summersplash2022/nyutdannet/nyutdannet.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,12 +300,11 @@ p {
.flexTimeline {
display: flex;
align-items: flex-start;
gap: 2rem;
gap: 0.5rem;
}

.section6Div {
width: 48%;
height: 1200px;
z-index: 1;
}

Expand Down Expand Up @@ -454,7 +453,6 @@ p {
}

.section6Div {
height: 1000px;
width: auto;
}

Expand Down
59 changes: 28 additions & 31 deletions src/summersplash2022/nyutdannet/sections/hvaSkjerEtterSonaadsfristen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const AfterApplying = (props: { red: boolean; applyType: ApplyType }) => {
return (
<section className={style2.section6} id="hvaskjerettersoknadsfristen">
<h2 className={style.heading}>Hva skjer etter søknadsfristen?</h2>
<div className={style2.flexTimeline}>
<div className={style2.section6Div}>
<p className={style.section5ParagraphLeft}>
Vi liker ikke tradisjonelle intervjuer. De plasserer søker i en
Expand All @@ -46,37 +45,34 @@ const AfterApplying = (props: { red: boolean; applyType: ApplyType }) => {
<DarkRedBlob />
</div>
</div>
<div className={style.section5Div2}>
<div className={style.timeLine}>
<img
src={TimeLine}
alt="Søknadsfrist: 1.oktober, Kaffeprat: 4.-5.oktober, tilbud om sommerjobb: 6.oktober

<div className={style.timeLine}>
<img
src={TimeLine}
alt="Søknadsfrist: 1.oktober, Kaffeprat: 4.-5.oktober, tilbud om sommerjobb: 6.oktober
sosiale og faglige arrangementer: november-juni, første arbeidsperiode: 10.juni - 5.juli (4 uker), ferie
8.juli - 26 juli (3 uker), andre arbeidsperiode : 29.juli - 9.august (2 uker) "
style={{ zIndex: 1 }}
/>
</div>
style={{ zIndex: 1 }}
/>
</div>

<div className={style.søknadstips}>
<h4 className={style.section5HeadingH4}>Søknadstips:</h4>
<p className={style.section5Paragraph}>
Vi setter pris på en søknad med CV, søknadsbrev,
karakterutskrift og gjerne også portifolio og/eller GitHub profil. Det viktigste for oss er å få et helhetlig
bilde. Både av deg som person, din eksisterende kompetanse og
dine ambisjoner. Så hvem er du og hvorfor søker du sommerjobb i
Variant? Vi trenger mennesker som bryr seg om å skape en bedre
hverdag. Er det deg?
</p>
</div>
<div className={style.søknadstips}>
<h4 className={style.section5HeadingH4}>Søknadstips:</h4>
<p className={style.section5Paragraph}>
Vi setter pris på en søknad med CV, søknadsbrev, karakterutskrift
og gjerne også portifolio og/eller GitHub profil. Det viktigste
for oss er å få et helhetlig bilde. Både av deg som person, din
eksisterende kompetanse og dine ambisjoner. Så hvem er du og
hvorfor søker du sommerjobb i Variant? Vi trenger mennesker som
bryr seg om å skape en bedre hverdag. Er det deg?
</p>
</div>
</div>
</section>
);
} else {
return (
<section className={style2.section6} id="hvaskjerettersoknadsfristen">
<h3 className={style.heading}>Hva skjer etter søknadsfristen?</h3>
<div className={style2.flexTimeline}>
<div className={style2.section6Div}>
<p className={style.section5ParagraphLeft}>
Vi liker ikke tradisjonelle intervjuer. De plasserer søker i en
Expand All @@ -101,16 +97,16 @@ const AfterApplying = (props: { red: boolean; applyType: ApplyType }) => {
spill- og fagkvelder, nyttårskalas og variantdager, som er fine
muligheter til å bli bedre kjent før man starter.
</p>
<div className={style2.section6Blob}>
<Section6Blob />
</div>
</div>
<div className={style.section5Div2}>
<div className={style.timeLine}>
<img src={TimeLine} alt="tidslinje" style={{ zIndex: 1, marginTop:'50px'}} />
<div>
<img
src={TimeLine}
alt="tidslinje"
style={{ zIndex: 1, marginTop: '50px' }}
/>
</div>

<div className={style.søknadstips}>
<div>
<h4 className={style.section5HeadingH4}>Søknadstips:</h4>
<p className={style.section5Paragraph}>
Vi setter pris på en søknad med CV, søknadsbrev og
Expand All @@ -120,8 +116,9 @@ const AfterApplying = (props: { red: boolean; applyType: ApplyType }) => {
Variant? Vi trenger mennesker som bryr seg om å skape en bedre
hverdag. Er det deg?
</p>
</div>
</div>
</div>
<div className={style2.section6Blob}>
<Section6Blob />
</div>
</section>
);
Expand Down

0 comments on commit 472c05e

Please sign in to comment.