diff --git a/src/components/EventRow/EventRow.tsx b/src/components/EventRow/EventRow.tsx
index ba8ca17..e4cd51d 100644
--- a/src/components/EventRow/EventRow.tsx
+++ b/src/components/EventRow/EventRow.tsx
@@ -73,21 +73,22 @@ export const EventRow = ({date, end, title, location, cancelled, href, color = "
[styles.lineWhite]: color === "white",
})}>
-
- {title}
- { showDate &&
- <>
- {dateObj.toLocaleDateString("de-DE", { weekday: "long" })}
- {dayFormat === "long" && " " + dateObj.toLocaleDateString("de-DE", { dateStyle: "short" })}, {dateObj.toLocaleTimeString("de-DE", { timeStyle: "short", timeZone: "Europe/Berlin" })}
- { endObj ? <> - {endObj.toLocaleTimeString("de-DE", { timeStyle: "short", timeZone: "Europe/Berlin" })}> : "" }
- Uhr
-
- >
- }
- {location}
+
+ {title}
+ {cancelled && Abgesagt}
+
+
+ { showDate &&
+ <>
+ {dateObj.toLocaleDateString("de-DE", { weekday: "long" })}
+ {dayFormat === "long" && " " + dateObj.toLocaleDateString("de-DE", { dateStyle: "short" })}, {dateObj.toLocaleTimeString("de-DE", { timeStyle: "short", timeZone: "Europe/Berlin" })}
+ { endObj ? <> - {endObj.toLocaleTimeString("de-DE", { timeStyle: "short", timeZone: "Europe/Berlin" })}> : "" }
+ Uhr
+
+ >
+ }
+ {location}
+
diff --git a/src/components/EventRow/styles.module.scss b/src/components/EventRow/styles.module.scss
index aad0b5a..5f5301a 100644
--- a/src/components/EventRow/styles.module.scss
+++ b/src/components/EventRow/styles.module.scss
@@ -52,7 +52,19 @@
}
.cancelled {
- text-decoration: line-through;
+ color: #757575;
+ // line-through can't be repositioned, so draw an underline and pull it
+ // up into the text; a less negative offset moves the line further down
+ text-decoration: underline;
+ text-decoration-skip-ink: none;
+ text-underline-offset: -0.25em;
+}
+
+.cancelledLabel {
+ margin-left: 8px;
+ font-size: 12px;
+ font-weight: 600;
+ color: #b3261e;
}
.container:hover .dayBase {
diff --git a/src/components/MassTable/MassTableRow.stories.ts b/src/components/MassTable/MassTableRow.stories.ts
index b4f6dc3..62015fe 100644
--- a/src/components/MassTable/MassTableRow.stories.ts
+++ b/src/components/MassTable/MassTableRow.stories.ts
@@ -61,3 +61,12 @@ export const Cancelled: Story = {
cancelled: true,
},
}
+
+export const CancelledLongDayName: Story = {
+ args: {
+ id: '1',
+ date: '2024-08-22T15:00:00.000Z',
+ type: 'WORD',
+ cancelled: true,
+ },
+}
diff --git a/src/components/MassTable/MassTableRow.tsx b/src/components/MassTable/MassTableRow.tsx
index e747b8a..d512e72 100644
--- a/src/components/MassTable/MassTableRow.tsx
+++ b/src/components/MassTable/MassTableRow.tsx
@@ -32,30 +32,34 @@ export const MassTableRow = ({
return (
setSymbol('†')}
onMouseLeave={() => setSymbol('')}
>
-
{day}
-
{symbol}
+
{day}
+
{!cancelled && symbol}
- {time}
+
+ {time}
+
- {type === 'FAMILY' && (
+ {!cancelled && type === 'FAMILY' && (
)}
- {type === 'WORD' && (
+ {!cancelled && type === 'WORD' && (
)}
- {type === 'LANGUAGE' && (
+ {!cancelled && type === 'LANGUAGE' && (
)}
+
+ {cancelled &&
Abgesagt}
)
diff --git a/src/components/MassTable/styles.module.scss b/src/components/MassTable/styles.module.scss
index 0551269..d2e6783 100644
--- a/src/components/MassTable/styles.module.scss
+++ b/src/components/MassTable/styles.module.scss
@@ -6,7 +6,7 @@
height: 24px;
cursor: pointer;
font-size: 18px;
- align-items: flex-start;
+ align-items: baseline;
margin-bottom: 3px;
}
@@ -27,7 +27,16 @@
}
.cancelled {
- text-decoration: line-through;
+ color: #757575;
+ text-decoration: underline;
+ text-decoration-skip-ink: none;
+ text-underline-offset: -0.25em;
+}
+
+.cancelledLabel {
+ font-size: 12px;
+ font-weight: 600;
+ color: #b3261e;
}
.symbol {
@@ -39,6 +48,7 @@
.day {
flex-shrink: 0;
width: 90px;
+ line-height: 1.2em;
}
.time {