From d90f4bf0283b0b0f853f7916aa048f3cd2382c0e Mon Sep 17 00:00:00 2001
From: Alexander Schoch <schochal@student.ethz.ch>
Date: Mon, 18 Sep 2023 17:02:58 +0200
Subject: [PATCH] remove ugly margin on eventCard, optimize board images
---
components/boardMemberCard.jsx | 20 ++++++++++++++++++-
components/eventCard.jsx | 36 ++++++++++++++++------------------
2 files changed, 36 insertions(+), 20 deletions(-)
diff --git a/components/boardMemberCard.jsx b/components/boardMemberCard.jsx
index e77bc6b..fc65617 100644
--- a/components/boardMemberCard.jsx
+++ b/components/boardMemberCard.jsx
@@ -1,4 +1,5 @@
import { useRouter } from "next/router";
+import Image from "next/image";
import { Avatar, Button, Paper, Text, useMantineTheme } from "@mantine/core";
@@ -28,7 +29,24 @@ export default function BoardMemberCard({ entry }) {
shadow="sm"
>
<div>
- <Avatar src={entry.image} size={120} radius={20} mx="auto" />
+ <div
+ style={{
+ width: "120px",
+ height: "120px",
+ borderRadius: "1rem",
+ margin: "auto",
+ overflow: "hidden",
+ }}
+ >
+ <Image
+ src={entry.image}
+ width={0}
+ height={0}
+ sizes="100vw"
+ style={{ width: "30rem", maxWidth: "100%", height: "auto" }}
+ alt={entry.name}
+ />
+ </div>
<Text ta="center" fz="lg" weight={500} mt="md">
{entry.name}
</Text>
diff --git a/components/eventCard.jsx b/components/eventCard.jsx
index 827cd29..f869d22 100644
--- a/components/eventCard.jsx
+++ b/components/eventCard.jsx
@@ -153,7 +153,7 @@ export default function EventCard({
</div>
<div>
{!event.isStammtisch && (
- <Group style={{ verticalAlign: "middle", marginTop: "20px" }} grow>
+ <Group mt="xl" style={{ verticalAlign: "middle" }} grow>
{event.signUp ? (
<Button
href={event.signUp}
@@ -185,28 +185,26 @@ export default function EventCard({
)}
</Group>
)}
- <Group grow mt="md" style={{ verticalAlign: "middle" }}>
- {hasAccess(session, true) && (
- <>
+ {hasAccess(session, true) && (
+ <Group grow mt="md" style={{ verticalAlign: "middle" }}>
+ <Button
+ leftIcon={<Icon icon={ICONS.EDIT} color={accentColor} />}
+ variant="light"
+ onClick={() => editEvent(event)}
+ >
+ {t("editEvent")}
+ </Button>
+ {!event.isStammtisch && (
<Button
- leftIcon={<Icon icon={ICONS.EDIT} color={accentColor} />}
+ leftIcon={<Icon icon={ICONS.LIST} color={accentColor} />}
variant="light"
- onClick={() => editEvent(event)}
+ onClick={() => viewSignUps(event)}
>
- {t("editEvent")}
+ {t("viewParticipants")}
</Button>
- {!event.isStammtisch && (
- <Button
- leftIcon={<Icon icon={ICONS.LIST} color={accentColor} />}
- variant="light"
- onClick={() => viewSignUps(event)}
- >
- {t("viewParticipants")}
- </Button>
- )}
- </>
- )}
- </Group>
+ )}
+ </Group>
+ )}
</div>
</Card>
);
--
GitLab