LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix theater mode layout on small and medium screens (#7108)

Browse source 
* Fix theater mode layout on small and medium screens

* Make comments expandable on medium screens
This commit is contained in:
Alexander Schrier 2021-09-20 09:20:28 -05:00 • committed by GitHub
parent 0fc9cb9e73
commit eca9b2fcbf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/component/commentsList/view.jsx
View file

@ -14,7 +14,7 @@ import usePersistedState from 'effects/use-persisted-state';
import { ENABLE_COMMENT_REACTIONS } from 'config'; import { ENABLE_COMMENT_REACTIONS } from 'config';
import Empty from 'component/common/empty'; import Empty from 'component/common/empty';
import debounce from 'util/debounce'; import debounce from 'util/debounce';
import { useIsMobile } from 'effects/use-screensize'; import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
import { getChannelIdFromClaim } from 'util/claim'; import { getChannelIdFromClaim } from 'util/claim';
const DEBOUNCE_SCROLL_HANDLER_MS = 200; const DEBOUNCE_SCROLL_HANDLER_MS = 200;
@ -87,7 +87,8 @@ function CommentList(props: Props) {
linkedCommentId ? 0 : MAX_LINKED_COMMENT_SCROLL_ATTEMPTS linkedCommentId ? 0 : MAX_LINKED_COMMENT_SCROLL_ATTEMPTS
); );
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const [expandedComments, setExpandedComments] = React.useState(!isMobile); const isMediumScreen = useIsMediumScreen();
const [expandedComments, setExpandedComments] = React.useState(!isMobile && !isMediumScreen);
const totalFetchedComments = allCommentIds ? allCommentIds.length : 0; const totalFetchedComments = allCommentIds ? allCommentIds.length : 0;
const channelId = getChannelIdFromClaim(claim); const channelId = getChannelIdFromClaim(claim);
const channelSettings = channelId ? settingsByChannelId[channelId] : undefined; const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
@ -243,7 +244,7 @@ function CommentList(props: Props) {
} }
const handleCommentScroll = debounce(() => { const handleCommentScroll = debounce(() => {
if (!isMobile && shouldFetchNextPage(page, topLevelTotalPages, window, document)) { if (!isMobile && !isMediumScreen && shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
setPage(page + 1); setPage(page + 1);
} }
}, DEBOUNCE_SCROLL_HANDLER_MS); }, DEBOUNCE_SCROLL_HANDLER_MS);
@ -258,6 +259,7 @@ function CommentList(props: Props) {
} }
}, [ }, [
isMobile, isMobile,
isMediumScreen,
page, page,
moreBelow, moreBelow,
spinnerRef, spinnerRef,
@ -267,6 +269,13 @@ function CommentList(props: Props) {
topLevelTotalPages, topLevelTotalPages,
]); ]);
// Expand comments
useEffect(() => {
if (!isMobile && !isMediumScreen && !expandedComments) {
setExpandedComments(true);
}
}, [isMobile, isMediumScreen, expandedComments]);
return ( return (
<Card <Card
title={ title={
@ -340,7 +349,7 @@ function CommentList(props: Props) {
{readyToDisplayComments && topLevelComments && getCommentElems(topLevelComments)} {readyToDisplayComments && topLevelComments && getCommentElems(topLevelComments)}
</ul> </ul>
{isMobile && ( {(isMobile || isMediumScreen) && (
<div className="card__bottom-actions--comments"> <div className="card__bottom-actions--comments">
{(!expandedComments || moreBelow) && ( {(!expandedComments || moreBelow) && (
<Button <Button
@ -369,7 +378,7 @@ function CommentList(props: Props) {
</div> </div>
)} )}
{(isFetchingComments || (!isMobile && moreBelow)) && ( {(isFetchingComments || (!isMobile && !isMediumScreen && moreBelow)) && (
<div className="main--empty" ref={spinnerRef}> <div className="main--empty" ref={spinnerRef}>
<Spinner type="small" /> <Spinner type="small" />
</div> </div>

9
ui/scss/component/_main.scss
View file

@ -190,13 +190,18 @@
.file-page__recommended { .file-page__recommended {
width: 25rem; width: 25rem;
@media (max-width: $breakpoint-medium) {
width: 100%;
}
} }
.file-page__secondary-content { .file-page__secondary-content {
padding: 0 var(--spacing-s); padding: 0 var(--spacing-s);
flex-direction: row;
@media (min-width: $breakpoint-medium) { @media (max-width: $breakpoint-medium) {
flex-direction: row; flex-direction: column;
} }
} }
} }