public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes broken layout of event type description (#7587) 

* fix flicker of event type description

* code clean up

---------

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
pull/7590/head
Carina Wollendorfer 2023-03-08 10:46:23 -05:00 committed by GitHub
parent 8b47c064ff
commit 37038a0cbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/web/pages/[user].tsx
View File

@ -177,26 +177,28 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
<FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
{/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
<Link
prefetch={false}
href={{
pathname: `/${user.username}/${type.slug}`,
query,
}}
onClick={async () => {
sdkActionManager?.fire("eventTypeSelected", {
eventType: type,
});
}}
className="block w-full p-5"
data-testid="event-type-link">
<div className="flex flex-wrap items-center">
<h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
{type.title}
</h2>
</div>
<EventTypeDescription eventType={type} />
</Link>
<div className="block w-full p-5">
<Link
prefetch={false}
href={{
pathname: `/${user.username}/${type.slug}`,
query,
}}
passHref
onClick={async () => {
sdkActionManager?.fire("eventTypeSelected", {
eventType: type,
});
}}
data-testid="event-type-link">
<div className="flex flex-wrap items-center">
<h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
{type.title}
</h2>
</div>
<EventTypeDescription eventType={type} />
</Link>
</div>
</div>
))
)}

46
apps/web/pages/team/[slug].tsx
View File

@ -48,29 +48,31 @@ function TeamPage({ team }: TeamPageProps) {
"dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50",
!isEmbed && "bg-white"
)}>
<Link
href={`/team/${team.slug}/${type.slug}`}
className="flex justify-between px-6 py-4"
data-testid="event-type-link">
<div className="flex-shrink">
<div className="flex flex-wrap items-center space-x-2 rtl:space-x-reverse">
<h2 className="dark:text-darkgray-700 text-sm font-semibold text-gray-700">{type.title}</h2>
<div className="px-6 py-4 ">
<Link
href={`/team/${team.slug}/${type.slug}`}
data-testid="event-type-link"
className="flex justify-between">
<div className="flex-shrink">
<div className="flex flex-wrap items-center space-x-2 rtl:space-x-reverse">
<h2 className="dark:text-darkgray-700 text-sm font-semibold text-gray-700">{type.title}</h2>
</div>
<EventTypeDescription className="text-sm" eventType={type} />
</div>
<EventTypeDescription className="text-sm" eventType={type} />
</div>
<div className="mt-1 self-center">
<AvatarGroup
truncateAfter={4}
className="flex flex-shrink-0"
size="sm"
items={type.users.map((user) => ({
alt: user.name || "",
title: user.name || "",
image: CAL_URL + "/" + user.username + "/avatar.png" || "",
}))}
/>
</div>
</Link>
<div className="mt-1 self-center">
<AvatarGroup
truncateAfter={4}
className="flex flex-shrink-0"
size="sm"
items={type.users.map((user) => ({
alt: user.name || "",
title: user.name || "",
image: CAL_URL + "/" + user.username + "/avatar.png" || "",
}))}
/>
</div>
</Link>
</div>
</li>
))}
</ul>