Improve comments on mobile view

This commit is contained in:
Rafael 2022-02-01 17:31:39 -03:00 committed by Thomas Zarebczan
parent 8c3e376873
commit b1c1263cca
3 changed files with 45 additions and 2 deletions

View file

@ -29,6 +29,7 @@ import CreditAmount from 'component/common/credit-amount';
import OptimizedImage from 'component/optimizedImage';
import { getChannelFromClaim } from 'util/claim';
import { parseSticker } from 'util/comments';
import { useIsMobile } from 'effects/use-screensize';
const AUTO_EXPAND_ALL_REPLIES = false;
@ -114,6 +115,8 @@ function Comment(props: Props) {
quickReply,
} = props;
const isMobile = useIsMobile();
const {
push,
replace,
@ -361,6 +364,7 @@ function Comment(props: Props) {
className="comment__action"
onClick={handleCommentReply}
icon={ICONS.REPLY}
iconSize={isMobile && 12}
/>
)}
{ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}

View file

@ -8,6 +8,7 @@ import classnames from 'classnames';
import Button from 'component/button';
import ChannelThumbnail from 'component/channelThumbnail';
import { useHistory } from 'react-router';
import { useIsMobile } from 'effects/use-screensize';
type Props = {
myReacts: Array<string>,
@ -43,6 +44,8 @@ export default function CommentReactions(props: Props) {
location: { pathname },
} = useHistory();
const isMobile = useIsMobile();
React.useEffect(() => {
if (!claim) {
resolve(uri);
@ -110,6 +113,7 @@ export default function CommentReactions(props: Props) {
requiresAuth={IS_WEB}
title={__('Upvote')}
icon={likeIcon}
iconSize={isMobile && 12}
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
})}
@ -120,6 +124,7 @@ export default function CommentReactions(props: Props) {
requiresAuth={IS_WEB}
title={__('Downvote')}
icon={dislikeIcon}
iconSize={isMobile && 12}
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
})}

View file

@ -1,10 +1,26 @@
$thumbnailWidth: 1.5rem;
$thumbnailWidthSmall: 1rem;
$thumbnailWidthSmall: 1.8rem;
.comments {
list-style-type: none;
font-size: var(--font-small);
margin-top: var(--spacing-l);
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-s);
div {
font-size: var(--font-xsmall) !important;
}
.channel-name {
font-size: var(--font-xsmall);
}
span {
font-size: var(--font-xxsmall);
}
}
}
.comments--contracted {
@ -42,6 +58,10 @@ $thumbnailWidthSmall: 1rem;
&:not(:first-child) {
margin-top: var(--spacing-l);
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-m) !important;
}
}
.comment__author-thumbnail {
@ -79,16 +99,21 @@ $thumbnailWidthSmall: 1rem;
.comment__replies-container {
margin: 0;
overflow-x: hidden;
}
.comment__replies {
display: flex;
margin-top: var(--spacing-m);
margin-left: calc(#{$thumbnailWidthSmall} + var(--spacing-xs));
margin-left: #{$thumbnailWidthSmall};
@media (min-width: $breakpoint-small) {
margin-left: calc(#{$thumbnailWidth} + var(--spacing-m));
}
@media (max-width: $breakpoint-small) {
margin-top: var(--spacing-s);
}
}
.comment--reply {
@ -198,6 +223,10 @@ $thumbnailWidthSmall: 1rem;
margin-top: var(--spacing-xxs);
}
}
@media (max-width: $breakpoint-small) {
padding-right: var(--spacing-l);
}
}
.comment__author {
@ -475,4 +504,9 @@ $thumbnailWidthSmall: 1rem;
.emote {
max-width: 1.5rem;
max-height: 1.5rem;
@media (max-width: $breakpoint-small) {
max-width: 1.25rem;
max-height: 1.25rem;
}
}