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:
parent
a11d8279be
commit
564beb7c90
3 changed files with 19 additions and 11 deletions
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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)));
|
||||
|
|
Loading…
Reference in a new issue