Skip to content

Commit bb44ad7

Browse files
OdaRundeOdaRunde
committed
Merge branch 'main' into Show-waitlist-label
2 parents ba01f0f + 94d4ad5 commit bb44ad7

File tree

10 files changed

+181
-169
lines changed

10 files changed

+181
-169
lines changed

‎frontend/src/app/_components/LandingHero/Organizations.tsx‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { ArrowBack, ArrowForward } from "@mui/icons-material";
1+
import { ArrowLeft, ArrowRight } from "@mui/icons-material";
22
import { Box, Button, IconButton } from "@mui/material";
33
import { styled } from "@mui/system";
44
import Link from "next/link";
5-
import { FreeMode, Navigation } from "swiper";
6-
import { Swiper, SwiperSlide } from "swiper/react";
5+
import { FreeMode, Mousewheel, Navigation } from "swiper";
76
import "swiper/css";
7+
import { Swiper, SwiperSlide } from "swiper/react";
88

9-
import { OrganizationLink, Organization } from "./OrganizationLink";
9+
import { Organization, OrganizationLink } from "./OrganizationLink";
1010

1111
const organizations: Readonly<Organization[]> = [
1212
{ name: "Janus", internalUrl: "/janus/info" },
@@ -55,28 +55,38 @@ type Props = {
5555
onActiveIndexChange: (index: number) => void;
5656
};
5757

58-
export const Organizations: React.FC<Props> = ({ offsetX, onActiveIndexChange }) => {
58+
const Organizations: React.FC<Props> = ({ offsetX, onActiveIndexChange }) => {
5959
return (
6060
<>
61-
<ArrowStyle className="arrow left" aria-label="Forrige">
62-
<ArrowBack />
61+
<ArrowStyle className="arrow left">
62+
<ArrowLeft />
6363
</ArrowStyle>
6464
<Box
65-
sx={{ "& .swiper-slide": { my: "auto" }, "& .swiper": { overflow: "visible" } }}
65+
sx={{
66+
"& .swiper-slide": { my: "auto" },
67+
"& .swiper": { overflow: "visible" },
68+
overscrollBehavior: "none",
69+
}}
6670
position="absolute"
6771
right={0}
6872
width={`calc(100vw - ${offsetX}px)`}
6973
>
7074
<Swiper
71-
modules={[Navigation, FreeMode]}
75+
modules={[Navigation, FreeMode, Mousewheel]}
7276
onActiveIndexChange={(swiper) => onActiveIndexChange(swiper.activeIndex)}
7377
navigation={{ nextEl: ".arrow.right", prevEl: ".arrow.left" }}
7478
spaceBetween={16}
79+
mousewheel={{
80+
forceToAxis: true,
81+
}}
7582
slidesPerView={0.8}
7683
freeMode={{
7784
enabled: true,
78-
momentumRatio: 0.5,
79-
momentumVelocityRatio: 0.5,
85+
momentum: true,
86+
momentumRatio: 0.25,
87+
momentumVelocityRatio: 0.25,
88+
minimumVelocity: 0.05,
89+
momentumBounce: false,
8090
}}
8191
breakpoints={{
8292
930: {
@@ -98,16 +108,18 @@ export const Organizations: React.FC<Props> = ({ offsetX, onActiveIndexChange })
98108
))}
99109
<SwiperSlide>
100110
<Link passHref href="/about/organization">
101-
<Button color="primary" variant="contained" size="large" endIcon={<ArrowForward />}>
111+
<Button color="secondary" variant="contained" size="large" endIcon={<ArrowRight />}>
102112
Alle organisasjoner
103113
</Button>
104114
</Link>
105115
</SwiperSlide>
106116
</Swiper>
107117
</Box>
108-
<ArrowStyle className="arrow right" aria-label="Neste">
109-
<ArrowForward />
118+
<ArrowStyle className="arrow right">
119+
<ArrowRight />
110120
</ArrowStyle>
111121
</>
112122
);
113123
};
124+
125+
export default Organizations;

‎frontend/src/app/_components/LandingHero/OrganizationsSlider.tsx‎

Lines changed: 59 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,72 @@
11
"use client";
22

3-
import { ArrowForward } from "@mui/icons-material";
4-
import { Button, Container, NoSsr, Stack, Typography } from "@mui/material";
5-
import { useTheme } from "@mui/material/styles";
6-
// Import Swiper React components
7-
import { Swiper, SwiperSlide } from "swiper/react";
3+
import { Box, Container, Fade, Stack, Typography } from "@mui/material";
4+
import { useEffect, useRef, useState } from "react";
85

9-
// Import Swiper styles
10-
import "swiper/css";
6+
import Organizations from "./Organizations";
117

12-
import { Link } from "@/app/components/Link";
8+
const OrganizationsSlider: React.FC = () => {
9+
const orgsTitleEl = useRef<HTMLElement>();
1310

14-
import { Organization, OrganizationLink } from "./OrganizationLink";
11+
const [sliderActiveIndex, setSliderActiveIndex] = useState(0);
12+
const [sliderOffsetX, setSliderOffsetX] = useState(0);
13+
const [refInView, setRefInView] = useState(false);
1514

16-
const organizations: Readonly<Organization[]> = [
17-
{ name: "Janus Sosial", internalUrl: "/janus" },
18-
{ name: "Bindeleddet", externalUrl: "https://www.bindeleddet.no" },
19-
{ name: "ESTIEM", externalUrl: "https://sites.google.com/view/estiem-ntnu" },
20-
{ name: "Janus Kultur", internalUrl: "/about/organization?category=kultur" },
21-
{ name: "Rubberdøk", internalUrl: "/about/organizations/rubberdok" },
22-
{ name: "Janushyttene", internalUrl: "/about/organizations/Janushyttene" },
23-
{ name: "Janus IF", internalUrl: "/about/organization?category=idrett" },
24-
] as const;
15+
const onActiveIndexChange = (index: number) => {
16+
setSliderActiveIndex(index);
17+
};
2518

26-
export const OrganizationsSlider: React.FC = () => {
27-
const theme = useTheme();
19+
const updateSliderOffset = () => {
20+
if (orgsTitleEl.current) {
21+
setSliderOffsetX(orgsTitleEl.current.offsetWidth + orgsTitleEl.current.offsetLeft);
22+
setRefInView(true);
23+
}
24+
};
25+
26+
useEffect(() => {
27+
updateSliderOffset();
28+
window.addEventListener("resize", updateSliderOffset);
29+
return () => {
30+
window.removeEventListener("resize", updateSliderOffset);
31+
};
32+
}, []);
2833

2934
return (
30-
<Container maxWidth={false} disableGutters sx={{ bgcolor: "background.elevated" }}>
35+
<Box
36+
sx={{
37+
width: "100%",
38+
py: { xs: 4, md: 6 },
39+
px: 1,
40+
bgcolor: "background.elevated",
41+
borderTop: "1px solid",
42+
borderBottom: "1px solid",
43+
borderColor: "divider",
44+
overflow: "hidden",
45+
position: "relative",
46+
overscrollBehavior: "none",
47+
}}
48+
>
3149
<Container>
32-
<Stack
33-
direction="row"
34-
sx={{
35-
"& .swiper-slide": {
36-
width: "min-content",
37-
display: "flex",
38-
alignItems: "center",
39-
},
40-
minHeight: `calc(2rem + ${theme.spacing(15)})`,
41-
}}
42-
>
43-
<NoSsr>
44-
<Swiper cssMode spaceBetween={parseInt(theme.spacing(4))} slidesPerView="auto" direction="horizontal">
45-
<SwiperSlide>
46-
<Typography variant="h4" component="h2">
47-
Våre
48-
<br />
49-
foreninger
50-
</Typography>
51-
</SwiperSlide>
52-
{organizations.map((org) => (
53-
<SwiperSlide key={org.name} style={{ padding: theme.spacing(4, 0) }}>
54-
<OrganizationLink organization={org} />
55-
</SwiperSlide>
56-
))}
57-
<SwiperSlide>
58-
<Button
59-
component={Link}
60-
noLinkStyle
61-
href="/about/organization"
62-
color="secondary"
63-
variant="contained"
64-
size="large"
65-
endIcon={<ArrowForward />}
66-
>
67-
<Typography variant="inherit" noWrap>
68-
Alle organisasjoner
69-
</Typography>
70-
</Button>
71-
</SwiperSlide>
72-
</Swiper>
73-
</NoSsr>
74-
</Stack>
50+
<Fade in={refInView}>
51+
<Stack direction="row" minWidth="max-content" alignItems="center">
52+
<Box ref={orgsTitleEl}>
53+
<Typography
54+
variant="h4"
55+
sx={{
56+
opacity: sliderActiveIndex == 0 ? 1 : 0,
57+
transition: (theme) => theme.transitions.create("opacity"),
58+
}}
59+
>
60+
Våre <br />
61+
Foreninger
62+
</Typography>
63+
</Box>
64+
<Organizations onActiveIndexChange={onActiveIndexChange} offsetX={sliderOffsetX + 48} />
65+
</Stack>
66+
</Fade>
7567
</Container>
76-
</Container>
68+
</Box>
7769
);
7870
};
71+
72+
export default OrganizationsSlider;

‎frontend/src/app/_components/LandingHero/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Image from "next/image";
66
import { Link } from "@/app/components/Link";
77
import Hero from "~/public/static/landing/hero.webp";
88

9-
import { OrganizationsSlider } from "./OrganizationsSlider";
9+
import OrganizationsSlider from "./OrganizationsSlider";
1010

1111
export const LandingHero: React.FC = () => {
1212
return (
@@ -28,7 +28,7 @@ export const LandingHero: React.FC = () => {
2828
gridTemplateColumns: "repeat(12, 1fr)",
2929
}}
3030
>
31-
<Box gridColumn={{ md: "1 / 8", xs: "1 / -1" }} display="flex" justifyContent="center">
31+
<Box gridColumn={{ md: "auto", xs: "1 / -1" }} display="flex" justifyContent="center">
3232
<Grid
3333
container
3434
direction="column"
@@ -49,7 +49,7 @@ export const LandingHero: React.FC = () => {
4949
</Typography>
5050
</Grid>
5151
<Grid>
52-
<Typography variant="h1" textAlign={{ xs: "center", md: "left" }}>
52+
<Typography variant="h1" textAlign={{ xs: "center", md: "left" }} letterSpacing={"-0.02em"}>
5353
Industriell Økonomi & Teknologiledelse
5454
</Typography>
5555
</Grid>

‎frontend/src/app/components/Layout/AppBar/navigation/constants.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const routes: Route[] = [
55
title: "Arrangementer",
66
path: "/events",
77
},
8-
{ title: "Verv", path: "/listings" },
8+
{ title: "Ledige vervstillinger", path: "/listings" },
99
{ title: "Hyttebooking", path: "/cabins" },
1010
{ title: "Dokumenter", path: "/archive", permission: "archive.view_archivedocument" },
1111
{ title: "Om oss", path: "/about" },

‎frontend/src/components/pages/events/AllEvents.tsx‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useQuery } from "@apollo/client";
22
import { ResultOf } from "@graphql-typed-document-node/core";
33
import { Tune } from "@mui/icons-material";
4-
import { Button, Drawer, Unstable_Grid2 as Grid, Skeleton, Stack, Typography } from "@mui/material";
4+
import { Box, Button, Drawer, Unstable_Grid2 as Grid, Skeleton, Stack, Typography } from "@mui/material";
55
import React, { useState } from "react";
66

77
import { PermissionRequired } from "@/components";
@@ -104,15 +104,15 @@ export const AllEvents: React.FC = () => {
104104
});
105105

106106
return (
107-
<Grid container direction="row" spacing={2}>
107+
<Grid container direction="row" spacing={4}>
108108
<PermissionRequired permission="events.add_event">
109109
<Grid xs={12}>
110110
<ManageEvents />
111111
</Grid>
112112
</PermissionRequired>
113113
<Grid xs display={{ xs: "block", md: "none" }}>
114114
<Button
115-
variant="outlined"
115+
variant="contained"
116116
color="secondary"
117117
fullWidth
118118
startIcon={<Tune />}
@@ -121,22 +121,17 @@ export const AllEvents: React.FC = () => {
121121
Filter
122122
</Button>
123123
<Drawer anchor="left" open={openFilterDrawer} onClose={() => setOpenFilterDrawer(false)}>
124-
<FilterMenu
125-
filters={filters}
126-
onFiltersChange={handleFilterChange}
127-
showDefaultEvents={showDefaultEvents}
128-
onShowDefaultChange={setShowDefaultEvents}
129-
/>
124+
<Box py={2} px={3}>
125+
<FilterMenu
126+
filters={filters}
127+
onFiltersChange={handleFilterChange}
128+
showDefaultEvents={showDefaultEvents}
129+
onShowDefaultChange={setShowDefaultEvents}
130+
/>
131+
</Box>
130132
</Drawer>
131133
</Grid>
132-
<Grid display={{ xs: "none", md: "block" }} md={3}>
133-
<FilterMenu
134-
filters={filters}
135-
onFiltersChange={handleFilterChange}
136-
showDefaultEvents={showDefaultEvents}
137-
onShowDefaultChange={setShowDefaultEvents}
138-
/>
139-
</Grid>
134+
140135
<Grid xs={12} md={9}>
141136
<Stack direction="column" spacing={4}>
142137
{loading && <EventSkeleton />}
@@ -177,6 +172,14 @@ export const AllEvents: React.FC = () => {
177172
)}
178173
</Stack>
179174
</Grid>
175+
<Grid display={{ xs: "none", md: "block" }} md={3}>
176+
<FilterMenu
177+
filters={filters}
178+
onFiltersChange={handleFilterChange}
179+
showDefaultEvents={showDefaultEvents}
180+
onShowDefaultChange={setShowDefaultEvents}
181+
/>
182+
</Grid>
180183
</Grid>
181184
);
182185
};

‎frontend/src/components/pages/events/EventListItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ type StatusChipProps = {
6060
};
6161

6262
function StatusChip({ event, user }: StatusChipProps): React.ReactElement | null {
63-
if (user.isSignedUp) return <Chip label="Påmeldt" variant="outlined" color="primary" />;
63+
if (user.isSignedUp) return <Chip label="Påmeldt" variant="filled" color="success" />;
6464
if (user.isOnWaitingList) return <Chip label="På venteliste" />;
6565

6666
const signUpOpenDate = event.signupOpenDate ? dayjs(event.signupOpenDate) : undefined;

0 commit comments

Comments
 (0)