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

6.3.2 mobile and responsive UI fixes #3096

Merged
merged 8 commits into from Aug 11, 2020
Merged

6.3.2 mobile and responsive UI fixes #3096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
04db49e
Remove vertical padding and line height on badges
nick-funk Aug 10, 2020
f1259be
Hide report button text on mobile screens
nick-funk Aug 10, 2020
b6a8a68
Allow read more links to wrap text on mobile
nick-funk Aug 10, 2020
c6fe4a8
Wrap comment tags when on mobile screens
nick-funk Aug 10, 2020
00ea0ff
Fix collapse alignment on mobile screens
nick-funk Aug 11, 2020
adb0f44
Update top bar responsive scaling
nick-funk Aug 11, 2020
f1fafae
Use MatchMedia inside ReportButton
nick-funk Aug 11, 2020
5bac9be
Fix justification on comment TopBarRight
nick-funk Aug 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
28 changes: 22 additions & 6 deletions src/core/client/stream/tabs/Comments/Comment/AuthorBadgesContainer.tsx
View file
Open in desktop
Expand Up @@ -11,20 +11,36 @@ interface Props {
className?: string;
}

// The comment param is `any` because relay isn't
// smart enough to see that the nested fragments
// on the comment container are compatible.
export function authorHasBadges(comment: any) {
return (
comment &&
comment.author &&
comment.author.badges &&
comment.author.badges.length !== 0
);
}

const AuthorBadgesContainer: FunctionComponent<Props> = ({
comment,
className,
}) => {
if (!comment.author || !comment.author.badges) {
const hasBadges = authorHasBadges(comment);

if (!hasBadges) {
return null;
}
return (
<>
{comment.author.badges.map((badge) => (
<Tag key={badge} color="dark" className={className}>
{badge}
</Tag>
))}
{comment.author &&
comment.author.badges &&
comment.author.badges.map((badge) => (
<Tag key={badge} color="dark" className={className}>
{badge}
</Tag>
))}
</>
);
};
Expand Down
19 changes: 18 additions & 1 deletion src/core/client/stream/tabs/Comments/Comment/Comment.css
View file
Open in desktop
Expand Up @@ -21,6 +21,23 @@ $commentTimestampColor: var(--palette-grey-500);
font-style: normal;
font-weight: var(--font-weight-primary-semi-bold);
font-size: var(--font-size-2);
line-height: 1.14;
color: $commentTimestampColor;

margin-right: var(--spacing-1);
}

.tags {
margin-right: var(--spacing-1);
}

.badges {
margin-right: var(--spacing-1);
}

.username {
margin-right: var(--spacing-2);
}

