Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

189 refactor for text overflow #197

Merged
merged 3 commits into from
May 6, 2024
Merged

189 refactor for text overflow #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f23b7c
Committing i think this is it?
eachen1010 May 5, 2024
896a286
Fixed formatting for Volunteers leaderboard. Fixed issue relating to …
Aokijiop May 6, 2024
a68d294
Merge branch 'main' into 189-refactor-for-text-overflow
Aokijiop May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 14 additions & 23 deletions src/components/Events/EventCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,36 +125,27 @@ const EventCard = ({

<Box
width={sideBySideCard ? undefined : '100%'}
maxW={'88%'}
maxW={{ base: '100px', md: '150px', lg: '275px' }}
alignSelf={'center'}
justifySelf={'center'}
gap={'18px'}
mt={sideBySideCard ? 0 : 5}
mb={sideBySideCard ? 0 : 5}
>
<HappeningInChip date={dateObj} mb={5} />

{name.length > 30 ? (
<Text
fontWeight="800"
fontSize="24px"
lineHeight="30px"
mt={2}
overflowWrap={'break-word'}
>
{name.substring(0, 30)}...
</Text>
) : (
<Text
fontWeight="800"
fontSize={{ base: '20px', md: '24px' }}
lineHeight="30px"
mt={2}
overflowWrap={'break-word'}
>
{name}
</Text>
)}
<Text
fontWeight="800"
fontSize={{ base: '20px', md: '24px' }}
lineHeight="30px"
fontFamily="Avenir"
mt={2}
overflowWrap={'break-word'}
overflow="hidden"
textOverflow="ellipsis"
whiteSpace="nowrap"
>
{name}
</Text>
<Text
fontSize={sideBySideCard ? { base: '12px', md: '15px' } : '16px'}
fontWeight={{ base: 500, md: 300 }}
Expand Down
8 changes: 7 additions & 1 deletion src/components/EventsTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,13 @@ const RenderEventRow = ({ event }) => {
<Flex>
<Image src={image_url} boxSize="4rem" borderRadius="full" />
<Flex direction="column" ml={3} mt={4} g={1} overflow="hidden">
<Text color={'#2D3748'} whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
<Text
color={'#2D3748'}
whiteSpace="nowrap"
overflow="hidden"
textOverflow="ellipsis"
maxWidth={{ base: '100px', xl: '300px' }}
>
{name}
</Text>
</Flex>
Expand Down
12 changes: 11 additions & 1 deletion src/components/Leaderboard/Leaderboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,14 @@ const LeaderboardCard = ({ event_id }) => {
2
</Text>
</Flex>
<Text fontWeight="medium" fontSize={{ base: '16px', xl: '16px' }} textAlign="center">
<Text
fontWeight="medium"
fontSize={{ base: '16px', xl: '16px' }}
textAlign="center"
whiteSpace="nowrap"
maxWidth={{ base: '100px', xl: '150px' }}
overflow="hidden"
>
{LeaderboardArray[1] && LeaderboardArray[1].volunteer_first_name}{' '}
{LeaderboardArray[1] && LeaderboardArray[1].volunteer_last_name}
</Text>
Expand Down Expand Up @@ -118,6 +125,9 @@ const LeaderboardCard = ({ event_id }) => {
fontWeight="semibold"
fontSize={{ base: '16px', xl: '16px' }}
textAlign="center"
whiteSpace="nowrap"
maxWidth={{ base: '100px', xl: '150px' }}
overflow="hidden"
>
{LeaderboardArray[2] && LeaderboardArray[2].volunteer_first_name}{' '}
{LeaderboardArray[2] && LeaderboardArray[2].volunteer_last_name}
Expand Down
19 changes: 10 additions & 9 deletions src/components/Navbar/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,15 +309,16 @@ const Navbar = () => {
>
{/* User name */}
<Text
style={{
fontWeight: '800',
color: '#000000',
fontSize: '14px',
lineHeight: '25px',
textAlign: 'left',
overflowY: 'auto',
marginTop: '-1px',
}}
maxWidth={{ base: '219px', md: '150px', xl: '100px' }}
overflow="hidden"
textOverflow="ellipsis"
fontWeight='800'
color='#000000'
fontSize='14px'
lineHeight='25px'
textAlign='left'
marginTop='-1px'
whiteSpace='nowrap'
>
{user?.first_name} {user?.last_name}
</Text>
Expand Down
4 changes: 2 additions & 2 deletions src/components/VolunteersTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ const RenderVolunteerRow = ({ volunteer }) => {
<>
<Tr key={id} bg="#FFFFFF" fontWeight={'medium'}>
<Td>
<Flex>
<Flex maxWidth={{ base: '200px', md: '300px', lg: '300px', xl: '300px' }}>
<Image src={image_url} boxSize="4rem" borderRadius="full" objectFit={'cover'} />
<Flex direction="column" ml={3} mt={4} g={1} overflow="hidden">
<Flex direction="column" ml={3} mt={4} g={1} maxW="75%">
<Text color={'#2D3748'} whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
{first_name} {last_name}
</Text>
Expand Down
21 changes: 19 additions & 2 deletions src/pages/DummyProfilePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,16 @@ export const DummyProfilePage = () => {
padding={'2%'}
>
<Stack spacing="1">
<Heading size="sm" mt={2} mb={1} maxW={'150px'} margin={3}>
<Heading
size="sm"
mt={2}
mb={1}
maxW={{ base: '150px', md: '200px', xl: '225px' }}
textOverflow="ellipsis"
overflow="hidden"
whiteSpace="nowrap"
margin={3}
>
{`${user.first_name} ${user.last_name}`}
</Heading>
<Center>
Expand Down Expand Up @@ -260,7 +269,15 @@ export const DummyProfilePage = () => {
</Center>
<Center bg={'#efefef'} borderBottomRadius={10}>
<Stack spacing="1">
<Heading size="md" mt={2} mb={1}>
<Heading
size="md"
mt={2}
mb={1}
maxW={{ base: '150px', md: '200px', xl: '225px' }}
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
{`${user.first_name} ${user.last_name}`}
</Heading>
<Center>
Expand Down
8 changes: 7 additions & 1 deletion src/pages/QRCodePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,13 @@ function QRCodePage() {
/>
</Box>

<Box>
<Box
textAlign="center"
maxWidth={{ base: '350px', md: '375px' }}
textOverflow="ellipsis"
whiteSpace="nowrap"
overflow="hidden"
>
<Text fontSize="4xl" as="b" color={'3B3B3B'}>
{volunteerFirstName} {volunteerLastName}
</Text>
Expand Down
59 changes: 40 additions & 19 deletions src/pages/Volunteers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,44 +187,65 @@ const Volunteers = () => {
bg="#D4E4F9"
padding="3"
fontSize="lg"
display="flex"
justifyContent="space-between"
justify="space-between"
alignItems="center"
w="100%"
borderRadius={'4.541px'}
maxWidth={{ base: '300px', md: '300px', lg: '300px', xl: '300px' }}
>
<Flex alignItems="center">
<TrophyIcon marginRight="5" boxSize={'1.25em'} />
<Box
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
maxWidth="10vw" // Adjust the width based on your design
>
<TrophyIcon boxSize={'1.25em'} />
<Flex maxWidth={{ base: '600px', md: '100px', xl: '100px' }}>
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
{topThree[0] && topThree[0].volunteer_first_name}{' '}
{topThree[0] && topThree[0].volunteer_last_name}{' '}
</Box>
</Text>
</Flex>

{/* <Spacer /> */}
<Flex>{topThree[0] && truncate(topThree[0].total_weight, 2)} lbs</Flex>
</Flex>
<Flex display="flex" pl={'2em'} gap={'1em'} w="100%" align={'center'}>
<Flex
display="flex"
pl="2em"
pr="2em"
gap={'1em'}
w="100%"
maxWidth={{ base: '300px', md: '300px', lg: '300px', xl: '300px' }}
justify={'space-between'}
>
<Text color="#0075FF" fontWeight="bold" fontSize={'1.1em'}>
2
</Text>
<Flex>
{topThree[1] && topThree[1].volunteer_first_name}{' '}
{topThree[1] && topThree[1].volunteer_last_name}{' '}
<Flex maxWidth={{ base: '600px', md: '100px', xl: '100px' }}>
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
{topThree[1] && topThree[1].volunteer_first_name}{' '}
{topThree[1] && topThree[1].volunteer_last_name}{' '}
</Text>
</Flex>
<Flex>{topThree[1] && truncate(topThree[1].total_weight, 2)} lbs</Flex>
</Flex>
<Flex display="flex" pl={'2em'} gap={'1em'} w="100%" align={'center'}>
<Flex
display="flex"
pl="2em"
pr="2em"
gap={'1em'}
w="100%"
maxWidth={{ base: '300px', md: '300px', lg: '300px', xl: '300px' }}
justify={'space-between'}
>
<Text color="#0075FF" fontWeight="bold" fontSize={'1.1em'}>
3{' '}
</Text>{' '}
<Flex>
{topThree[2] && topThree[2].volunteer_first_name}{' '}
{topThree[2] && topThree[2].volunteer_last_name}{' '}
<Flex
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
maxWidth={{ base: '100px', md: '600px', xl: '100px' }}
>
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
{topThree[2] && topThree[2].volunteer_first_name}{' '}
{topThree[2] && topThree[2].volunteer_last_name}{' '}
</Text>
</Flex>
<Flex>{topThree[2] && truncate(topThree[2].total_weight, 2)} lbs</Flex>
</Flex>
Expand Down
Loading