diff --git a/src/components/expandable-constants.js b/src/components/expandable-constants.js deleted file mode 100644 index f88da045..00000000 --- a/src/components/expandable-constants.js +++ /dev/null @@ -1,6 +0,0 @@ -// Pixel areas (before the UI scale applied) of the folded text rectangles for -// posts and comments. The Expandable component reduces the height of the text -// to approximately match this area. - -export const postFoldedArea = 600 * 130; -export const commentFoldedArea = 500 * 110; diff --git a/src/components/expandable.jsx b/src/components/expandable.jsx index e7b30d5d..72d482b3 100644 --- a/src/components/expandable.jsx +++ b/src/components/expandable.jsx @@ -5,9 +5,19 @@ import { useEvent } from 'react-use-event-hook'; import { useSelector } from 'react-redux'; import { ButtonLink } from './button-link'; import { Icon } from './fontawesome-icons'; -import { postFoldedArea } from './expandable-constants'; import style from './expandable.module.scss'; +// Pixel areas (before the UI scale applied) of the folded text rectangles for +// posts and comments. The Expandable component reduces the height of the text +// to approximately match this area. + +const foldedAreas = { + post: 600 * 130, + comment: 500 * 110, + postAnonymous: 860 * 130, // No sidebar, so we need more pixels + commentAnonymous: 700 * 110, +}; + const isSafari = /^((?!chrome|android).)*safari/i.test(navigator?.userAgent ?? ''); export function Expandable({ @@ -15,10 +25,16 @@ export function Expandable({ expanded: givenExpanded = false, tail = null, panelClass = null, - // See presets in ./expandable-constants.js - foldedArea = postFoldedArea, + contentType = 'post', // or 'comment' }) { + const authenticated = useSelector((state) => state.authenticated); const uiScale = useSelector((state) => state.uiScale ?? 100) / 100; + + if (contentType !== 'comment' && contentType !== 'post') { + throw new Error('Unsupported content type'); + } + + const foldedArea = foldedAreas[contentType + (authenticated ? '' : 'Anonymous')]; const scaledFoldedArea = foldedArea * uiScale * uiScale; // Don't fold content that is smaller than this const scaledMaxUnfoldedArea = scaledFoldedArea * 1.5; diff --git a/src/components/post/post-comment-preview.jsx b/src/components/post/post-comment-preview.jsx index 1c844837..8dcfbfff 100644 --- a/src/components/post/post-comment-preview.jsx +++ b/src/components/post/post-comment-preview.jsx @@ -16,7 +16,6 @@ import { Separated } from '../separated'; import TimeDisplay from '../time-display'; import UserName from '../user-name'; -import { commentFoldedArea } from '../expandable-constants'; import { Expandable } from '../expandable'; import styles from './post-comment-preview.module.scss'; import { CommentProvider } from './post-comment-provider'; @@ -158,7 +157,7 @@ export function PostCommentPreview({ ) : (