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

Minor layout fixes depending on window size #7709

Merged
jm-morani merged 1 commit from minor-dynamic-layout-fixes into master 2022-10-25 16:03:20 +02:00
Conversation 2 Commits 1 Files changed 11 +36 -26
11 changed files with 36 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -9,7 +9,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Show downloads newest first ([#7684](https://github.com/lbryio/lbry-desktop/pull/7684)) - Show downloads newest first ([#7684](https://github.com/lbryio/lbry-desktop/pull/7684))
- Only allow images in image uploader ([#7672](https://github.com/lbryio/lbry-desktop/pull/7672)) - Only allow images in image uploader ([#7672](https://github.com/lbryio/lbry-desktop/pull/7672))
- Fixed bug with csv exports ([#7697](https://github.com/lbryio/lbry-desktop/pull/7697)) - Fixed bug with csv exports ([#7697](https://github.com/lbryio/lbry-desktop/pull/7697))
- Fixed small screen viewer position ([#7677](https://github.com/lbryio/lbry-desktop/pull/7677))
- Fixed various upload bugs including transcoding ([#7688](https://github.com/lbryio/lbry-desktop/pull/7688)) - Fixed various upload bugs including transcoding ([#7688](https://github.com/lbryio/lbry-desktop/pull/7688))
- Fallback for files with no extension ([#7704](https://github.com/lbryio/lbry-desktop/pull/7704)) - Fallback for files with no extension ([#7704](https://github.com/lbryio/lbry-desktop/pull/7704))

6
ui/component/fileRenderFloating/view.jsx
View file

@ -12,7 +12,7 @@ import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
import Draggable from 'react-draggable'; import Draggable from 'react-draggable';
import { onFullscreenChange } from 'util/full-screen'; import { onFullscreenChange } from 'util/full-screen';
import { generateListSearchUrlParams, formatLbryUrlForWeb } from 'util/url'; import { generateListSearchUrlParams, formatLbryUrlForWeb } from 'util/url';
import { useIsMobile } from 'effects/use-screensize'; import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
import debounce from 'util/debounce'; import debounce from 'util/debounce';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { isURIEqual } from 'util/lbryURI'; import { isURIEqual } from 'util/lbryURI';
@ -132,6 +132,7 @@ export default function FileRenderFloating(props: Props) {
const playingUriSource = playingUri && playingUri.source; const playingUriSource = playingUri && playingUri.source;
const isComment = playingUriSource === 'comment'; const isComment = playingUriSource === 'comment';
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const isMediumScreen = useIsMediumScreen();
const mainFilePlaying = !isFloating && primaryUri && isURIEqual(uri, primaryUri); const mainFilePlaying = !isFloating && primaryUri && isURIEqual(uri, primaryUri);
const [fileViewerRect, setFileViewerRect] = useState(); const [fileViewerRect, setFileViewerRect] = useState();
@ -343,7 +344,8 @@ export default function FileRenderFloating(props: Props) {
'content__viewer--floating': isFloating, 'content__viewer--floating': isFloating,
'content__viewer--inline': !isFloating, 'content__viewer--inline': !isFloating,
'content__viewer--secondary': isComment, 'content__viewer--secondary': isComment,
'content__viewer--theater-mode': !isFloating && videoTheaterMode && playingUri?.uri === primaryUri, 'content__viewer--theater-mode':
!isFloating && videoTheaterMode && !isMediumScreen && playingUri?.uri === primaryUri,
'content__viewer--disable-click': wasDragging, 'content__viewer--disable-click': wasDragging,
})} })}
style={ style={

4
ui/component/fileRenderInitiator/view.jsx
View file

@ -9,6 +9,7 @@ import * as PAGES from 'constants/pages';
import * as RENDER_MODES from 'constants/file_render_modes'; import * as RENDER_MODES from 'constants/file_render_modes';
import * as KEYCODES from 'constants/keycodes'; import * as KEYCODES from 'constants/keycodes';
import Button from 'component/button'; import Button from 'component/button';
import { useIsMediumScreen } from 'effects/use-screensize';
import isUserTyping from 'util/detect-typing'; import isUserTyping from 'util/detect-typing';
import { getThumbnailCdnUrl } from 'util/thumbnail'; import { getThumbnailCdnUrl } from 'util/thumbnail';
import Nag from 'component/common/nag'; import Nag from 'component/common/nag';
@ -63,6 +64,7 @@ export default function FileRenderInitiator(props: Props) {
const fileStatus = fileInfo && fileInfo.status; const fileStatus = fileInfo && fileInfo.status;
const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode); const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
const isText = RENDER_MODES.TEXT_MODES.includes(renderMode); const isText = RENDER_MODES.TEXT_MODES.includes(renderMode);
const isMediumScreen = useIsMediumScreen();
const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder); const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
const containerRef = React.useRef<any>(); const containerRef = React.useRef<any>();
@ -151,7 +153,7 @@ export default function FileRenderInitiator(props: Props) {
style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")` } : {}} style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")` } : {}}
className={classnames('content__cover', { className={classnames('content__cover', {
'content__cover--disabled': disabled, 'content__cover--disabled': disabled,
'content__cover--theater-mode': videoTheaterMode, 'content__cover--theater-mode': videoTheaterMode && !isMediumScreen,
'content__cover--text': isText, 'content__cover--text': isText,
'card__media--nsfw': obscurePreview, 'card__media--nsfw': obscurePreview,
})} })}

4
ui/component/page/view.jsx
View file

@ -92,7 +92,7 @@ function Page(props: Props) {
<div <div
className={classnames('main-wrapper__inner', { className={classnames('main-wrapper__inner', {
'main-wrapper__inner--filepage': isOnFilePage, 'main-wrapper__inner--filepage': isOnFilePage,
'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode, 'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode && !isMediumScreen,
})} })}
> >
{!authPage && {!authPage &&
@ -124,7 +124,7 @@ function Page(props: Props) {
'main--file-page': filePage, 'main--file-page': filePage,
'main--settings-page': settingsPage, 'main--settings-page': settingsPage,
'main--markdown': isMarkdown, 'main--markdown': isMarkdown,
'main--theater-mode': isOnFilePage && videoTheaterMode && !isMarkdown, 'main--theater-mode': isOnFilePage && videoTheaterMode && !isMediumScreen && !isMarkdown,
})} })}
> >
{children} {children}

20
ui/page/file/view.jsx
View file

@ -1,6 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import { useIsMediumScreen } from 'effects/use-screensize';
import Page from 'component/page'; import Page from 'component/page';
import * as RENDER_MODES from 'constants/file_render_modes'; import * as RENDER_MODES from 'constants/file_render_modes';
import FileTitleSection from 'component/fileTitleSection'; import FileTitleSection from 'component/fileTitleSection';
@ -59,6 +60,7 @@ function FilePage(props: Props) {
} = props; } = props;
const cost = costInfo ? costInfo.cost : null; const cost = costInfo ? costInfo.cost : null;
const hasFileInfo = fileInfo !== undefined; const hasFileInfo = fileInfo !== undefined;
const isMediumScreen = useIsMediumScreen();
const isMarkdown = renderMode === RENDER_MODES.MARKDOWN; const isMarkdown = renderMode === RENDER_MODES.MARKDOWN;
const videoPlayedEnoughToResetPosition = React.useMemo(() => { const videoPlayedEnoughToResetPosition = React.useMemo(() => {
const durationInSecs = const durationInSecs =
@ -169,8 +171,10 @@ function FilePage(props: Props) {
<div className={classnames('section card-stack', `file-page__${renderMode}`)}> <div className={classnames('section card-stack', `file-page__${renderMode}`)}>
<FileTitleSection uri={uri} isNsfwBlocked /> <FileTitleSection uri={uri} isNsfwBlocked />
</div> </div>
{collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />} {collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && (
{!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />} <CollectionContent id={collectionId} uri={uri} />
)}
{!collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && <RecommendedContent uri={uri} />}
</Page> </Page>
); );
} }
@ -187,13 +191,17 @@ function FilePage(props: Props) {
{commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />} {commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
{!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />} {!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
</div> </div>
{!collection && !isMarkdown && videoTheaterMode && <RecommendedContent uri={uri} />} {!collection && !isMarkdown && videoTheaterMode && !isMediumScreen && <RecommendedContent uri={uri} />}
{collection && !isMarkdown && videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />} {collection && !isMarkdown && videoTheaterMode && !isMediumScreen && (
<CollectionContent id={collectionId} uri={uri} />
)}
</div> </div>
)} )}
</div> </div>
{collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />} {collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && (
{!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />} <CollectionContent id={collectionId} uri={uri} />
)}
{!collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && <RecommendedContent uri={uri} />}
{isMarkdown && ( {isMarkdown && (
<div className="file-page__post-comments"> <div className="file-page__post-comments">
{!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />} {!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />}

2
ui/scss/component/_button.scss
View file

@ -167,7 +167,7 @@ a.button--alt {
.vjs-button--theater-mode.vjs-button { .vjs-button--theater-mode.vjs-button {
display: none; display: none;
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
display: block; display: block;
order: 1; order: 1;
background-repeat: no-repeat; background-repeat: no-repeat;

2
ui/scss/component/_claim-list.scss
View file

@ -621,7 +621,7 @@
@media (max-width: $breakpoint-xsmall) { @media (max-width: $breakpoint-xsmall) {
-webkit-line-clamp: 2 !important; -webkit-line-clamp: 2 !important;
} }
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
-webkit-line-clamp: 1 !important; -webkit-line-clamp: 1 !important;
} }
} }

6
ui/scss/component/_comments.scss
View file

@ -505,7 +505,7 @@ $thumbnailWidthSmall: 1rem;
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
min-width: 40%; min-width: 40%;
max-width: 40%; max-width: 40%;
} }
@ -547,7 +547,7 @@ $thumbnailWidthSmall: 1rem;
} }
} }
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
margin: 0 var(--spacing-xs); margin: 0 var(--spacing-xs);
} }
@ -562,7 +562,7 @@ $thumbnailWidthSmall: 1rem;
padding-left: var(--spacing-m); padding-left: var(--spacing-m);
border-left: 4px solid var(--color-border); border-left: 4px solid var(--color-border);
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
margin-top: 0; margin-top: 0;
margin-left: var(--spacing-s); margin-left: var(--spacing-s);
} }

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

@ -73,7 +73,7 @@ body {
} }
.sidebar--pusher--open { .sidebar--pusher--open {
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
transform: scaleX(0.9) translateX(calc(5.4 * var(--spacing-l))) scaleY(0.9); transform: scaleX(0.9) translateX(calc(5.4 * var(--spacing-l))) scaleY(0.9);
} }
} }
@ -155,7 +155,7 @@ body {
} }
} }
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
flex-direction: row; flex-direction: row;
} }
@media (max-width: $breakpoint-medium) { @media (max-width: $breakpoint-medium) {
@ -461,7 +461,6 @@ body {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
margin-top: 0; margin-top: 0;
width: 100vw;
max-width: none; max-width: none;
> :first-child { > :first-child {
@ -804,7 +803,7 @@ body {
} }
} }
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
> :first-child { > :first-child {
width: calc(30% - var(--spacing-l)); width: calc(30% - var(--spacing-l));
max-width: 25rem; max-width: 25rem;

4
ui/scss/component/_navigation.scss
View file

@ -70,7 +70,7 @@
color: var(--color-brand-contrast) !important; color: var(--color-brand-contrast) !important;
} }
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
overflow-y: hidden; overflow-y: hidden;
justify-content: space-between; justify-content: space-between;
@ -235,7 +235,7 @@
@extend .navigation-link--highlighted; @extend .navigation-link--highlighted;
} }
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
text-align: left; text-align: left;
margin-bottom: 0; margin-bottom: 0;

6
ui/scss/component/section.scss
View file

@ -358,7 +358,7 @@
max-width: unset; max-width: unset;
} }
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
width: 40%; width: 40%;
.button, .button,
@ -375,7 +375,7 @@
} }
.settings__row--value--multirow { .settings__row--value--multirow {
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
width: 80%; width: 80%;
margin-top: var(--spacing-l); margin-top: var(--spacing-l);
@ -389,7 +389,7 @@
} }
.settings__row--value--vertical-separator { .settings__row--value--vertical-separator {
@media (min-width: $breakpoint-medium) { @media not all and (max-width: $breakpoint-medium) {
border-left: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
} }
} }