Skip to content

Commit

Permalink
Styling improvements to individual listing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@DinerIsmail
DinerIsmail committed Nov 25, 2023
1 parent f4806cf commit 022b93f
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 51 deletions.
61 changes: 30 additions & 31 deletions components/listing/Listing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
Grid,
} from '@chakra-ui/react'
import { SiFacebook, SiInstagram, SiTwitter } from 'react-icons/si'
import { ExternalLinkIcon } from '@chakra-ui/icons'
import { SlGlobe } from 'react-icons/sl'
import { HiArrowLeft, HiUserGroup } from 'react-icons/hi'

import DescriptionRichText from '@components/main-list/description-rich-text'
Expand All @@ -25,6 +25,7 @@ import CategoryTag from '@components/category-tag'
import { useCategories } from '@hooks/categories'
import Item from '@components/main-list/item'
import { encodeUriElements } from '@helpers/routes'
import { sanitizeLink } from '@helpers/utils'

function Listing({ listing }) {
const router = useRouter()
Expand Down Expand Up @@ -97,45 +98,43 @@ function Listing({ listing }) {
justifyContent="space-between"
width="100%"
>
<Box>
<HStack justifyContent="space-between">
<Heading as="h1" data-testid="Title" pb={2}>
{listing.title}
</Heading>
<Heading as="h1" data-testid="Title">
{listing.title}
</Heading>
<HStack justifyContent="space-between" mt={8} width="100%">
<Box>
<CategoryTag
mb={2}
colorHex={listing.category.color}
size="md"
>
{listing.category.label}
</CategoryTag>
</HStack>
{listing.seekingVolunteers && (
<Tooltip
borderRadius="md"
label="This group is seeking volunteers or members. Get in touch with them if you'd like to help."
>
<Text color="rw.900">
<Icon as={HiUserGroup} /> Seeking volunteers
</Text>
</Tooltip>
)}
</Box>
<HStack justifyContent="space-between" mt={8} width="100%">
{listing.website && (
<Link href={listing.website} rel="noreferrer" target="_blank">
<Button
size="md"
bg="rw.700"
colorScheme="rw.700"
rightIcon={<ExternalLinkIcon />}
_hover={{ bg: 'rw.900' }}
{listing.seekingVolunteers && (
<Tooltip
borderRadius="md"
label="This group is seeking volunteers or members. Get in touch with them if you'd like to help."
>
Visit website
</Button>
</Link>
)}
<Text color="rw.900">
<Icon as={HiUserGroup} /> Seeking volunteers
</Text>
</Tooltip>
)}
</Box>
<HStack spacing={4}>
{listing.website && (
<Link href={listing.website} target="_blank">
<Icon
as={SlGlobe}
color="gray.600"
cursor="pointer"
w={8}
h={8}
transition="color 150ms"
_hover={{ color: 'gray.500' }}
/>
</Link>
)}
{listing.facebook && (
<Link href={listing.facebook} target="_blank">
<Icon
Expand Down
48 changes: 28 additions & 20 deletions components/main-list/dialog/Dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
} from '@chakra-ui/react'
import { ExternalLinkIcon } from '@chakra-ui/icons'
import { SiFacebook, SiInstagram, SiTwitter } from 'react-icons/si'
import { HiUserGroup, HiShare } from 'react-icons/hi'
import { HiUserGroup, HiOutlineLink } from 'react-icons/hi'
import { sanitizeLink } from '@helpers/utils'
import { REMOTE_HOSTNAME, PROTOCOL } from '@helpers/config'
import DescriptionRichText from '@components/main-list/description-rich-text'
Expand Down Expand Up @@ -156,19 +156,26 @@ const Dialog = ({
/>
)}

<ModalHeader pb={0}>{item.label}</ModalHeader>
<ModalHeader display="flex" alignItems="center" pb={0}>
{item.label}{' '}
<Icon
as={HiOutlineLink}
cursor="pointer"
fontSize="xl"
onClick={handleShareButtonClick}
ml={1}
transition="0.2s"
_hover={{
color: 'rw.900',
}}
/>
</ModalHeader>
<ModalCloseButton size="lg" backgroundColor="rgba(160,174,192,0.4)" />
<ModalBody>
<Flex justifyContent="space-between">
<CategoryTag mb={4} colorHex={item.category.color}>
{item.category.label}
</CategoryTag>
<Icon
as={HiShare}
cursor="pointer"
fontSize="3xl"
onClick={handleShareButtonClick}
/>
</Flex>
<br />

Expand All @@ -193,17 +200,6 @@ const Dialog = ({
<Box mt={4} mb={8}>
<DescriptionRichText html={item.description} />
</Box>
<Link as={NextLink} href={individualListingLink}>
<Button
bg="rw.700"
colorScheme="rw.700"
mt={2}
variant="solid"
_hover={{ bg: 'rw.900' }}
>
See more
</Button>
</Link>

<Box mt={4} display="flex" justifyContent="flex-end">
{item.tags.map((tag) => (
Expand All @@ -220,8 +216,20 @@ const Dialog = ({
</ModalBody>

{!isMobile && (
<ModalFooter justifyContent="space-between" py={2}>
<ModalFooter justifyContent="space-between" py={4}>
{socialLinks}

<Link as={NextLink} href={individualListingLink}>
<Button
bg="rw.700"
colorScheme="rw.700"
mt={2}
variant="solid"
_hover={{ bg: 'rw.900' }}
>
Go to listing
</Button>
</Link>
</ModalFooter>
)}
</ModalContent>
Expand Down
1 change: 1 addition & 0 deletions pages/_webs/[web]/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
description: listing.description,
tags: listing.tags,
relations: listing.relations,
seekingVolunteers: listing.seekingVolunteers,
},
},
revalidate: 60,
Expand Down

1 comment on commit 022b93f

@vercel
Copy link

@vercel vercel bot commented on 022b93f Nov 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

resilience-web – ./

resilience-web-git-main-resilience-web.vercel.app
resilience-web-resilience-web.vercel.app
www.cambridgeresilienceweb.org.uk
cambridgeresilienceweb.org.uk
resilienceweb.org.uk
*.resilienceweb.org.uk
*.cambridgeresilienceweb.org.uk
www.resilienceweb.org.uk

Please sign in to comment.