From 3f9f32c3563ad2e42b22a3d5787c7803d817b07d Mon Sep 17 00:00:00 2001 From: Infinite Date: Wed, 29 Jan 2020 22:22:01 +0100 Subject: [PATCH] Responsive styles for portrait orientation phones --- ui/v2.5/.stylelintrc | 2 +- ui/v2.5/src/App.tsx | 2 +- ui/v2.5/src/components/MainNavbar.tsx | 17 ++- .../SceneFilenameParser/ParserInput.tsx | 4 +- .../SceneFilenameParser/ShowFields.tsx | 5 +- .../Settings/SettingsConfigurationPanel.tsx | 18 +-- .../Settings/SettingsInterfacePanel.tsx | 4 +- .../components/Settings/SettingsLogsPanel.tsx | 6 +- .../components/Shared/DetailsEditNavbar.tsx | 2 +- .../Shared/FolderSelect/FolderSelect.tsx | 2 +- ui/v2.5/src/components/Stats.tsx | 66 +++++---- .../Studios/StudioDetails/Studio.tsx | 4 +- ui/v2.5/src/components/Studios/styles.scss | 2 - ui/v2.5/src/components/Wall/Wall.scss | 4 + ui/v2.5/src/components/Wall/WallPanel.tsx | 2 +- ui/v2.5/src/components/list/ListFilter.tsx | 10 +- ui/v2.5/src/components/list/Pagination.tsx | 19 ++- .../performers/PerformerDetails/Performer.tsx | 27 ++-- .../components/performers/PerformerList.tsx | 2 +- ui/v2.5/src/components/scenes/SceneCard.tsx | 2 +- .../scenes/SceneDetails/PrimaryTags.tsx | 2 +- .../components/scenes/SceneDetails/Scene.tsx | 4 +- .../scenes/SceneDetails/SceneDetailPanel.tsx | 4 +- .../SceneDetails/SceneFileInfoPanel.tsx | 131 +++++++++--------- .../scenes/SceneDetails/SceneMarkersPanel.tsx | 12 +- .../scenes/ScenePlayer/ScenePlayer.tsx | 6 +- .../ScenePlayer/ScenePlayerScrubber.tsx | 2 +- ui/v2.5/src/components/scenes/styles.scss | 4 +- ui/v2.5/src/index.scss | 114 ++++++++++----- 29 files changed, 273 insertions(+), 206 deletions(-) diff --git a/ui/v2.5/.stylelintrc b/ui/v2.5/.stylelintrc index 341c692b5..f90195b09 100644 --- a/ui/v2.5/.stylelintrc +++ b/ui/v2.5/.stylelintrc @@ -49,7 +49,7 @@ "function-whitespace-after": "always", "length-zero-no-unit": true, "max-empty-lines": 1, - "max-nesting-depth": 3, + "max-nesting-depth": 4, "max-line-length": 100, "media-feature-colon-space-after": "always", "media-feature-colon-space-before": "never", diff --git a/ui/v2.5/src/App.tsx b/ui/v2.5/src/App.tsx index 6c5d272d3..8756faefd 100755 --- a/ui/v2.5/src/App.tsx +++ b/ui/v2.5/src/App.tsx @@ -22,7 +22,7 @@ export const App: React.FC = () => ( -
+
diff --git a/ui/v2.5/src/components/MainNavbar.tsx b/ui/v2.5/src/components/MainNavbar.tsx index df68779ab..87649c477 100644 --- a/ui/v2.5/src/components/MainNavbar.tsx +++ b/ui/v2.5/src/components/MainNavbar.tsx @@ -64,13 +64,18 @@ export const MainNavbar: React.FC = () => { ); return ( - + - + + -
); }; diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx index 93bd56d25..716aea489 100644 --- a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx +++ b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx @@ -149,7 +149,7 @@ export const Studio: React.FC = () => { return (
-
+
{ isNew &&

Add Studio

} {name} @@ -180,7 +180,7 @@ export const Studio: React.FC = () => { /> { !isNew && ( -
+
)} diff --git a/ui/v2.5/src/components/Studios/styles.scss b/ui/v2.5/src/components/Studios/styles.scss index e5ea10296..f9c6a2ad3 100644 --- a/ui/v2.5/src/components/Studios/styles.scss +++ b/ui/v2.5/src/components/Studios/styles.scss @@ -1,6 +1,4 @@ .studio-details { - padding-left: 4rem; - .logo { margin: 4rem 0; width: 100%; diff --git a/ui/v2.5/src/components/Wall/Wall.scss b/ui/v2.5/src/components/Wall/Wall.scss index 5e19ad64f..be6f2fb56 100644 --- a/ui/v2.5/src/components/Wall/Wall.scss +++ b/ui/v2.5/src/components/Wall/Wall.scss @@ -93,6 +93,10 @@ position: relative; width: 20%; + @media (max-width: 576px) { + width: 100%; + } + video, img { height: 100%; diff --git a/ui/v2.5/src/components/Wall/WallPanel.tsx b/ui/v2.5/src/components/Wall/WallPanel.tsx index ec2345771..0fafe504b 100644 --- a/ui/v2.5/src/components/Wall/WallPanel.tsx +++ b/ui/v2.5/src/components/Wall/WallPanel.tsx @@ -104,7 +104,7 @@ export const WallPanel: React.FC = ( return ( <>
-
+
{maybeRenderScenes()} {maybeRenderSceneMarkers()}
diff --git a/ui/v2.5/src/components/list/ListFilter.tsx b/ui/v2.5/src/components/list/ListFilter.tsx index bc94ec803..7b4b724c9 100644 --- a/ui/v2.5/src/components/list/ListFilter.tsx +++ b/ui/v2.5/src/components/list/ListFilter.tsx @@ -228,7 +228,7 @@ export const ListFilter: React.FC = ( if (props.onChangeZoom) { return ( = ( placeholder="Search..." defaultValue={props.filter.searchTerm} onChange={onChangeQuery} - className="filter-item" + className="filter-item col-5 col-sm-2" style={{ width: "inherit" }} /> {PAGE_SIZE_OPTIONS.map(s => ( @@ -298,13 +298,13 @@ export const ListFilter: React.FC = ( editingCriterion={editingCriterion} /> - + {renderDisplayModeOptions()} {maybeRenderZoom()} - {renderMore()} + {renderMore()}
= ({ i => startPage + i ); + const calculatePageClass = (buttonPage:number) => { + if(pages.length <= 4) return ''; + + if(currentPage === 1 && buttonPage <= 4) return ''; + const maxPage = pages[pages.length - 1]; + if(currentPage === maxPage && buttonPage > (maxPage - 3)) return ''; + if(Math.abs(buttonPage - currentPage) <= 1) return ''; + return 'd-none d-sm-block' + } + const pageButtons = pages.map((page: number) => ( {pageButtons} ); diff --git a/ui/v2.5/src/components/performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/performers/PerformerDetails/Performer.tsx index ccf0c7f16..9b53a742e 100644 --- a/ui/v2.5/src/components/performers/PerformerDetails/Performer.tsx +++ b/ui/v2.5/src/components/performers/PerformerDetails/Performer.tsx @@ -164,7 +164,7 @@ export const Performer: React.FC = () => { } const renderIcons = () => ( - +
-
-
-

- {performer.name} - {renderIcons()} -

- {maybeRenderAliases()} - {maybeRenderAge()} +
+
+
+ +
+
+

+ {performer.name} + {renderIcons()} +

+ {maybeRenderAliases()} + {maybeRenderAge()} +
{renderTabs()}
diff --git a/ui/v2.5/src/components/performers/PerformerList.tsx b/ui/v2.5/src/components/performers/PerformerList.tsx index 1f5c249c0..8dca34dfd 100644 --- a/ui/v2.5/src/components/performers/PerformerList.tsx +++ b/ui/v2.5/src/components/performers/PerformerList.tsx @@ -55,7 +55,7 @@ export const PerformerList: React.FC = () => { } if (filter.displayMode === DisplayMode.Grid) { return ( -
+
{result.data.findPerformers.performers.map(p => ( ))} diff --git a/ui/v2.5/src/components/scenes/SceneCard.tsx b/ui/v2.5/src/components/scenes/SceneCard.tsx index 674d33272..19e8fde38 100644 --- a/ui/v2.5/src/components/scenes/SceneCard.tsx +++ b/ui/v2.5/src/components/scenes/SceneCard.tsx @@ -188,7 +188,7 @@ export const SceneCard: React.FC = ( > props.onSelectedChanged(!props.selected, shiftKey)} onClick={(event: React.MouseEvent) => { diff --git a/ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx b/ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx index 97e5af3e8..7e2900d4b 100644 --- a/ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx +++ b/ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx @@ -53,7 +53,7 @@ export const PrimaryTags: React.FC = ({ sceneMarkers, onClickMarke }); return ( - +

{primaries[id].name}

{ markers } diff --git a/ui/v2.5/src/components/scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/scenes/SceneDetails/Scene.tsx index 318e2c015..011bff2db 100644 --- a/ui/v2.5/src/components/scenes/SceneDetails/Scene.tsx +++ b/ui/v2.5/src/components/scenes/SceneDetails/Scene.tsx @@ -55,7 +55,7 @@ export const Scene: React.FC = () => { timestamp={timestamp} autoplay={autoplay} /> -
+
@@ -83,7 +83,7 @@ export const Scene: React.FC = () => { - + setScene(newScene)} diff --git a/ui/v2.5/src/components/scenes/SceneDetails/SceneDetailPanel.tsx b/ui/v2.5/src/components/scenes/SceneDetails/SceneDetailPanel.tsx index a2f8243a1..836ffe7cf 100644 --- a/ui/v2.5/src/components/scenes/SceneDetails/SceneDetailPanel.tsx +++ b/ui/v2.5/src/components/scenes/SceneDetails/SceneDetailPanel.tsx @@ -34,9 +34,9 @@ export const SceneDetailPanel: React.FC = props => { return (
-

+

{props.scene.title ?? TextUtils.fileNameFromPath(props.scene.path)} -

+

{props.scene.date ?? ''}

{props.scene.rating ?
Rating: {props.scene.rating}
: ""} diff --git a/ui/v2.5/src/components/scenes/SceneDetails/SceneFileInfoPanel.tsx b/ui/v2.5/src/components/scenes/SceneDetails/SceneFileInfoPanel.tsx index 30add3c48..15b0bf9f5 100644 --- a/ui/v2.5/src/components/scenes/SceneDetails/SceneFileInfoPanel.tsx +++ b/ui/v2.5/src/components/scenes/SceneDetails/SceneFileInfoPanel.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { Table } from "react-bootstrap"; import * as GQL from "src/core/generated-graphql"; import { TextUtils } from "src/utils"; @@ -12,10 +11,10 @@ export const SceneFileInfoPanel: React.FC = ( ) => { function renderChecksum() { return ( -
- - - +
+ Checksum + {props.scene.checksum} +
); } @@ -24,25 +23,25 @@ export const SceneFileInfoPanel: React.FC = ( scene: { path } } = props; return ( - - - - + + ); } function renderStream() { return ( - - - - + + ); } @@ -51,12 +50,12 @@ export const SceneFileInfoPanel: React.FC = ( return; } return ( - - - - + + ); } @@ -65,10 +64,12 @@ export const SceneFileInfoPanel: React.FC = ( return; } return ( - - - - +
+ Duration + + {TextUtils.secondsToTimestamp(props.scene.file.duration ?? 0)} + +
); } @@ -77,12 +78,12 @@ export const SceneFileInfoPanel: React.FC = ( return; } return ( - - - - + + ); } @@ -91,22 +92,22 @@ export const SceneFileInfoPanel: React.FC = ( return; } return ( - - - - +
+ Frame Rate + {props.scene.file.framerate} frames per second +
); } - function renderBitRate() { + function renderbitrate() { if (props.scene.file.bitrate === undefined) { return; } return ( - - - - +
+ Bit Rate + {TextUtils.bitRate(props.scene.file.bitrate ?? 0)} +
); } @@ -115,10 +116,10 @@ export const SceneFileInfoPanel: React.FC = ( return; } return ( - - - - +
+ Video Codec + {props.scene.file.video_codec} +
); } @@ -127,10 +128,10 @@ export const SceneFileInfoPanel: React.FC = ( return; } return ( - - - - +
+ Audio Codec + {props.scene.file.audio_codec} +
); } @@ -139,30 +140,26 @@ export const SceneFileInfoPanel: React.FC = ( return; } return ( - - - - +
+ Downloaded From + {props.scene.url} +
); } return ( - <> -
Checksum{props.scene.checksum}
Path +
Stream +
+ Stream + {props.scene.paths.stream} {" "} -
File Size +
+ File Size + {TextUtils.fileSize(parseInt(props.scene.file.size ?? "0", 10))} -
Duration{TextUtils.secondsToTimestamp(props.scene.file.duration ?? 0)}
Dimensions +
+ Dimensions + {props.scene.file.width} x {props.scene.file.height} -
Frame Rate{props.scene.file.framerate} frames per second
Bit Rate{TextUtils.bitRate(props.scene.file.bitrate ?? 0)}
Video Codec{props.scene.file.video_codec}
Audio Codec{props.scene.file.audio_codec}
Downloaded From{props.scene.url}
- - {renderChecksum()} - {renderPath()} - {renderStream()} - {renderFileSize()} - {renderDuration()} - {renderDimensions()} - {renderFrameRate()} - {renderBitRate()} - {renderVideoCodec()} - {renderAudioCodec()} - {renderUrl()} - -
- +
+ {renderChecksum()} + {renderPath()} + {renderStream()} + {renderFileSize()} + {renderDuration()} + {renderDimensions()} + {renderFrameRate()} + {renderbitrate()} + {renderVideoCodec()} + {renderAudioCodec()} + {renderUrl()} +
); }; diff --git a/ui/v2.5/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx b/ui/v2.5/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx index 98772711c..d91348eea 100644 --- a/ui/v2.5/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx +++ b/ui/v2.5/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx @@ -51,11 +51,13 @@ export const SceneMarkersPanel: React.FC = ( return ( <> - +
+ +
-
+ +
{this.renderPlayer()} = ( } return ( -
+