Medium-layout: more "comment section collapse" fixes

- When collapsing, scroll back to the first comment instead of hanging in the Recommended section.

- Enhancement for 5380bc04: don't show "Collapse/Expanse" if there's only 1 comment. The comment itself is already collapsed to 3 lines, so it won't take up too much height.

- Fix css: recalling what Dan mentioned: if following BEM right (modifiers shouldn't be used standalone), we wouldn't incorrectly use `@extend` in this case and confuse the reader.

- Enlarged the empty spacing to make it symmetrical with the Recommended section below it.
This commit is contained in:
infinite-persistence 2022-04-07 12:11:53 +08:00
parent a11d8279be
commit 564beb7c90
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
3 changed files with 19 additions and 11 deletions

View file

@ -87,6 +87,7 @@ export default function CommentList(props: Props) {
const isMediumScreen = useIsMediumScreen();
const spinnerRef = React.useRef();
const commentListRef = React.useRef();
const DEFAULT_SORT = ENABLE_COMMENT_REACTIONS ? SORT_BY.POPULARITY : SORT_BY.NEWEST;
const [sort, setSort] = usePersistedState('comment-sort-by', DEFAULT_SORT);
const [page, setPage] = React.useState(1);
@ -286,23 +287,22 @@ export default function CommentList(props: Props) {
)}
<ul
className={classnames({
comments: !isMediumScreen || expandedComments,
'comments--contracted': isMediumScreen && !expandedComments,
ref={commentListRef}
className={classnames('comments', {
'comments--contracted': isMediumScreen && !expandedComments && totalComments > 1,
})}
>
{readyToDisplayComments && (
<>
{pinnedComments && <CommentElements comments={pinnedComments} {...commentProps} />}
<CommentElements comments={topLevelComments} {...commentProps} />
</>
)}
</ul>
{!hasDefaultExpansion && (
<div className="card__bottom-actions--comments">
{(!expandedComments || moreBelow) && totalComments > 0 && (
<div className="card__bottom-actions card__bottom-actions--comments">
{(!expandedComments || moreBelow) && totalComments > 1 && (
<Button
button="link"
title={!expandedComments ? __('Expand') : __('More')}
@ -310,12 +310,22 @@ export default function CommentList(props: Props) {
onClick={() => (!expandedComments ? setExpandedComments(true) : setPage(page + 1))}
/>
)}
{expandedComments && totalComments > 0 && (
{expandedComments && totalComments > 1 && (
<Button
button="link"
title={__('Collapse')}
label={__('Collapse')}
onClick={() => setExpandedComments(false)}
onClick={() => {
setExpandedComments(false);
if (commentListRef.current) {
const ADDITIONAL_OFFSET = 200;
const refTop = commentListRef.current.getBoundingClientRect().top;
window.scrollTo({
top: refTop + window.pageYOffset - ADDITIONAL_OFFSET,
behavior: 'smooth',
});
}
}}
/>
)}
</div>

View file

@ -627,8 +627,7 @@
}
.card__bottom-actions--comments {
@extend .card__bottom-actions;
margin-top: var(--spacing-s);
margin-top: var(--spacing-xl);
}
.card__multi-pane {

View file

@ -28,7 +28,6 @@ $thumbnailWidthSmall: 2rem;
}
.comments--contracted {
@extend .comments;
max-height: 5rem;
overflow: hidden;
-webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));