From 4a32f903822ad1d4732083f7ed230fb93b42157e Mon Sep 17 00:00:00 2001 From: Infinite Date: Thu, 30 Jan 2020 23:34:20 +0100 Subject: [PATCH] Styles --- ui/v2.5/src/components/ErrorBoundary.tsx | 2 +- ui/v2.5/src/components/Galleries/Gallery.tsx | 2 +- .../src/components/Galleries/GalleryList.tsx | 2 +- .../SceneFilenameParser/ParserInput.tsx | 46 ++--- .../SceneFilenameParser.tsx | 16 +- .../Settings/SettingsInterfacePanel.tsx | 10 +- ui/v2.5/src/components/Shared/Select.tsx | 4 + ui/v2.5/src/components/Shared/TagLink.tsx | 3 +- ui/v2.5/src/components/Studios/StudioCard.tsx | 4 +- .../Studios/StudioDetails/Studio.tsx | 2 +- ui/v2.5/src/components/Studios/StudioList.tsx | 2 +- ui/v2.5/src/components/Tags/TagList.tsx | 6 +- ui/v2.5/src/components/Wall/Wall.scss | 1 + ui/v2.5/src/components/Wall/WallItem.tsx | 2 +- ui/v2.5/src/components/list/ListFilter.tsx | 9 +- .../components/performers/PerformerCard.tsx | 23 +-- .../PerformerDetailsPanel.tsx | 17 +- .../performers/PerformerListTable.tsx | 119 +++++------- ui/v2.5/src/components/performers/styles.scss | 8 - ui/v2.5/src/components/scenes/SceneCard.tsx | 70 ++++--- .../scenes/SceneDetails/PrimaryTags.tsx | 4 +- .../scenes/SceneDetails/SceneMarkerForm.tsx | 6 +- ui/v2.5/src/components/scenes/SceneList.tsx | 2 +- .../src/components/scenes/SceneListTable.tsx | 101 ++++------ .../scenes/ScenePlayer/ScenePlayer.tsx | 2 +- .../scenes/SceneSelectedOptions.tsx | 3 +- ui/v2.5/src/components/scenes/styles.scss | 46 ++++- ui/v2.5/src/components/styles.scss | 15 -- ui/v2.5/src/index.scss | 181 +++++++----------- ui/v2.5/src/styles/_theme.scss | 10 + 30 files changed, 321 insertions(+), 397 deletions(-) diff --git a/ui/v2.5/src/components/ErrorBoundary.tsx b/ui/v2.5/src/components/ErrorBoundary.tsx index 84312a417..7ca35653f 100644 --- a/ui/v2.5/src/components/ErrorBoundary.tsx +++ b/ui/v2.5/src/components/ErrorBoundary.tsx @@ -19,7 +19,7 @@ export class ErrorBoundary extends React.Component { return (

Something went wrong.

-
+
{this.state.error && this.state.error.toString()}
{this.state.errorInfo.componentStack} diff --git a/ui/v2.5/src/components/Galleries/Gallery.tsx b/ui/v2.5/src/components/Galleries/Gallery.tsx index 4bc0dcd48..6988057fb 100644 --- a/ui/v2.5/src/components/Galleries/Gallery.tsx +++ b/ui/v2.5/src/components/Galleries/Gallery.tsx @@ -14,7 +14,7 @@ export const Gallery: React.FC = () => { if (error) return
{error.message}
; return ( -
+
); diff --git a/ui/v2.5/src/components/Galleries/GalleryList.tsx b/ui/v2.5/src/components/Galleries/GalleryList.tsx index 872bf35c5..484554bf4 100644 --- a/ui/v2.5/src/components/Galleries/GalleryList.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryList.tsx @@ -23,7 +23,7 @@ export const GalleryList: React.FC = () => { } if (filter.displayMode === DisplayMode.List) { return ( - +
diff --git a/ui/v2.5/src/components/SceneFilenameParser/ParserInput.tsx b/ui/v2.5/src/components/SceneFilenameParser/ParserInput.tsx index a69e086e2..8b5678cb3 100644 --- a/ui/v2.5/src/components/SceneFilenameParser/ParserInput.tsx +++ b/ui/v2.5/src/components/SceneFilenameParser/ParserInput.tsx @@ -156,11 +156,12 @@ export const ParserInput: React.FC = ( Ignored words - setIgnoreWords(newValue.target.value)} - value={ignoreWords} - /> + + setIgnoreWords(newValue.target.value)} + value={ignoreWords} + /> + Matches with {"{i}"} @@ -171,27 +172,29 @@ export const ParserInput: React.FC = ( Whitespace characters: - - setWhitespaceCharacters(newValue.target.value) - } - value={whitespaceCharacters} - /> + + + setWhitespaceCharacters(newValue.target.value) + } + value={whitespaceCharacters} + /> + These characters will be replaced with whitespace in the title - - - Capitalize title - - + setCapitalizeTitle(!capitalizeTitle)} /> + + Capitalize title + {/* TODO - mapping stuff will go here */} @@ -222,12 +225,11 @@ export const ParserInput: React.FC = ( - props.onPageSizeChanged(parseInt(event.target.value, 10)) @@ -236,7 +238,7 @@ export const ParserInput: React.FC = ( className="col-1 filter-item" > {PAGE_SIZE_OPTIONS.map(val => ( - + ))} diff --git a/ui/v2.5/src/components/SceneFilenameParser/SceneFilenameParser.tsx b/ui/v2.5/src/components/SceneFilenameParser/SceneFilenameParser.tsx index dd31dd5d2..20072711e 100644 --- a/ui/v2.5/src/components/SceneFilenameParser/SceneFilenameParser.tsx +++ b/ui/v2.5/src/components/SceneFilenameParser/SceneFilenameParser.tsx @@ -414,8 +414,7 @@ export const SceneFilenameParser: React.FC = () => { return ( <> - + { return ( <> - + - - - - - - - - - ); - } + + + + + + + + + ) return (
diff --git a/ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx index 74a1846fd..b6601553f 100644 --- a/ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx +++ b/ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx @@ -194,7 +194,7 @@ export class ScenePlayerImpl extends React.Component< return ( = ( Rating setRating(event.target.value)} > {["", "1", "2", "3", "4", "5"].map(opt => ( - ))} diff --git a/ui/v2.5/src/components/scenes/styles.scss b/ui/v2.5/src/components/scenes/styles.scss index 1f94489e6..0ce0d74f9 100644 --- a/ui/v2.5/src/components/scenes/styles.scss +++ b/ui/v2.5/src/components/scenes/styles.scss @@ -13,12 +13,33 @@ } } -.grid { +.row { .scene-card { - padding-bottom: 0; + overflow: hidden; + padding: 0; } } +.scene-card-link { + position: relative; +} + +.card-section { + margin-bottom: 0; + padding: .5rem 1rem 0 1rem; +} + +.card-select { + left: .5rem; + margin-top: -12px; + opacity: .5; + padding-left: 15px; + position: absolute; + top: .7rem; + width: 1.2rem; + z-index: 1; +} + .performer-tag-container { display: inline-block; margin: 5px; @@ -105,3 +126,24 @@ overflow-y: auto; } } + +.studio-card { + padding: .5rem; + + &-header { + height: 150px; + line-height: 150px; + text-align: center; + } + + &-image { + max-height: 150px; + object-fit: contain; + vertical-align: middle; + width: 320px; + + @media (max-width: 576px) { + width: 100%; + } + } +} diff --git a/ui/v2.5/src/components/styles.scss b/ui/v2.5/src/components/styles.scss index 32cd4d47d..e69de29bb 100644 --- a/ui/v2.5/src/components/styles.scss +++ b/ui/v2.5/src/components/styles.scss @@ -1,15 +0,0 @@ -.studio-card { - padding: .5rem; -} - -.studio-image { - height: 150px; - line-height: 150px; - text-align: center; - - img { - max-height: 100%; - max-width: 100%; - vertical-align: middle; - } -} diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss index 2f4e965c9..225cd8c6c 100755 --- a/ui/v2.5/src/index.scss +++ b/ui/v2.5/src/index.scss @@ -25,126 +25,71 @@ code { margin: $pt-grid-size $pt-grid-size 0 0; padding: 0; - .performer-card, - .studio-card { - min-width: 185px; - width: 320px; - } - &.wall { margin: 0; padding: 0; } - & .performer-list-thumbnail { - height: 100px; - min-width: 50px; - } - - & .scene-list-thumbnail { - min-height: 50px; - width: 150px; - } - table td { text-align: center; vertical-align: middle; } +} - .card { - margin: 0 0 10px 10px; - overflow: hidden; +.card { + margin: 5px; +} - @media (min-width: 576px) { - &.zoom-0 { - width: 15rem; +@media (min-width: 576px) { + .zoom-0 { + width: 15rem; + } - .previewable { - max-height: 11.25rem; - } + .zoom-1 { + width: 20rem; + } - .previewable.portrait { - max-height: 11.25rem; - } - } + .zoom-2 { + width: 30rem; + } - &.zoom-1 { - width: 20rem; - - .previewable { - max-height: 15rem; - } - - .previewable.portrait { - height: 15rem; - } - } - - &.zoom-2 { - width: 30rem; - - .previewable { - max-height: 22.5rem; - } - - .previewable.portrait { - height: 22.5rem; - } - } - - &.zoom-3 { - width: 40rem; - - .previewable { - max-height: 30rem; - } - - .previewable.portrait { - height: 30rem; - } - } - } - - .card-select { - margin-top: -12px; - opacity: .5; - padding-left: 15px; - position: absolute; - width: 1.2rem; - z-index: 1; - } + .zoom-3 { + width: 40rem; } } -.previewable { - display: block; - line-height: 0; - margin: -20px 0 0 -20px; - max-height: 240px; - overflow: hidden; - position: relative; - width: calc(100% + 40px); -} - -.previewable.portrait { - height: 240px; -} - -.video-container { - height: 100%; +.scene-card-video { + height: auto; width: 100%; + + .zoom-0 { + height: 11.25rem; + } + + .zoom-1 { + height: 15rem; + } + + .zoom-2 { + height: 22.5rem; + } + + .zoom-3 { + height: 30rem; + } } -video.preview { - display: block; - margin: 0 auto; +.image-thumbnail { + height: 100px; + min-width: 50px; object-fit: cover; - width: 100%; + object-position: center 20%; } -video.preview.portrait { - height: 100%; - width: auto; +.card-image { + height: 30rem; + min-width: 11.25rem; + width: 20rem; } .filter-item, @@ -204,16 +149,6 @@ video.preview.portrait { margin: 10px auto; } -.card-section { - padding: 10px 0 0 0; - - &.centered { - display: flex; - flex-flow: wrap; - justify-content: center; - } -} - .rating-5 { background: #ff2f39; } @@ -264,26 +199,27 @@ video.preview.portrait { .scene-studio-overlay { display: block; font-weight: 900; - height: 20%; + height: 10%; + max-width: 40%; opacity: .75; position: absolute; right: .7rem; top: .7rem; - width: 40%; z-index: 9; + .image-thumbnail { + height: auto; + max-height: 50px; + max-width: 100%; + } + a { - background-position: right top; - background-repeat: no-repeat; - background-size: contain; color: $text-color; display: inline-block; - height: 100%; letter-spacing: -.03rem; text-align: right; text-decoration: none; text-shadow: 0 0 3px #000; - width: 100%; } } @@ -468,6 +404,12 @@ video.preview.portrait { .form-control { &-plaintext { color: $text-color; + margin: 0; + padding: 0; + + option { + color: black; + } &::placeholder { color: transparent; @@ -496,6 +438,7 @@ video.preview.portrait { .image-input { margin-bottom: 0; + margin-left: .5rem; overflow: hidden; position: relative; @@ -504,7 +447,6 @@ video.preview.portrait { } [type=file] { - cursor: inherit; display: block; filter: alpha(opacity=0); font-size: 999px; @@ -515,6 +457,11 @@ video.preview.portrait { right: 0; text-align: right; top: 0; + + &:hover { + cursor: pointer; + } + } } @@ -565,3 +512,7 @@ video.preview.portrait { } } } + +.error-message { + white-space: "pre-wrap"; +} diff --git a/ui/v2.5/src/styles/_theme.scss b/ui/v2.5/src/styles/_theme.scss index 9309a7dcc..c9793ac92 100644 --- a/ui/v2.5/src/styles/_theme.scss +++ b/ui/v2.5/src/styles/_theme.scss @@ -99,6 +99,16 @@ hr { } } +.table { + td { + padding: .25rem .75rem; + } +} + .popover { max-width: inherit; } + +.card { + border: none; +}
Preview - { props.onSetChanged(!props.parserResult.set); @@ -458,7 +457,7 @@ export const SceneFilenameParser: React.FC = () => { disabled={!props.parserResult.set} className={props.className} value={props.parserResult.value || ""} - onBlur={(event: any) => props.onChange(event.target.value)} + onChange={(event: any) => props.onChange(event.target.value)} /> ); } @@ -494,7 +493,7 @@ export const SceneFilenameParser: React.FC = () => { return (
{elements.map((name: string) => ( - {name} + {name} ))}
); @@ -592,7 +591,7 @@ export const SceneFilenameParser: React.FC = () => { return (
{props.scene.filename}{props.scene.filename} - + { onAllSet(!allSet); @@ -715,7 +713,7 @@ export const SceneFilenameParser: React.FC = () => { - + {renderHeader("Title", allTitleSet, onSelectAllTitleSet)} {renderHeader("Date", allDateSet, onSelectAllDateSet)} {renderHeader( diff --git a/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx b/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx index bbc75c055..6d3768b44 100644 --- a/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx +++ b/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx @@ -7,13 +7,13 @@ import { useToast } from "src/hooks"; export const SettingsInterfacePanel: React.FC = () => { const Toast = useToast(); const config = StashService.useConfiguration(); - const [soundOnPreview, setSoundOnPreview] = useState(); - const [wallShowTitle, setWallShowTitle] = useState(); + const [soundOnPreview, setSoundOnPreview] = useState(true); + const [wallShowTitle, setWallShowTitle] = useState(true); const [maximumLoopDuration, setMaximumLoopDuration] = useState(0); - const [autostartVideo, setAutostartVideo] = useState(); - const [showStudioAsText, setShowStudioAsText] = useState(); + const [autostartVideo, setAutostartVideo] = useState(false); + const [showStudioAsText, setShowStudioAsText] = useState(false); const [css, setCSS] = useState(); - const [cssEnabled, setCSSEnabled] = useState(); + const [cssEnabled, setCSSEnabled] = useState(false); const [updateInterfaceConfig] = StashService.useConfigureInterface({ soundOnPreview, diff --git a/ui/v2.5/src/components/Shared/Select.tsx b/ui/v2.5/src/components/Shared/Select.tsx index 7faed20bf..62922e701 100644 --- a/ui/v2.5/src/components/Shared/Select.tsx +++ b/ui/v2.5/src/components/Shared/Select.tsx @@ -340,6 +340,10 @@ const SelectComponent: React.FC = ({ container: (base: CSSProperties, state: any) => ({ ...base, zIndex: state.isFocused ? 10 : base.zIndex + }), + multiValueRemove: (base: CSSProperties, state: any) => ({ + ...base, + color: state.isFocused ? base.color: '#333333' }) }; diff --git a/ui/v2.5/src/components/Shared/TagLink.tsx b/ui/v2.5/src/components/Shared/TagLink.tsx index fc5143c3c..953d3412a 100644 --- a/ui/v2.5/src/components/Shared/TagLink.tsx +++ b/ui/v2.5/src/components/Shared/TagLink.tsx @@ -12,6 +12,7 @@ interface IProps { tag?: Partial; performer?: Partial; marker?: Partial; + className?: string; } export const TagLink: React.FC = (props: IProps) => { @@ -30,7 +31,7 @@ export const TagLink: React.FC = (props: IProps) => { )}`; } return ( - + {title} ); diff --git a/ui/v2.5/src/components/Studios/StudioCard.tsx b/ui/v2.5/src/components/Studios/StudioCard.tsx index 13c621813..f5a41bd40 100644 --- a/ui/v2.5/src/components/Studios/StudioCard.tsx +++ b/ui/v2.5/src/components/Studios/StudioCard.tsx @@ -10,8 +10,8 @@ interface IProps { export const StudioCard: React.FC = ({ studio }) => { return ( - - {studio.name} + + {studio.name}
{studio.name}
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx index 127ccd7f0..32802de4b 100644 --- a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx +++ b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx @@ -160,7 +160,7 @@ export const Studio: React.FC = () => { > {isNew &&

Add Studio

} {name} -
FilenameFilename
+
{TableUtils.renderInputGroup({ title: "Name", diff --git a/ui/v2.5/src/components/Studios/StudioList.tsx b/ui/v2.5/src/components/Studios/StudioList.tsx index 5bb0d4305..988712712 100644 --- a/ui/v2.5/src/components/Studios/StudioList.tsx +++ b/ui/v2.5/src/components/Studios/StudioList.tsx @@ -18,7 +18,7 @@ export const StudioList: React.FC = () => { if (filter.displayMode === DisplayMode.Grid) { return ( -
+
{result.data.findStudios.studios.map(studio => ( ))} diff --git a/ui/v2.5/src/components/Tags/TagList.tsx b/ui/v2.5/src/components/Tags/TagList.tsx index 24684293b..60ddff509 100644 --- a/ui/v2.5/src/components/Tags/TagList.tsx +++ b/ui/v2.5/src/components/Tags/TagList.tsx @@ -98,11 +98,11 @@ export const TagList: React.FC = () => { const tagElements = data.allTags.map(tag => { return ( -
+
-
+
@@ -131,7 +131,7 @@ export const TagList: React.FC = () => {
-
+
{renderFilterTags()}
diff --git a/ui/v2.5/src/components/performers/PerformerCard.tsx b/ui/v2.5/src/components/performers/PerformerCard.tsx index d0988211c..d65ec202d 100644 --- a/ui/v2.5/src/components/performers/PerformerCard.tsx +++ b/ui/v2.5/src/components/performers/PerformerCard.tsx @@ -10,35 +10,36 @@ interface IPerformerCardProps { } export const PerformerCard: React.FC = ( - props: IPerformerCardProps + { performer, ageFromDate } ) => { - const age = TextUtils.age(props.performer.birthdate, props.ageFromDate); + const age = TextUtils.age(performer.birthdate, ageFromDate); const ageString = `${age} years old${ - props.ageFromDate ? " in this scene." : "." + ageFromDate ? " in this scene." : "." }`; function maybeRenderFavoriteBanner() { - if (props.performer.favorite === false) { + if (performer.favorite === false) { return; } return
FAVORITE
; } return ( - + + {performer.name {maybeRenderFavoriteBanner()}
-
{props.performer.name}
+
{performer.name}
{age !== 0 ?
{ageString}
: ""}
- Stars in {props.performer.scene_count}{" "} - + Stars in {performer.scene_count}{" "} + scenes . diff --git a/ui/v2.5/src/components/performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/performers/PerformerDetails/PerformerDetailsPanel.tsx index 03ef8ee65..6edcd8e63 100644 --- a/ui/v2.5/src/components/performers/PerformerDetails/PerformerDetailsPanel.tsx +++ b/ui/v2.5/src/components/performers/PerformerDetails/PerformerDetailsPanel.tsx @@ -222,6 +222,7 @@ export const PerformerDetailsPanel: React.FC = ({ {queryableScrapers ? queryableScrapers.map(s => (
- - - - - - - - - - ); - } + const renderPerformerRow = (performer: GQL.PerformerDataFragment) => ( + + + + + + + + + + ); return ( - <> -
-
= ({ function maybeRenderButtons() { if (isEditing) { return ( - <> +
); } } @@ -377,7 +382,7 @@ export const PerformerDetailsPanel: React.FC = ({ {renderDeleteAlert()} {renderScraperDialog()} - +
{maybeRenderName()} {maybeRenderAliases()} @@ -449,10 +454,6 @@ export const PerformerDetailsPanel: React.FC = ({ isEditing: !!isEditing, onChange: setInstagram })} -
diff --git a/ui/v2.5/src/components/performers/PerformerListTable.tsx b/ui/v2.5/src/components/performers/PerformerListTable.tsx index 5f3626b9e..fb9d296df 100644 --- a/ui/v2.5/src/components/performers/PerformerListTable.tsx +++ b/ui/v2.5/src/components/performers/PerformerListTable.tsx @@ -14,78 +14,55 @@ interface IPerformerListTableProps { export const PerformerListTable: React.FC = ( props: IPerformerListTableProps ) => { - function maybeRenderFavoriteHeart(performer: GQL.PerformerDataFragment) { - if (!performer.favorite) { - return; - } - return ( - - ); - } - - function renderPerformerImage(performer: GQL.PerformerDataFragment) { - const style: React.CSSProperties = { - backgroundImage: `url('${performer.image_path}')`, - lineHeight: 5, - backgroundSize: "contain", - display: "inline-block", - backgroundPosition: "center", - backgroundRepeat: "no-repeat" - }; - - return ( - - ); - } - - function renderPerformerRow(performer: GQL.PerformerDataFragment) { - return ( - <> -
{renderPerformerImage(performer)} - -
{performer.name}
- - 		{performer.aliases ? performer.aliases : ""}{maybeRenderFavoriteHeart(performer)} - -
{performer.scene_count}
- - 		{performer.birthdate}{performer.height}
+ + {performer.name + + + +
{performer.name}
+ + 		{performer.aliases ? performer.aliases : ""}{ + performer.favorite && ( + + ) + } + + +
{performer.scene_count}
+ + 		{performer.birthdate}{performer.height}
- - - - - - - - - - - {props.performers.map(renderPerformerRow)} -
- NameAliasesFavouriteScene CountBirthdateHeight
- - +
+ + + + + + + + + + + + {props.performers.map(renderPerformerRow)} +
+ NameAliasesFavouriteScene CountBirthdateHeight
+
); }; diff --git a/ui/v2.5/src/components/performers/styles.scss b/ui/v2.5/src/components/performers/styles.scss index baf34a921..f45cc421f 100644 --- a/ui/v2.5/src/components/performers/styles.scss +++ b/ui/v2.5/src/components/performers/styles.scss @@ -1,11 +1,3 @@ -.performer.image { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - height: 50vh; - min-height: 400px; -} - #performer-details { td { padding: 2px 0; diff --git a/ui/v2.5/src/components/scenes/SceneCard.tsx b/ui/v2.5/src/components/scenes/SceneCard.tsx index 19e8fde38..4cc602516 100644 --- a/ui/v2.5/src/components/scenes/SceneCard.tsx +++ b/ui/v2.5/src/components/scenes/SceneCard.tsx @@ -63,20 +63,13 @@ export const SceneCard: React.FC = ( function maybeRenderSceneStudioOverlay() { if (!props.scene.studio) return; - let style: React.CSSProperties = { - backgroundImage: `url('${props.scene.studio.image_path}')` - }; - - let text = ""; - if (showStudioAsText) { - style = {}; - text = props.scene.studio.name; - } - return (
- - {text} + + { showStudioAsText + ? props.scene.studio.name + : {props.scene.studio.name} + }
); @@ -103,13 +96,14 @@ export const SceneCard: React.FC = ( if (props.scene.performers.length <= 0) return; const popoverContent = props.scene.performers.map(performer => ( -
+
- + className="performer-tag col m-auto zoom-2" + > + {performer.name + +
)); @@ -182,7 +176,7 @@ export const SceneCard: React.FC = ( return ( @@ -200,20 +194,18 @@ export const SceneCard: React.FC = ( {maybeRenderSceneStudioOverlay()} -
- {maybeRenderRatingBanner()} - {maybeRenderSceneSpecsOverlay()} - -
+ {maybeRenderRatingBanner()} + {maybeRenderSceneSpecsOverlay()} +
@@ -222,13 +214,15 @@ export const SceneCard: React.FC = ( : TextUtils.fileNameFromPath(props.scene.path)}
{props.scene.date} -

- {TextUtils.truncate( - props.scene.details ?? "", - 100, - "... (continued)" - )} -

+ { props.scene.details && ( +

+ {TextUtils.truncate( + props.scene.details, + 100, + "... (continued)" + )} +

+ )}
{maybeRenderPopoverButtonGroup()} diff --git a/ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx b/ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx index ff4ff02e7..6cb0fabc9 100644 --- a/ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx +++ b/ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx @@ -37,13 +37,13 @@ export const PrimaryTags: React.FC = ({ return (
-
+
-
+
- {editingMarker && (
+ + {scene.title - ); - } - } - - function renderSceneRow(scene: GQL.SlimSceneDataFragment) { - return ( -
{renderSceneImage(scene)} - -
- {scene.title ?? TextUtils.fileNameFromPath(scene.path)} -
- - 		{scene.rating ? scene.rating : ""}{renderDuration(scene)}{renderTags(scene.tags)}{renderPerformers(scene.performers)}{renderStudio(scene.studio ?? undefined)}
+ +
+ {scene.title ?? TextUtils.fileNameFromPath(scene.path)} +
+ + 		{scene.rating ? scene.rating : ""}{scene.file.duration && TextUtils.secondsToTimestamp(scene.file.duration) }{renderTags(scene.tags)}{renderPerformers(scene.performers)}{ scene.studio && ( + +
{scene.studio.name}
+ + )} +