From 3b81c0074c3eead566c193183df3a2abf52832d8 Mon Sep 17 00:00:00 2001 From: Dave Earley Date: Wed, 10 Dec 2025 22:43:12 +0000 Subject: [PATCH] Organizer style updates --- .../common/EventCard/EventCard.module.scss | 28 +++++++++++-------- .../layouts/OrganizerLayout/index.tsx | 22 +++++++++------ .../routes/event/EventDashboard/index.tsx | 2 ++ .../OrganizerDashboard.module.scss | 6 ++-- 4 files changed, 35 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/common/EventCard/EventCard.module.scss b/frontend/src/components/common/EventCard/EventCard.module.scss index 3a8412c75..aa6ce4c69 100644 --- a/frontend/src/components/common/EventCard/EventCard.module.scss +++ b/frontend/src/components/common/EventCard/EventCard.module.scss @@ -4,6 +4,8 @@ overflow: hidden; padding: 0; transition: border-color 0.2s ease, box-shadow 0.2s ease; + container-type: inline-size; + min-width: 280px; &:hover { border-color: var(--mantine-color-gray-4); @@ -42,7 +44,7 @@ color: inherit; min-height: 140px; - @include mixins.respond-below(md) { + @include mixins.respond-below(md, true) { flex-direction: column; min-height: auto; position: relative; @@ -55,7 +57,7 @@ min-width: 200px; overflow: hidden; - @include mixins.respond-below(md) { + @include mixins.respond-below(md, true) { width: 100%; min-width: 100%; height: 140px; @@ -180,7 +182,7 @@ gap: 20px; min-width: 0; - @include mixins.respond-below(md) { + @include mixins.respond-below(md, true) { flex-direction: column; align-items: stretch; padding: 14px; @@ -203,7 +205,11 @@ color: var(--mantine-color-text); line-height: 1.3; transition: color 0.15s ease; - @include mixins.ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } .meta { @@ -284,12 +290,12 @@ border-radius: var(--hi-radius-md); flex-shrink: 0; - @include mixins.respond-below(lg) { + @include mixins.respond-below(lg, true) { gap: 18px; padding: 10px 14px; } - @include mixins.respond-below(md) { + @include mixins.respond-below(md, true) { justify-content: space-around; padding: 12px; } @@ -303,7 +309,7 @@ cursor: default; min-width: 75px; - @include mixins.respond-below(lg) { + @include mixins.respond-below(lg, true) { min-width: 65px; } } @@ -314,7 +320,7 @@ color: var(--mantine-color-text); line-height: 1; - @include mixins.respond-below(lg) { + @include mixins.respond-below(lg, true) { font-size: 16px; } } @@ -325,7 +331,7 @@ color: var(--mantine-color-green-7); line-height: 1; - @include mixins.respond-below(lg) { + @include mixins.respond-below(lg, true) { font-size: 16px; } } @@ -341,7 +347,7 @@ .menuButton { flex-shrink: 0; - @include mixins.respond-below(md) { + @include mixins.respond-below(md, true) { position: absolute; top: 10px; right: 10px; @@ -351,7 +357,7 @@ .actionButton { color: var(--mantine-color-dimmed); - @include mixins.respond-below(md) { + @include mixins.respond-below(md, true) { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); diff --git a/frontend/src/components/layouts/OrganizerLayout/index.tsx b/frontend/src/components/layouts/OrganizerLayout/index.tsx index 2d8aa3116..3e66cb94e 100644 --- a/frontend/src/components/layouts/OrganizerLayout/index.tsx +++ b/frontend/src/components/layouts/OrganizerLayout/index.tsx @@ -3,7 +3,7 @@ import { IconBrandStripe, IconCalendar, IconCalendarPlus, - IconChartBar, + IconChartPie, IconChevronRight, IconCreditCard, IconDashboard, @@ -19,7 +19,7 @@ import {t} from "@lingui/macro"; import {BreadcrumbItem, NavItem} from "../AppLayout/types.ts"; import AppLayout from "../AppLayout"; import {NavLink, useLocation, useParams} from "react-router"; -import {Button, Modal, Text, Stack} from "@mantine/core"; +import {Button, Modal, Stack, Text} from "@mantine/core"; import {useGetOrganizer} from "../../../queries/useGetOrganizer.ts"; import {useState} from "react"; import {CreateEventModal} from "../../modals/CreateEventModal"; @@ -48,7 +48,10 @@ const OrganizerLayout = () => { const [createModalOpen, {open: openCreateModal, close: closeCreateModal}] = useDisclosure(false); const [switchOrganizerModalOpen, {open: openSwitchModal, close: closeSwitchModal}] = useDisclosure(false); const [shareModalOpen, {open: openShareModal, close: closeShareModal}] = useDisclosure(false); - const [emailVerificationModalOpen, {open: openEmailVerificationModal, close: closeEmailVerificationModal}] = useDisclosure(false); + const [emailVerificationModalOpen, { + open: openEmailVerificationModal, + close: closeEmailVerificationModal + }] = useDisclosure(false); const {data: organizerResposne} = useGetOrganizers(); const organizers = organizerResposne?.data; const {data: account} = useGetAccount(); @@ -73,7 +76,7 @@ const OrganizerLayout = () => { { link: 'reports', label: t`Reports`, - icon: IconChartBar, + icon: IconChartPie, isActive: (isActive) => isActive || location.pathname.includes('/report/') }, @@ -146,7 +149,7 @@ const OrganizerLayout = () => { className={classes.createEventBreadcrumb} onClick={() => setShowCreateEventModal(true)} > - {t`Create Event`} + {t`Create Event`} ), } @@ -195,7 +198,8 @@ const OrganizerLayout = () => { : } + leftSection={organizer?.status === 'DRAFT' ? : + } rightSection={} > {organizer?.status === 'DRAFT' @@ -276,10 +280,10 @@ const OrganizerLayout = () => { {t`You must verify your email address before you can update the organizer status.`} - + {!emailConfirmationResent ? ( -