Browse Source

Continue refactoring post-listing for mobile view

feature/settings-cleanup
GreatBearShark 2 years ago
parent
commit
f7254a1c7c
  1. 116
      src/components/post-listing.tsx
  2. 20
      src/custom.css
  3. 1
      src/theme.tsx

116
src/components/post-listing.tsx

@ -145,7 +145,9 @@ const VoteButtons = ({
</button>
)}
</>
);
);
const PostActionButton = props => <Button p={2}variant="muted" bg="transparent" {...props} />
const MobilePostListing = ({
post,
@ -164,10 +166,40 @@ const MobilePostListing = ({
const [actionsVisible, setActionsVisible] = useState(false);
return (
<Flex css={{ flexDirection: 'column' }}>
<Heading as="h5" mb={1} color="text">
{post.name}
</Heading>
<Box>
<Link to={`/post/${post.id}`}>
<Heading as="h5" mb={2} color="highlight" css={{ fontWeight: 500, fontSize: '24px' }}>
{post.name}
</Heading>
</Link>
{/* {thumbnail && thumbnail()} */}
{isImage(post.url) && (
<Box className="mobile-thumbnail" my={1}>
<img className="img-fluid" alt={post.name} src={post.url} />
</Box>
)}
{post.body && (
<Text
css={{
// border: '1px solid rgb(68, 68, 68)',
// padding: '8px',
borderRadius: '4px',
}}
mb={2}
>
{post.body}
</Text>
)}
<Box css={{ fontSize: '12px'}}>
<span> {i18n.t('to')} </span>
<CommunityLink
community={{
name: post.community_name,
id: post.community_id,
local: post.community_local,
actor_id: post.community_actor_id,
}}
/>
{' '}{i18n.t('by')}{' '}
<UserListing
user={{
name: post.creator_name,
@ -192,59 +224,38 @@ const MobilePostListing = ({
{post.creator_tags.pronouns.split(',').join('/')}
</span>
) : null}
<span> {i18n.t('to')} </span>
<CommunityLink
community={{
name: post.community_name,
id: post.community_id,
local: post.community_local,
actor_id: post.community_actor_id,
}}
/>
<span>
{' '}
- <MomentTime data={post} />
<MomentTime data={post} />
</span>
</Box>
{/* {thumbnail && thumbnail()} */}
{isImage(post.url) && (
<img className="img-fluid my-2" alt={post.name} src={post.url} />
)}
{post.body && (
<Text
css={{
border: '1px solid rgb(68, 68, 68)',
padding: '8px',
borderRadius: '4px',
}}
my={3}
>
{post.body}
</Text>
)}
<Flex css={{ alignItems: 'center' }} mt={3}>
<Button
<PostActionButton
onClick={handlePostLike}
p={2}
variant="muted"
color={my_vote === 1 ? '#fffc00' : 'inherit'}
>
<Icon name="upvote" className="icon upvote" />
</Button>
<Box mx={3}>{score}</Box>
<Button
</PostActionButton>
<Box css={{ fontSize: '14px', fontWeight: 600 }} mx={2}>{score}</Box>
<PostActionButton
disabled={!enableDownvotes}
onClick={handlePostDisLike}
p={2}
variant="muted"
color={my_vote === -1 ? '#dd17b9' : 'inherit'}
>
<Icon name="downvote" className="icon downvote" />
</Button>
</PostActionButton>
<PostActionButton
onClick={handleSavePostClick}
data-tippy-content={post.saved ? i18n.t('unsave') : i18n.t('save')}
>
<Icon
name={localPostSaved ? 'star' : 'starOutline'}
className={`icon icon-inline ${localPostSaved && 'text-warning'}`}
/>
</PostActionButton>
<Box mx={3}>
<Button variant="muted"
<PostActionButton
as={Link}
p={2}
title={i18n.t('number_of_comments', {
count: post.number_of_comments,
})}
@ -252,28 +263,17 @@ const MobilePostListing = ({
>
<Icon name="comment" className="icon mr-1" />
{post.number_of_comments}
</Button>
</PostActionButton>
</Box>
<Button
variant="muted"
p={2}
onClick={handleSavePostClick}
data-tippy-content={post.saved ? i18n.t('unsave') : i18n.t('save')}
>
<Icon
name={localPostSaved ? 'star' : 'starOutline'}
className={`icon icon-inline ${localPostSaved && 'text-warning'}`}
/>
</Button>
<Button onClick={() => setActionsVisible(prev => !prev)} mx={2} p={2} variant="muted" css={{ marginLeft: 'auto' }}>
<PostActionButton onClick={() => setActionsVisible(prev => !prev)} mx={2} css={{ marginLeft: 'auto' }}>
<Icon name="more" />
</Button>
</PostActionButton>
</Flex>
{actionsVisible && (
<Flex my={2}>
<Button variant="muted" onClick={handleReportPost}>
<PostActionButton onClick={handleReportPost}>
<Icon name="report" />
</Button>
</PostActionButton>
</Flex>
)}
</Flex>

20
src/custom.css

@ -767,4 +767,22 @@ button:hover [type="button"]:hover {
[data-reach-menu-item][data-selected] {
background: #666;
}
}
.mobile-thumbnail {
position: relative;
/* max-height: 120px; */
/* overflow: hidden; */
}
/* .mobile-thumbnail:after {
content:'';
width:100%;
height:100%;
position:absolute;
left:0;
top: 0px;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom, transparent, black);
} */

1
src/theme.tsx

@ -80,6 +80,7 @@ const defaultTheme: ThemeProviderProps<Theme> = {
accent: '#F3B90C',
danger: '#dc3545',
muted: '#303030',
highlight: '#00BC8C',
},
buttons: {
...variants.buttons,

Loading…
Cancel
Save