From 3eddf5f155dc07f23c84d6b8036dd3777d307697 Mon Sep 17 00:00:00 2001 From: Tessa Thornton Date: Tue, 4 Aug 2020 13:55:30 -0400 Subject: [PATCH] [CORL-1233] Mobile display fixes (#3067) * mobile display fixes * show button full text at larger breakpoint * update snaps * hardcode in media query for reaction buttons Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../client/stream/tabs/Comments/Comment/Comment.css | 1 + .../tabs/Comments/Comment/CommentContainer.css | 5 ++++- .../Comment/PermalinkButton/PermalinkButton.tsx | 13 ++++--------- .../Comment/ReactionButton/ReactionButton.tsx | 7 ++++--- .../stream/tabs/Comments/Comment/ReplyButton.tsx | 7 ++++--- .../tabs/Comments/Comment/ShowConversationLink.css | 4 ++++ .../Comment/__snapshots__/ReplyButton.spec.tsx.snap | 6 +++--- 7 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/core/client/stream/tabs/Comments/Comment/Comment.css b/src/core/client/stream/tabs/Comments/Comment/Comment.css index 66463538d..97648307b 100644 --- a/src/core/client/stream/tabs/Comments/Comment/Comment.css +++ b/src/core/client/stream/tabs/Comments/Comment/Comment.css @@ -2,6 +2,7 @@ $commentTimestampColor: var(--palette-grey-500); .root { flex: 1; + overflow: hidden; } .highlight { diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css index 2d096259b..631b6ac1d 100644 --- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css +++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.css @@ -38,7 +38,10 @@ $commenterActionEditColorActive: var(--palette-primary-300); } .actionBar { - min-width: 150px; + min-width: 100px; + @media (min-width: $breakpoints-xs) { + min-width: 150px; + } } .actionButton { diff --git a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx index 7359b71b4..a3a67d730 100644 --- a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx @@ -1,14 +1,9 @@ import { Localized } from "@fluent/react/compat"; import React, { FunctionComponent } from "react"; +import Responsive from "react-responsive"; import CLASSES from "coral-stream/classes"; -import { - ClickOutside, - Flex, - Icon, - MatchMedia, - Popover, -} from "coral-ui/components/v2"; +import { ClickOutside, Flex, Icon, Popover } from "coral-ui/components/v2"; import { Button } from "coral-ui/components/v3"; import PermalinkPopover from "./PermalinkPopover"; @@ -67,11 +62,11 @@ const Permalink: FunctionComponent = ({ > share - + Share - + diff --git a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx index bb3f75e6c..120efe672 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx @@ -1,8 +1,9 @@ import { Localized } from "@fluent/react/compat"; import cn from "classnames"; import React from "react"; +import Responsive from "react-responsive"; -import { Flex, Icon, MatchMedia } from "coral-ui/components/v2"; +import { Flex, Icon } from "coral-ui/components/v2"; import { Button } from "coral-ui/components/v3"; import styles from "./ReactionButton.css"; @@ -59,7 +60,7 @@ function render(props: ReactionButtonProps) { {reacted ? (iconActive ? iconActive : icon) : icon} )} - + {props.isQA ? ( {reacted ? ( @@ -71,7 +72,7 @@ function render(props: ReactionButtonProps) { ) : ( {reacted ? labelActive : label} )} - + {!!totalReactions && ( {totalReactions} )} diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx b/src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx index c4b80bb95..bebaf4308 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx @@ -1,7 +1,8 @@ import { Localized } from "@fluent/react/compat"; import React, { EventHandler, FunctionComponent, MouseEvent } from "react"; +import Responsive from "react-responsive"; -import { Flex, Icon, MatchMedia } from "coral-ui/components/v2"; +import { Flex, Icon } from "coral-ui/components/v2"; import { Button } from "coral-ui/components/v3"; import styles from "./ReplyButton.css"; @@ -31,11 +32,11 @@ const ReplyButton: FunctionComponent = (props) => ( > reply - + Reply - + diff --git a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css index ca67cdc19..7aaac42f3 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css +++ b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css @@ -3,6 +3,10 @@ $commentsConversationLinkColorHovered: var(--palette-primary-700); $commentsConversationLinkColorActive: var(--palette-primary-800); .conversationLink { + overflow: hidden; + display: block; + text-overflow: ellipsis; + text-align: left; &.sizeRegular { padding: 0; } diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ReplyButton.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ReplyButton.spec.tsx.snap index 2417a690a..5808a6c8e 100644 --- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ReplyButton.spec.tsx.snap +++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/ReplyButton.spec.tsx.snap @@ -29,8 +29,8 @@ exports[`renders correctly 1`] = ` > reply - - +