Skip to content

Commit ff66849

Browse files
NoeTerrierNoeTerrier
committed
style: improve global styling
1 parent df1f5d0 commit ff66849

13 files changed

+161
-134
lines changed

‎app/src/components/Button.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import styles from "@/styles/Button.module.scss";
33
export default function Button(props: {
44
text: string;
55
className?: string;
6-
size: "small" | "large";
76
onClick?: () => void;
87
}) {
98
let text = props.text;
109

1110
return (
1211
<>
1312
<div
14-
className={`${styles.button} ${styles[props.size]} ${props.className}`}
13+
className={`${styles.button} ${props.className}`}
1514
onClick={props.onClick}
1615
>
1716
{text}

‎app/src/components/Card.tsx

+2-14
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { getTranslation } from "@/locales";
33
import styles from "@/styles/Card.module.scss";
44
import {
55
AssociationMembership,
6-
Commission,
76
CommissionMembership,
87
Member,
98
} from "@/types/aliases";
@@ -16,15 +15,14 @@ export default function Card(
1615
member: Member;
1716
membership: AssociationMembership | CommissionMembership;
1817
}
19-
| { commission: Commission }
2018
| {
2119
img: any;
2220
title: string;
2321
description: string;
2422
link?: string;
2523
linkTarget?: "_blank";
2624
}
27-
) & { size: "small" | "large"; background?: boolean }
25+
) & { background?: boolean }
2826
) {
2927
const router = useRouter();
3028

@@ -40,14 +38,6 @@ export default function Card(
4038
description = getTranslation(props.membership, router.locale).title;
4139
link = props.member.link;
4240
linkTarget = "_blank";
43-
} else if ("commission" in props) {
44-
img = props.commission.logo;
45-
title = props.commission.name;
46-
description = getTranslation(
47-
props.commission,
48-
router.locale
49-
).small_description;
50-
link = `/commissions/${props.commission.slug}`;
5141
} else {
5242
img = props.img;
5343
title = props.title;
@@ -58,9 +48,7 @@ export default function Card(
5848

5949
const component = (
6050
<div
61-
className={`${styles.card} ${styles[props.size]} ${
62-
props.background ? styles.background : ""
63-
}`}
51+
className={`${styles.card} ${props.background ? styles.background : ""}`}
6452
>
6553
<div className={styles.imageDiv}>
6654
<DirectusImage

‎app/src/components/CommissionCard.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import Button from "./Button";
2+
import DirectusImage from "./DirectusImage";
3+
import { getTranslation, translate } from "@/locales";
4+
import styles from "@/styles/CommissionCard.module.scss";
5+
import { Commission } from "@/types/aliases";
6+
import Link from "next/link";
7+
import { useRouter } from "next/router";
8+
9+
export default function CommissionCard(props: {
10+
commission: Commission;
11+
className?: string;
12+
}) {
13+
const router = useRouter();
14+
15+
let translation = getTranslation(props.commission, useRouter().locale);
16+
let img = translation.banner ? translation.banner : props.commission.logo;
17+
let description = getTranslation(
18+
props.commission,
19+
router.locale
20+
).small_description;
21+
22+
const component = (
23+
<div>
24+
<DirectusImage
25+
img={img}
26+
name={props.commission.name || ""}
27+
className={styles.picture}
28+
cover={translation.banner != null}
29+
/>
30+
<div className={styles.content}>
31+
<h4 className={styles.name}>{props.commission.name}</h4>
32+
<p className={styles.description}>{description}</p>
33+
</div>
34+
</div>
35+
);
36+
37+
return (
38+
<div className={styles.card + " " + props.className || ""}>
39+
<Link
40+
href={`/commissions/${props.commission.slug}`}
41+
style={{ display: "contents" }}
42+
>
43+
{component}
44+
<Button
45+
text={translate("readMore", router.locale)}
46+
className={styles.button}
47+
/>
48+
</Link>
49+
</div>
50+
);
51+
}

‎app/src/components/Gallery.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ export default function Gallery({
1919

2020
imgs = imgs.slice(0, limit);
2121

22-
var content: any = [];
22+
let content: any = [];
2323

24-
var count_5 = 0;
25-
var count_3 = 0;
24+
let count_5 = 0;
25+
let count_3 = 0;
2626
imgs.map((img) => {
27-
var is_long_5 = Math.random() > 0.5 && count_5 < 4;
27+
let is_long_5 = Math.random() > 0.5 && count_5 < 4;
2828
count_5 += is_long_5 ? 2 : 1;
2929
count_5 %= 5;
3030

31-
var is_long_3 = Math.random() > 0.5 && count_3 < 2;
31+
let is_long_3 = Math.random() > 0.5 && count_3 < 2;
3232
count_3 += is_long_3 ? 2 : 1;
3333
count_3 %= 3;
3434

‎app/src/components/MembersList.tsx

+1-6
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,7 @@ export default function MembersList(props: {
1414
<h1>{translate("committee", locale(router), { capitalize: true })}</h1>
1515
<div className={styles.list}>
1616
{props.membership.map((m) => (
17-
<Card
18-
size="small"
19-
key={(m as any).id}
20-
member={m.member}
21-
membership={m}
22-
/>
17+
<Card key={(m as any).id} member={m.member} membership={m} />
2318
))}
2419
</div>
2520
</div>

‎app/src/locales.ts

+3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ interface Translations {
2323
error404: string;
2424
error404desc: string;
2525
gallery: string;
26+
readMore: string;
2627
}
2728

2829
type OptionsOperators = {
@@ -44,6 +45,7 @@ const translations: { [key in Locale]: Translations & OptionsOperators } = {
4445
error404: "error 404",
4546
error404desc: "this page does not exist!",
4647
gallery: "gallery",
48+
readMore: "read more >",
4749
capitalize: (s) => s.replace(/^(\s*\w)/, (s) => s.toUpperCase()),
4850
plural: (s) => s + "s",
4951
},
@@ -61,6 +63,7 @@ const translations: { [key in Locale]: Translations & OptionsOperators } = {
6163
error404: "erreur 404",
6264
error404desc: "cette page n'existe pas!",
6365
gallery: "galerie",
66+
readMore: "lire plus >",
6467
capitalize: (s) => s.replace(/^(\s*\w)/, (s) => s.toUpperCase()),
6568
plural: (s) => (s.endsWith("u") ? s + "x" : s + "s"),
6669
},

‎app/src/pages/commissions.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Card from "@/components/Card";
1+
import CommissionCard from "@/components/CommissionCard";
22
import { directus, populateLayoutProps } from "@/directus";
33
import { locale, translate } from "@/locales";
44
import styles from "@/styles/CommissionsPage.module.scss";
@@ -20,21 +20,21 @@ export default function Commissions(
2020
})}
2121
</h1>
2222
<div className={styles.list}>
23-
{props.news.map((c) => (
24-
<Card key={(c as any).id} commission={c} size="large" background />
23+
{props.commissions.map((c) => (
24+
<CommissionCard className={styles.card} key={c.id} commission={c} />
2525
))}
2626
</div>
2727
</div>
2828
);
2929
}
3030

3131
export const getServerSideProps: GetServerSideProps<{
32-
news: Commission[];
32+
commissions: Commission[];
3333
}> = populateLayoutProps(async (_) => {
3434
const c = await directus().request(
3535
readItems("commissions", {
3636
fields: ["*", { translations: ["*"] }],
3737
})
3838
);
39-
return { props: { news: c } };
39+
return { props: { commissions: c } };
4040
});

‎app/src/pages/commissions/[slug].tsx

+10-11
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,19 @@ export default function Page(
2323
return (
2424
<div className="page">
2525
<div className="center">
26-
<div>
27-
<DirectusImage
28-
className="banner"
29-
img={translation.banner}
30-
cover={true}
31-
/>
32-
<h1 className="large">{props.commission.name}</h1>
33-
<h4>{translation.small_description}</h4>
26+
<DirectusImage
27+
className="banner"
28+
img={translation.banner}
29+
cover={true}
30+
/>
31+
<h1 className="large">{props.commission.name}</h1>
32+
<h4>{translation.small_description}</h4>
3433

35-
<Markdown className="text">{translation.description}</Markdown>
34+
<Markdown className="text">{translation.description}</Markdown>
3635

37-
<SocialsList socials={props.socialLinks} />
38-
</div>
36+
<SocialsList socials={props.socialLinks} />
3937
</div>
38+
<hr />
4039
<MembersList membership={props.members} />
4140
</div>
4241
);

‎app/src/styles/Card.module.scss

+14-67
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
@use "utilities/variables";
33

44
.card {
5+
@extend .glass;
6+
57
display: flex;
8+
flex-direction: row;
69
align-items: center;
710
overflow: hidden;
811

@@ -12,6 +15,7 @@
1215
margin: 0;
1316
margin-bottom: 0.5rem;
1417
font-weight: lighter;
18+
color: variables.$text-color;
1519
}
1620

1721
.content {
@@ -25,6 +29,11 @@
2529

2630
.picture {
2731
overflow: hidden;
32+
min-width: 6rem;
33+
min-height: 6rem;
34+
35+
border: 3px white solid;
36+
border-radius: 50%;
2837
}
2938

3039
.name {
@@ -34,76 +43,14 @@
3443
.description {
3544
font-weight: 300;
3645
text-align: left;
46+
font-size: large;
3747
margin: 0;
3848
}
3949

40-
&.small {
41-
@extend .glass;
42-
flex-direction: row;
43-
44-
padding: 1rem;
45-
46-
width: 19rem;
47-
height: 6rem;
48-
49-
color: variables.$text-color;
50-
51-
h4 {
52-
color: variables.$text-color;
53-
}
54-
55-
.description {
56-
font-size: small;
57-
}
58-
59-
.picture {
60-
min-width: 6rem;
61-
min-height: 6rem;
62-
63-
border: 3px white solid;
64-
border-radius: 50%;
65-
}
66-
}
67-
68-
&.large {
69-
background-color: variables.$white-background-color;
70-
flex-direction: column;
71-
72-
height: 100%;
73-
74-
border-radius: 3rem;
75-
76-
box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
77-
78-
h4 {
79-
font-size: 2rem;
80-
margin-bottom: 1rem;
81-
}
50+
padding: 1rem;
8251

83-
.description {
84-
font-size: medium;
85-
}
52+
width: 19rem;
53+
height: 6rem;
8654

87-
.content {
88-
margin: 2rem;
89-
}
90-
91-
.imageDiv {
92-
width: 100%;
93-
align-items: center;
94-
background-color: white;
95-
padding: 1rem;
96-
}
97-
98-
.picture {
99-
width: 10rem;
100-
height: 10rem;
101-
102-
margin: auto;
103-
104-
border-radius: 2rem;
105-
overflow: hidden;
106-
background-color: white;
107-
}
108-
}
55+
color: variables.$text-color;
10956
}

0 commit comments

Comments
 (0)