.usernameFullRow {
flex-basis: 100%;
}
2 changes: 2 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/Comment.spec.tsx
View file
Open in desktop
Expand Up @@ -8,6 +8,8 @@ import Comment from "./Comment";
it("renders username and body", () => {
const props: PropTypesOf<typeof Comment> = {
username: "Marvin",
tags: "",
badges: "",
body: "Woof",
createdAt: "1995-12-17T03:24:00.000Z",
topBarRight: "topBarRight",
Expand Down
40 changes: 30 additions & 10 deletions src/core/client/stream/tabs/Comments/Comment/Comment.tsx
View file
Open in desktop
Expand Up @@ -4,11 +4,10 @@ import React, { FunctionComponent } from "react";
import CLASSES from "coral-stream/classes";
import HTMLContent from "coral-stream/common/HTMLContent";
import Timestamp from "coral-stream/common/Timestamp";
import { Flex, HorizontalGutter } from "coral-ui/components/v2";
import { Flex, HorizontalGutter, MatchMedia } from "coral-ui/components/v2";

import EditedMarker from "./EditedMarker";
import InReplyTo from "./InReplyTo";
import TopBarLeft from "./TopBarLeft";

import styles from "./Comment.css";

Expand All @@ -22,7 +21,8 @@ export interface CommentProps {
showEditedMarker?: boolean;
highlight?: boolean;
parentAuthorName?: string | null;
userTags?: React.ReactNode;
tags?: React.ReactNode | null;
badges?: React.ReactNode | null;
collapsed?: boolean;
media?: React.ReactNode;
}
Expand All @@ -39,15 +39,35 @@ const Comment: FunctionComponent<CommentProps> = (props) => {
>
<Flex
direction="row"
alignItems="flex-start"
justifyContent="space-between"
className={CLASSES.comment.topBar.$root}
>
<TopBarLeft>
<Flex direction="row" alignItems="center" itemGutter="half">
{props.username && props.username}
{props.userTags}
</Flex>
<Flex direction="row" alignItems="baseline" itemGutter>
<Flex alignItems="center" wrap>
{props.username && (
<MatchMedia lteWidth="mobile">
{(matches) => (
<div
className={cn(styles.username, {
[styles.usernameFullRow]: matches,
})}
>
{props.username}
</div>
)}
</MatchMedia>
)}
<Flex direction="row" alignItems="center" wrap>
{props.tags && (
<Flex alignItems="center" className={styles.tags}>
{props.tags}
</Flex>
)}
{props.badges && (
<Flex alignItems="center" className={styles.badges}>
{props.badges}
</Flex>
)}
<Timestamp
className={cn(styles.timestamp, CLASSES.comment.topBar.timestamp)}
>
Expand All @@ -57,7 +77,7 @@ const Comment: FunctionComponent<CommentProps> = (props) => {
<EditedMarker className={CLASSES.comment.topBar.edited} />
)}
</Flex>
</TopBarLeft>
</Flex>
{props.topBarRight && <div>{props.topBarRight}</div>}
</Flex>

Expand Down
2 changes: 2 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/CommentContainer.css
View file
Open in desktop
Expand Up @@ -50,4 +50,6 @@ $commenterActionEditColorActive: var(--palette-primary-300);

.staticUsername {
color: var(--palette-text-100);

margin-right: var(--spacing-2);
}
125 changes: 75 additions & 50 deletions src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
View file
Open in desktop
Expand Up @@ -37,6 +37,7 @@ import {
} from "coral-stream/mutations";
import { Ability, can } from "coral-stream/permissions";
import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
import MatchMedia from "coral-ui/components/v2/MatchMedia";

import { CommentContainer_comment as CommentData } from "coral-stream/__generated__/CommentContainer_comment.graphql";
import { CommentContainer_settings as SettingsData } from "coral-stream/__generated__/CommentContainer_settings.graphql";
Expand All @@ -45,7 +46,7 @@ import { CommentContainer_viewer as ViewerData } from "coral-stream/__generated_

import { isPublished } from "../helpers";
import AnsweredTag from "./AnsweredTag";
import UserBadgesContainer from "./AuthorBadgesContainer";
import UserBadgesContainer, { authorHasBadges } from "./AuthorBadgesContainer";
import ButtonsBar from "./ButtonsBar";
import EditCommentFormContainer from "./EditCommentForm";
import FeaturedTag from "./FeaturedTag";
Expand All @@ -61,7 +62,7 @@ import ReplyCommentFormContainer from "./ReplyCommentForm";
import ReportFlowContainer, { ReportButton } from "./ReportFlow";
import ShowConversationLink from "./ShowConversationLink";
import { UsernameContainer, UsernameWithPopoverContainer } from "./Username";
import UserTagsContainer from "./UserTagsContainer";
import UserTagsContainer, { commentHasTags } from "./UserTagsContainer";

import styles from "./CommentContainer.css";

Expand Down Expand Up @@ -301,6 +302,9 @@ export const CommentContainer: FunctionComponent<Props> = ({
);
}

const hasTags = commentHasTags(story, comment);
const hasBadges = authorHasBadges(comment);

// Comment is not published after viewer rejected it.
if (comment.lastViewerAction === "REJECT" && comment.status === "REJECTED") {
return <RejectedTombstoneContainer comment={comment} />;
Expand Down Expand Up @@ -334,7 +338,7 @@ export const CommentContainer: FunctionComponent<Props> = ({
parentAuthorName={comment.parent?.author?.username}
staticUsername={
comment.author && (
<>
<Flex direction="row" alignItems="center">
<UsernameContainer
className={cn(
styles.staticUsername,
Expand All @@ -352,61 +356,82 @@ export const CommentContainer: FunctionComponent<Props> = ({
className={CLASSES.comment.topBar.userBadge}
comment={comment}
/>
</>
</Flex>
)
}
username={
comment.author && (
<>
<UsernameWithPopoverContainer
className={CLASSES.comment.topBar.username}
comment={comment}
viewer={viewer}
/>
<UserTagsContainer
className={CLASSES.comment.topBar.userTag}
story={story}
comment={comment}
settings={settings}
/>
<UserBadgesContainer
className={CLASSES.comment.topBar.userBadge}
comment={comment}
/>
</>
<UsernameWithPopoverContainer
className={CLASSES.comment.topBar.username}
comment={comment}
viewer={viewer}
/>
)
}
tags={
comment.author &&
hasTags && (
<UserTagsContainer
className={CLASSES.comment.topBar.userTag}
story={story}
comment={comment}
settings={settings}
/>
)
}
badges={
comment.author &&
hasBadges && (
<UserBadgesContainer
className={CLASSES.comment.topBar.userBadge}
comment={comment}
/>
)
}
staticTopBarRight={commentTags}
topBarRight={
<Flex alignItems="center" itemGutter>
{commentTags}
{editable && (
<Button
color="stream"
variant="text"
onClick={openEditDialog}
className={cn(
CLASSES.comment.topBar.editButton,
styles.editButton
)}
data-testid="comment-edit-button"
>
<Flex alignItems="center" justifyContent="center">
<Icon className={styles.editIcon}>edit</Icon>
<Localized id="comments-commentContainer-editButton">
Edit
</Localized>
</Flex>
</Button>
)}
{showModerationCaret && (
<CaretContainer
comment={comment}
story={story}
viewer={viewer!}
/>
)}
</Flex>
<>
<MatchMedia gteWidth="mobile">
{(matches) => (
<>
<Flex
alignItems="center"
justifyContent="flex-end"
itemGutter
>
{matches ? commentTags : null}
{editable && (
<Button
color="stream"
variant="text"
onClick={openEditDialog}
className={cn(
CLASSES.comment.topBar.editButton,
styles.editButton
)}
data-testid="comment-edit-button"
>
<Flex alignItems="center" justifyContent="center">
<Icon className={styles.editIcon}>edit</Icon>
<Localized id="comments-commentContainer-editButton">
Edit
</Localized>
</Flex>
</Button>
)}
{showModerationCaret && (
<CaretContainer
comment={comment}
story={story}
viewer={viewer!}
/>
)}
</Flex>
{!matches ? commentTags : null}
</>
)}
</MatchMedia>
</>
}
media={
<MediaSectionContainer
Expand Down
4 changes: 4 additions & 0 deletions src/core/client/stream/tabs/Comments/Comment/CommentToggle.css
View file
Open in desktop
Expand Up @@ -22,6 +22,10 @@
color: var(--palette-grey-500);
}

.username {
margin-right: var(--spacing-1);
}

.inner {
flex: 1;
}
19 changes: 14 additions & 5 deletions src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx
View file
Open in desktop
Expand Up @@ -5,7 +5,6 @@ import CLASSES from "coral-stream/classes";
import { BaseButton, Flex, Icon, RelativeTime } from "coral-ui/components/v2";

import EditedMarker from "./EditedMarker";
import TopBarLeft from "./TopBarLeft";

import styles from "./CommentToggle.css";

Expand Down Expand Up @@ -37,14 +36,24 @@ const CommentToggle: FunctionComponent<Props> = (props) => {
<Flex
direction="row"
justifyContent="space-between"
alignItems="center"
className={cn(styles.inner, CLASSES.comment.topBar.$root)}
>
<TopBarLeft>
<Flex direction="row" alignItems="center" itemGutter="half">
<Flex
direction="row"
alignItems="center"
justifyContent="space-between"
>
<Flex
className={styles.username}
direction="row"
alignItems="center"
itemGutter="half"
>
{props.username && props.username}
{props.userTags}
</Flex>
<Flex direction="row" alignItems="baseline" itemGutter>
<Flex direction="row" alignItems="baseline" itemGutter wrap>
<RelativeTime
className={cn(
styles.timestamp,
Expand All @@ -56,7 +65,7 @@ const CommentToggle: FunctionComponent<Props> = (props) => {
<EditedMarker className={CLASSES.comment.topBar.edited} />
)}
</Flex>
</TopBarLeft>
</Flex>
{props.topBarRight && <div>{props.topBarRight}</div>}
</Flex>
</Flex>
Expand Down