From 428d9a369200f25270080196099152570ffd410b Mon Sep 17 00:00:00 2001 From: Ian Philips Date: Mon, 15 Aug 2022 13:49:33 -0600 Subject: [PATCH] Move avatar to below card on mobile --- web/components/contract/contract-card.tsx | 27 +++++++++++++------- web/components/contract/contract-details.tsx | 18 ++++++++----- web/components/user-page.tsx | 17 +++++++++--- web/pages/notifications.tsx | 6 ++--- 4 files changed, 46 insertions(+), 22 deletions(-) diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx index b4f20a40..c054abab 100644 --- a/web/components/contract/contract-card.tsx +++ b/web/components/contract/contract-card.tsx @@ -72,7 +72,7 @@ export function ContractCard(props: { className )} > - + {onClick ? ( )} - +

))} - - + + + + {showQuickBet ? ( diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx index 4a9d40af..71998b9d 100644 --- a/web/components/contract/contract-details.tsx +++ b/web/components/contract/contract-details.tsx @@ -34,6 +34,7 @@ import { ContractGroupsList } from 'web/components/groups/contract-groups-list' import { SiteLink } from 'web/components/site-link' import { groupPath } from 'web/lib/firebase/groups' import { insertContent } from '../editor/utils' +import clsx from 'clsx' export type ShowTime = 'resolve-date' | 'close-date' @@ -83,9 +84,8 @@ export function MiscDetails(props: { {!hideGroupLink && groupLinks && groupLinks.length > 0 && ( - {groupLinks[0].name} )} @@ -93,18 +93,24 @@ export function MiscDetails(props: { ) } -export function AvatarDetails(props: { contract: Contract }) { - const { contract } = props +export function AvatarDetails(props: { + contract: Contract + className?: string + short?: boolean +}) { + const { contract, short, className } = props const { creatorName, creatorUsername } = contract return ( - + - + ) } diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx index 2069ef72..f412e38b 100644 --- a/web/components/user-page.tsx +++ b/web/components/user-page.tsx @@ -34,16 +34,25 @@ export function UserLink(props: { username: string showUsername?: boolean className?: string - justFirstName?: boolean + short?: boolean }) { - const { name, username, showUsername, className, justFirstName } = props - + const { name, username, showUsername, className, short } = props + const firstName = name.split(' ')[0] + const maxLength = 10 + const shortName = + firstName.length >= 3 + ? firstName.length < maxLength + ? firstName + : firstName.substring(0, maxLength - 3) + '...' + : name.length > maxLength + ? name.substring(0, maxLength) + '...' + : name return ( - {justFirstName ? name.split(' ')[0] : name} + {short ? shortName : name} {showUsername && ` (@${username})`} ) diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx index a729aca1..7d06c481 100644 --- a/web/pages/notifications.tsx +++ b/web/pages/notifications.tsx @@ -440,7 +440,7 @@ function IncomeNotificationItem(props: { name={sourceUserName || ''} username={sourceUserUsername || ''} className={'mr-1 flex-shrink-0'} - justFirstName={true} + short={true} /> ))} {getReasonForShowingIncomeNotification(false)} {' on'} @@ -609,7 +609,7 @@ function NotificationItem(props: { name={sourceUserName || ''} username={sourceUserUsername || ''} className={'mr-0 flex-shrink-0'} - justFirstName={true} + short={true} />

@@ -681,7 +681,7 @@ function NotificationItem(props: { name={sourceUserName || ''} username={sourceUserUsername || ''} className={'relative mr-1 flex-shrink-0'} - justFirstName={true} + short={true} /> )} {getReasonForShowingNotification(