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

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

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