Skip to content

Commit 6f4af16

Browse files
daveearleydaveearley
authored
Merge pull request #955 from HiEventsDev/develop
2 parents b112d41 + 722e9ac commit 6f4af16

File tree

36 files changed

+3697
-3559
lines changed

36 files changed

+3697
-3559
lines changed

‎frontend/src/components/common/EventCard/EventCard.module.scss‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
overflow: hidden;
55
padding: 0;
66
transition: border-color 0.2s ease, box-shadow 0.2s ease;
7+
container-type: inline-size;
8+
min-width: 280px;
79

810
&:hover {
911
border-color: var(--mantine-color-gray-4);
@@ -42,7 +44,7 @@
4244
color: inherit;
4345
min-height: 140px;
4446

45-
@include mixins.respond-below(md) {
47+
@include mixins.respond-below(md, true) {
4648
flex-direction: column;
4749
min-height: auto;
4850
position: relative;
@@ -55,7 +57,7 @@
5557
min-width: 200px;
5658
overflow: hidden;
5759

58-
@include mixins.respond-below(md) {
60+
@include mixins.respond-below(md, true) {
5961
width: 100%;
6062
min-width: 100%;
6163
height: 140px;
@@ -180,7 +182,7 @@
180182
gap: 20px;
181183
min-width: 0;
182184

183-
@include mixins.respond-below(md) {
185+
@include mixins.respond-below(md, true) {
184186
flex-direction: column;
185187
align-items: stretch;
186188
padding: 14px;
@@ -203,7 +205,11 @@
203205
color: var(--mantine-color-text);
204206
line-height: 1.3;
205207
transition: color 0.15s ease;
206-
@include mixins.ellipsis;
208+
display: -webkit-box;
209+
-webkit-line-clamp: 2;
210+
line-clamp: 2;
211+
-webkit-box-orient: vertical;
212+
overflow: hidden;
207213
}
208214

209215
.meta {
@@ -284,12 +290,12 @@
284290
border-radius: var(--hi-radius-md);
285291
flex-shrink: 0;
286292

287-
@include mixins.respond-below(lg) {
293+
@include mixins.respond-below(lg, true) {
288294
gap: 18px;
289295
padding: 10px 14px;
290296
}
291297

292-
@include mixins.respond-below(md) {
298+
@include mixins.respond-below(md, true) {
293299
justify-content: space-around;
294300
padding: 12px;
295301
}
@@ -303,7 +309,7 @@
303309
cursor: default;
304310
min-width: 75px;
305311

306-
@include mixins.respond-below(lg) {
312+
@include mixins.respond-below(lg, true) {
307313
min-width: 65px;
308314
}
309315
}
@@ -314,7 +320,7 @@
314320
color: var(--mantine-color-text);
315321
line-height: 1;
316322

317-
@include mixins.respond-below(lg) {
323+
@include mixins.respond-below(lg, true) {
318324
font-size: 16px;
319325
}
320326
}
@@ -325,7 +331,7 @@
325331
color: var(--mantine-color-green-7);
326332
line-height: 1;
327333

328-
@include mixins.respond-below(lg) {
334+
@include mixins.respond-below(lg, true) {
329335
font-size: 16px;
330336
}
331337
}
@@ -341,7 +347,7 @@
341347
.menuButton {
342348
flex-shrink: 0;
343349

344-
@include mixins.respond-below(md) {
350+
@include mixins.respond-below(md, true) {
345351
position: absolute;
346352
top: 10px;
347353
right: 10px;
@@ -351,7 +357,7 @@
351357
.actionButton {
352358
color: var(--mantine-color-dimmed);
353359

354-
@include mixins.respond-below(md) {
360+
@include mixins.respond-below(md, true) {
355361
background: rgba(255, 255, 255, 0.9);
356362
backdrop-filter: blur(4px);
357363

‎frontend/src/components/layouts/AppLayout/AppLayout.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@
3333
background-color: #f9fafc;
3434

3535
@include mixins.scrollbar;
36+
37+
@media (max-width: 767px) {
38+
padding: 16px 16px 56px;
39+
}
3640
}
3741

3842
.sidebarOpen {

‎frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss‎

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,43 +13,47 @@
1313
.topBarMain {
1414
display: flex;
1515
align-items: center;
16-
padding: var(--hi-spacing-md);
16+
padding: 0 16px;
1717
height: 60px;
18+
19+
@include mixins.respond-below(md) {
20+
padding: 0 12px;
21+
}
1822
}
1923

2024
.breadcrumbsRow {
21-
padding: 6px var(--hi-spacing-md) 8px;
22-
padding-top: 7px;
25+
padding: 10px 20px;
2326
border-top: 1px solid rgba(0, 0, 0, 0.05);
2427
background-color: #fff;
2528
backdrop-filter: blur(8px);
2629
display: flex;
2730
align-items: center;
2831
justify-content: space-between;
32+
gap: 12px;
2933
border-top-left-radius: var(--hi-radius-md);
3034
box-shadow: 3px 0px 8px rgb(0 0 0 / 8%);
3135
position: relative;
3236
z-index: 5;
33-
min-height: 50px;
34-
35-
&::before {
36-
content: '';
37-
position: absolute;
38-
top: -1px;
39-
left: 0;
40-
width: 16px;
41-
height: 16px;
42-
background-color: #fff;
43-
border-top-left-radius: 16px;
44-
z-index: -1;
45-
}
37+
min-height: 44px;
4638

4739
@include mixins.respond-below(md) {
4840
border-top-left-radius: 0;
41+
padding: 10px 16px;
42+
}
43+
}
4944

50-
&::before {
45+
.breadcrumbContentRight {
46+
flex-shrink: 0;
47+
48+
@include mixins.respond-below(sm) {
49+
// Hide text in buttons, show only icons on very small screens
50+
:global(.mantine-Button-label) {
5151
display: none;
5252
}
53+
54+
:global(.mantine-Button-section) {
55+
margin: 0;
56+
}
5357
}
5458
}
5559

@@ -59,7 +63,8 @@
5963
align-items: center;
6064
font-size: 0.85rem;
6165
color: var(--hi-text-light);
62-
width: 100%;
66+
flex: 1;
67+
min-width: 0;
6368
overflow-x: auto;
6469
white-space: nowrap;
6570
scrollbar-width: none;
@@ -69,10 +74,36 @@
6974
display: none;
7075
}
7176

77+
// Mantine Breadcrumbs container
78+
:global(.mantine-Breadcrumbs-root) {
79+
flex-wrap: nowrap;
80+
min-width: 0;
81+
}
82+
83+
:global(.mantine-Breadcrumbs-breadcrumb) {
84+
@include mixins.ellipsis();
85+
max-width: 200px;
86+
87+
@include mixins.respond-below(md) {
88+
max-width: 120px;
89+
}
90+
91+
@include mixins.respond-below(sm) {
92+
max-width: 80px;
93+
}
94+
95+
// Don't truncate the last breadcrumb (often an action like "Create Event")
96+
&:last-child {
97+
max-width: none;
98+
flex-shrink: 0;
99+
}
100+
}
101+
72102
a {
73103
color: var(--hi-text-light);
74104
transition: color 0.2s ease;
75105
position: relative;
106+
@include mixins.ellipsis();
76107

77108
&:hover {
78109
color: var(--hi-text);

‎frontend/src/components/layouts/AppLayout/Topbar/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import {NavLink} from "react-router";
33
import {Breadcrumbs, Burger} from '@mantine/core';
4-
import {IconHome} from "@tabler/icons-react";
54
import classes from './Topbar.module.scss';
65
import {BreadcrumbItem} from "../types";
76
import {GlobalMenu} from "../../../common/GlobalMenu";
@@ -55,8 +54,7 @@ export const Topbar: React.FC<TopbarProps> = ({
5554

5655
<div className={classes.breadcrumbsRow}>
5756
<div className={classes.breadcrumbs}>
58-
<IconHome size={16} style={{marginRight: '8px', opacity: 0.6, minWidth: '16px'}}/>
59-
<Breadcrumbs separator={<span style={{margin: '0 0px', color: '#aaa'}}>/</span>}>
57+
<Breadcrumbs separator={<span style={{margin: '0 4px', color: '#aaa'}}>/</span>}>
6058
{breadcrumbItems.map((item, index) => (
6159
<NavLink key={index} to={item.link ?? '#'}>
6260
{item.content}

‎frontend/src/components/layouts/Event/index.tsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -131,23 +131,17 @@ const EventLayout = () => {
131131
const screenWidth = useWindowWidth();
132132
const breadcrumbItemsWidth = screenWidth > 1100 ? 60 : 23;
133133

134-
const breadcrumbItems: BreadcrumbItem[] = [
134+
const breadcrumbItems: BreadcrumbItem[] = isEventFetched ? [
135135
{
136-
link: '/manage/events',
137-
content: t`Home`
136+
link: `/manage/organizer/${event?.organizer?.id}`,
137+
content: <Truncate length={breadcrumbItemsWidth} text={event?.organizer?.name} showTooltip={false}/>
138138
},
139-
...(isEventFetched ? [
140-
{
141-
link: `/manage/organizer/${event?.organizer?.id}`,
142-
content: <Truncate length={breadcrumbItemsWidth} text={event?.organizer?.name} showTooltip={false}/>
143-
},
144-
{
145-
link: `/manage/event/${event?.id}`,
146-
content: <Truncate length={breadcrumbItemsWidth} text={event?.title} showTooltip={false}/>
147-
}
148-
] : [
149-
{link: '#', content: '...'}
150-
])
139+
{
140+
link: `/manage/event/${event?.id}`,
141+
content: <Truncate length={breadcrumbItemsWidth} text={event?.title} showTooltip={false}/>
142+
}
143+
] : [
144+
{link: '#', content: '...'}
151145
];
152146

153147
const handleStatusToggle = () => {

‎frontend/src/components/layouts/OrganizerLayout/index.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
IconBrandStripe,
44
IconCalendar,
55
IconCalendarPlus,
6-
IconChartBar,
6+
IconChartPie,
77
IconChevronRight,
88
IconCreditCard,
99
IconDashboard,
@@ -19,7 +19,7 @@ import {t} from "@lingui/macro";
1919
import {BreadcrumbItem, NavItem} from "../AppLayout/types.ts";
2020
import AppLayout from "../AppLayout";
2121
import {NavLink, useLocation, useParams} from "react-router";
22-
import {Button, Modal, Text, Stack} from "@mantine/core";
22+
import {Button, Modal, Stack, Text} from "@mantine/core";
2323
import {useGetOrganizer} from "../../../queries/useGetOrganizer.ts";
2424
import {useState} from "react";
2525
import {CreateEventModal} from "../../modals/CreateEventModal";
@@ -48,7 +48,10 @@ const OrganizerLayout = () => {
4848
const [createModalOpen, {open: openCreateModal, close: closeCreateModal}] = useDisclosure(false);
4949
const [switchOrganizerModalOpen, {open: openSwitchModal, close: closeSwitchModal}] = useDisclosure(false);
5050
const [shareModalOpen, {open: openShareModal, close: closeShareModal}] = useDisclosure(false);
51-
const [emailVerificationModalOpen, {open: openEmailVerificationModal, close: closeEmailVerificationModal}] = useDisclosure(false);
51+
const [emailVerificationModalOpen, {
52+
open: openEmailVerificationModal,
53+
close: closeEmailVerificationModal
54+
}] = useDisclosure(false);
5255
const {data: organizerResposne} = useGetOrganizers();
5356
const organizers = organizerResposne?.data;
5457
const {data: account} = useGetAccount();
@@ -73,7 +76,7 @@ const OrganizerLayout = () => {
7376
{
7477
link: 'reports',
7578
label: t`Reports`,
76-
icon: IconChartBar,
79+
icon: IconChartPie,
7780
isActive: (isActive) => isActive || location.pathname.includes('/report/')
7881
},
7982

@@ -136,21 +139,17 @@ const OrganizerLayout = () => {
136139
};
137140

138141
const breadcrumbItems: BreadcrumbItem[] = [
139-
{
140-
link: '/manage/events',
141-
content: t`Events`
142-
},
143142
{
144143
link: `/manage/organizer/${organizerId}`,
145144
content: organizer?.name,
146145
},
147146
{
148147
content: (
149-
<span
148+
<span
150149
className={classes.createEventBreadcrumb}
151150
onClick={() => setShowCreateEventModal(true)}
152151
>
153-
<IconCalendarPlus size={16} /> {t`Create Event`}
152+
<IconCalendarPlus size={16}/> {t`Create Event`}
154153
</span>
155154
),
156155
}
@@ -199,7 +198,8 @@ const OrganizerLayout = () => {
199198
<TopBarButton
200199
onClick={handleStatusToggle}
201200
size="sm"
202-
leftSection={organizer?.status === 'DRAFT' ? <IconEyeOff size={16}/> : <IconEye size={16}/>}
201+
leftSection={organizer?.status === 'DRAFT' ? <IconEyeOff size={16}/> :
202+
<IconEye size={16}/>}
203203
rightSection={<IconChevronRight size={14}/>}
204204
>
205205
{organizer?.status === 'DRAFT'
@@ -280,10 +280,10 @@ const OrganizerLayout = () => {
280280
<Text size="sm" c="dimmed">
281281
{t`You must verify your email address before you can update the organizer status.`}
282282
</Text>
283-
283+
284284
{!emailConfirmationResent ? (
285-
<Button
286-
variant="light"
285+
<Button
286+
variant="light"
287287
onClick={() => {
288288
handleEmailConfirmationResend();
289289
}}

‎frontend/src/components/routes/event/EventDashboard/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,8 @@ export const EventDashboard = () => {
287287

288288
<AreaChart
289289
h={300}
290+
pl={40}
291+
pr={40}
290292
data={eventStats?.daily_stats.map(stat => {
291293
return ({
292294
date: formatDateWithLocale(stat.date, 'chartDate', event.timezone),

‎frontend/src/components/routes/organizer/OrganizerDashboard/OrganizerDashboard.module.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -163,8 +163,8 @@
163163
grid-template-columns: 1fr;
164164
gap: 3rem;
165165

166-
@include mixins.respond-above(md) {
167-
grid-template-columns: 1fr 2fr;
166+
@include mixins.respond-above(lg) {
167+
grid-template-columns: minmax(300px, 1fr) 2fr;
168168
gap: 1.5rem;
169169
align-items: stretch;
170170
}
@@ -186,7 +186,7 @@
186186
order: 2;
187187
}
188188

189-
@include mixins.respond-above(md) {
189+
@include mixins.respond-above(lg) {
190190
.eventsSection {
191191
order: 2;
192192
}

‎frontend/src/locales/de.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)