feat: pages with comments more mobile friendly

ONEARMY · Mar 3, 2025 · 29168d5 · 29168d5
1 parent 5837355
commit 29168d5
Show file tree

Hide file tree

Showing 25 changed files with 274 additions and 235 deletions.
diff --git a/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx b/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx
@@ -41,7 +41,7 @@ export const BreadcrumbItem = ({ text, link, isLast }: BreadcrumbItemProps) => (
         sx={{
           display: 'block',
           color: 'black',
-          fontSize: 15,
+          fontSize: [2, 3],
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           overflow: 'hidden',

diff --git a/packages/components/src/CommentBody/CommentBody.tsx b/packages/components/src/CommentBody/CommentBody.tsx
@@ -0,0 +1,62 @@
+import { createRef, useEffect, useState } from 'react'
+import { Text } from 'theme-ui'
+
+import { LinkifyText } from '../LinkifyText/LinkifyText'
+
+interface IProps {
+  body: string
+}
+const SHORT_COMMENT = 129
+
+export const CommentBody = ({ body }: IProps) => {
+  const textRef = createRef<any>()
+
+  const [textHeight, setTextHeight] = useState(0)
+  const [isShowMore, setShowMore] = useState(false)
+
+  useEffect(() => {
+    if (textRef.current) {
+      setTextHeight(textRef.current.scrollHeight)
+    }
+  }, [textRef])
+
+  const showMore = () => {
+    setShowMore((prev) => !prev)
+  }
+
+  const maxHeight = isShowMore ? 'max-content' : '128px'
+
+  return (
+    <>
+      <Text
+        data-cy="comment-text"
+        data-testid="commentText"
+        sx={{
+          fontFamily: 'body',
+          lineHeight: 1.3,
+          maxHeight,
+          overflow: 'hidden',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+          fontSize: [2, 3],
+        }}
+        ref={textRef}
+      >
+        <LinkifyText>{body}</LinkifyText>
+      </Text>
+      {textHeight > SHORT_COMMENT && (
+        <Text
+          as="a"
+          onClick={showMore}
+          sx={{
+            color: 'gray',
+            cursor: 'pointer',
+            fontSize: [2, 3],
+          }}
+        >
+          {isShowMore ? 'Show less' : 'Show more'}
+        </Text>
+      )}
+    </>
+  )
+}
diff --git a/packages/components/src/CommentDisplay/CommentDisplay.tsx b/packages/components/src/CommentDisplay/CommentDisplay.tsx
@@ -1,11 +1,10 @@
-import { createRef, useEffect, useState } from 'react'
 import { compareDesc } from 'date-fns'
 import { Box, Flex, Text } from 'theme-ui'
 
 import { Button } from '../Button/Button'
 import { CommentAvatar } from '../CommentAvatar/CommentAvatar'
+import { CommentBody } from '../CommentBody/CommentBody'
 import { DisplayDate } from '../DisplayDate/DisplayDate'
-import { LinkifyText } from '../LinkifyText/LinkifyText'
 import { Username } from '../Username/Username'
 
 import type { Comment } from 'oa-shared'
@@ -19,7 +18,6 @@ export interface IProps {
 }
 
 const DELETED_COMMENT = 'The original comment got deleted'
-const SHORT_COMMENT = 129
 
 export const CommentDisplay = (props: IProps) => {
   const {
@@ -29,22 +27,6 @@ export const CommentDisplay = (props: IProps) => {
     setShowDeleteModal,
     setShowEditModal,
   } = props
-  const textRef = createRef<any>()
-
-  const [textHeight, setTextHeight] = useState(0)
-  const [isShowMore, setShowMore] = useState(false)
-
-  const maxHeight = isShowMore ? 'max-content' : '128px'
-
-  const showMore = () => {
-    setShowMore((prev) => !prev)
-  }
-
-  useEffect(() => {
-    if (textRef.current) {
-      setTextHeight(textRef.current.scrollHeight)
-    }
-  }, [textRef])
 
   if (comment.deleted) {
     return (
@@ -118,7 +100,6 @@ export const CommentDisplay = (props: IProps) => {
                 sx={{
                   alignItems: 'flex-end',
                   gap: 2,
-                  paddingBottom: 2,
                 }}
               >
                 <Button
@@ -143,35 +124,8 @@ export const CommentDisplay = (props: IProps) => {
                 </Button>
               </Flex>
             )}
+            <CommentBody body={comment.comment} />
           </Flex>
-          <Text
-            data-cy="comment-text"
-            data-testid="commentText"
-            sx={{
-              fontFamily: 'body',
-              lineHeight: 1.3,
-              maxHeight,
-              overflow: 'hidden',
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-word',
-              marginTop: 1,
-              marginBottom: 2,
-            }}
-            ref={textRef}
-          >
-            <LinkifyText>{comment.comment}</LinkifyText>
-          </Text>
-          {textHeight > SHORT_COMMENT && (
-            <a
-              onClick={showMore}
-              style={{
-                color: 'gray',
-                cursor: 'pointer',
-              }}
-            >
-              {isShowMore ? 'Show less' : 'Show more'}
-            </a>
-          )}
         </Flex>
       </Flex>
     )

diff --git a/packages/components/src/CreateComment/CreateComment.tsx b/packages/components/src/CreateComment/CreateComment.tsx
@@ -41,105 +41,101 @@ export const CreateComment = (props: Props) => {
   }
 
   return (
-    <Flex sx={{ flexDirection: 'column' }}>
-      <Flex data-target="create-comment-container" sx={{ gap: 2 }}>
-        <Box
-          sx={{
-            lineHeight: 0,
+    <Flex data-target="create-comment-container" sx={{ gap: 2 }}>
+      <Box
+        sx={{
+          lineHeight: 0,
+          display: ['none', 'block'],
+          flexShrink: 0,
+        }}
+      >
+        <MemberBadge profileType={userProfileType} useLowDetailVersion />
+      </Box>
+      <Box
+        sx={{
+          display: 'block',
+          background: 'white',
+          flex: 1,
+          marginLeft: [0, 3],
+          borderRadius: 1,
+          position: 'relative',
+          width: 'min-content',
+          '&:before': {
             display: ['none', 'block'],
-            flexShrink: 0,
-          }}
-        >
-          <MemberBadge profileType={userProfileType} useLowDetailVersion />
-        </Box>
-        <Box
+            content: '""',
+            position: 'absolute',
+            borderWidth: '1em 1em',
+            borderStyle: 'solid',
+            borderColor: 'transparent white transparent transparent',
+            margin: '.5em -2em',
+          },
+        }}
+      >
+        {!isLoggedIn && <LoginPrompt />}
+        {isLoggedIn && (
+          <Flex sx={{ flexDirection: 'column' }}>
+            <Box className={`grow-wrap ${commentIsActive ? 'value-set' : ''}`}>
+              <Textarea
+                value={comment}
+                maxLength={maxLength}
+                onChange={(event) => {
+                  onChange && onChange(event.target)
+                }}
+                aria-label="Comment"
+                data-cy={isReply ? 'reply-form' : 'comments-form'}
+                placeholder={placeholder}
+                rows={1}
+                onFocus={() => setTextareaIsFocussed(true)}
+                onBlur={() => setTextareaIsFocussed(false)}
+              />
+            </Box>
+            <Text
+              sx={{
+                fontSize: 1,
+                display: commentIsActive ? 'flex' : 'none',
+                alignSelf: 'flex-end',
+                padding: 2,
+              }}
+            >
+              {comment.length}/{maxLength}
+            </Text>
+          </Flex>
+        )}
+      </Box>
+      <Flex
+        sx={{
+          alignSelf: 'flex-end',
+          height: ['40px', '52px'],
+          width: ['40px', 'auto'],
+        }}
+      >
+        <Button
+          data-cy={isReply ? 'reply-submit' : 'comment-submit'}
+          data-testid="send-comment-button"
+          disabled={!comment.trim() || !isLoggedIn || isLoading}
+          variant="primary"
+          onClick={onClick}
           sx={{
-            display: 'block',
-            background: 'white',
-            flex: 1,
-            marginLeft: [0, 3],
-            borderRadius: 1,
-            position: 'relative',
-            width: 'min-content',
-            '&:before': {
-              display: ['none', 'block'],
-              content: '""',
-              position: 'absolute',
-              borderWidth: '1em 1em',
-              borderStyle: 'solid',
-              borderColor: 'transparent white transparent transparent',
-              margin: '.5em -2em',
-            },
+            height: ['40px', '100%'],
+            width: ['40px', 'auto'],
+            padding: [0, 1],
           }}
         >
-          {!isLoggedIn && <LoginPrompt />}
-          {isLoggedIn && (
-            <Flex sx={{ flexDirection: 'column' }}>
-              <Box
-                className={`grow-wrap ${commentIsActive ? 'value-set' : ''}`}
-              >
-                <Textarea
-                  value={comment}
-                  maxLength={maxLength}
-                  onChange={(event) => {
-                    onChange && onChange(event.target)
-                  }}
-                  aria-label="Comment"
-                  data-cy={isReply ? 'reply-form' : 'comments-form'}
-                  placeholder={placeholder}
-                  rows={1}
-                  onFocus={() => setTextareaIsFocussed(true)}
-                  onBlur={() => setTextareaIsFocussed(false)}
-                />
-              </Box>
-              <Text
+          {isLoading && 'Loading...'}
+          {!isLoading && (
+            <>
+              <Text sx={{ display: ['none', 'block'] }}>{buttonLabel}</Text>
+              <Image
+                src={sendMobile}
                 sx={{
-                  fontSize: 1,
-                  display: commentIsActive ? 'flex' : 'none',
-                  alignSelf: 'flex-end',
-                  padding: 2,
+                  display: ['block', 'none'],
+                  width: '22px',
+                  margin: 'auto',
                 }}
-              >
-                {comment.length}/{maxLength}
-              </Text>
-            </Flex>
+              />
+            </>
           )}
-        </Box>
-        <Flex
-          sx={{
-            alignSelf: 'flex-end',
-            height: ['40px', '52px'],
-            width: ['40px', 'auto'],
-          }}
-        >
-          <Button
-            data-cy={isReply ? 'reply-submit' : 'comment-submit'}
-            data-testid="send-comment-button"
-            disabled={!comment.trim() || !isLoggedIn || isLoading}
-            variant="primary"
-            onClick={onClick}
-            sx={{
-              height: ['40px', '100%'],
-              width: ['40px', 'auto'],
-              padding: [0, 1],
-            }}
-          >
-            {isLoading && 'Loading...'}
-            {!isLoading && (
-              <>
-                <Text sx={{ display: ['none', 'block'] }}>{buttonLabel}</Text>
-                <Image
-                  src={sendMobile}
-                  sx={{
-                    display: ['block', 'none'],
-                    width: '22px',
-                    margin: 'auto',
-                  }}
-                />
-              </>
-            )}
-          </Button>
-        </Flex>
+        </Button>
       </Flex>
     </Flex>
   )

diff --git a/packages/components/src/DiscussionContainer/DiscussionContainer.tsx b/packages/components/src/DiscussionContainer/DiscussionContainer.tsx
@@ -84,7 +84,7 @@ export const DiscussionContainer = (props: IProps) => {
           background: 'softblue',
           borderRadius: 2,
           flexDirection: 'column',
-          padding: 3,
+          paddingY: 3,
         }}
       >
         <CreateComment

diff --git a/packages/themes/src/common/index.ts b/packages/themes/src/common/index.ts
@@ -96,14 +96,28 @@ export const baseTheme = {
   },
   regular: 400,
   bold: 600,
-  fontSizes: [10, 12, 14, 18, 22, 30, 38, 42, 46, 50, 58, 66, 74],
+  fontSizes: [10, 12, 14, 16, 18, 22, 30, 38, 42, 46, 50, 58, 66, 74],
   cards: {
     primary: {
       background: 'white',
       border: `2px solid ${commonStyles.colors.black}`,
       borderRadius: 1,
       overflow: 'hidden',
     },
+    responsive: {
+      background: 'white',
+      border: ['none', `2px solid ${commonStyles.colors.black}`],
+      borderTop: `2px solid ${commonStyles.colors.black}`,
+      borderBottom: `2px solid ${commonStyles.colors.black}`,
+      borderRadius: [0, 2],
+      overflow: 'hidden',
+    },
+    borderless: {
+      background: 'white',
+      border: 'none',
+      borderRadius: 2,
+      overflow: 'hidden',
+    },
   },
   breakpoints: ['40em', '52em', '70em'], // standard widths: 512px, 768px, 1024px
   alerts: {