Improve comments on mobile view
This commit is contained in:
parent
8c3e376873
commit
b1c1263cca
3 changed files with 45 additions and 2 deletions
|
@ -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} />}
|
||||
|
|
|
@ -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),
|
||||
})}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue