Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-07 08:54:10 +01:00
Code Issues Projects Releases Wiki Activity

add divider on more details pages (#3514)

Browse source
This commit is contained in:
CJ 2023-03-10 03:17:20 -06:00 committed by GitHub
parent 579c5ad8b9
commit b7183900ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 131 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx
View file

@ -281,11 +281,13 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
Mousetrap.bind("a", () => setActiveTabKey("gallery-details-panel"));
Mousetrap.bind("e", () => setActiveTabKey("gallery-edit-panel"));
Mousetrap.bind("f", () => setActiveTabKey("gallery-file-info-panel"));
Mousetrap.bind(",", () => setCollapsed(!collapsed));
return () => {
Mousetrap.unbind("a");
Mousetrap.unbind("e");
Mousetrap.unbind("f");
Mousetrap.unbind(",");
};
});

21
ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
View file

@ -49,6 +49,8 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
const intl = useIntl();
const { tab = "details" } = useParams<IPerformerParams>();
const [collapsed, setCollapsed] = useState(false);
// Configuration settings
const { configuration } = React.useContext(ConfigurationContext);
const abbreviateCounter =
@ -116,6 +118,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
Mousetrap.bind("g", () => setActiveTabKey("galleries"));
Mousetrap.bind("m", () => setActiveTabKey("movies"));
Mousetrap.bind("f", () => setFavorite(!performer.favorite));
Mousetrap.bind(",", () => setCollapsed(!collapsed));
return () => {
Mousetrap.unbind("a");
@ -123,6 +126,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
Mousetrap.unbind("c");
Mousetrap.unbind("f");
Mousetrap.unbind("o");
Mousetrap.unbind(",");
};
});
@ -380,13 +384,21 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
/>
);
function getCollapseButtonText() {
return collapsed ? ">" : "<";
}
return (
<div id="performer-page" className="row">
<Helmet>
<title>{performer.name}</title>
</Helmet>
<div className="performer-image-container col-md-4 text-center">
<div
className={`performer-image-container details-tab text-center text-center ${
collapsed ? "collapsed" : ""
}`}
>
{encodingImage ? (
<LoadingIndicator message="Encoding image..." />
) : (
@ -399,7 +411,12 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
</Button>
)}
</div>
<div className="col-md-8">
<div className="details-divider d-none d-xl-block">
<Button onClick={() => setCollapsed(!collapsed)}>
{getCollapseButtonText()}
</Button>
</div>
<div className={`content-container ${collapsed ? "expanded" : ""}`}>
<div className="row">
<div className="performer-head col">
<h2>

21
ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
View file

@ -1,4 +1,4 @@
import { Tabs, Tab } from "react-bootstrap";
import { Button, Tabs, Tab } from "react-bootstrap";
import React, { useEffect, useState } from "react";
import { useParams, useHistory } from "react-router-dom";
import { FormattedMessage, useIntl } from "react-intl";
@ -44,6 +44,8 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
const intl = useIntl();
const { tab = "details" } = useParams<IStudioParams>();
const [collapsed, setCollapsed] = useState(false);
// Configuration settings
const { configuration } = React.useContext(ConfigurationContext);
const abbreviateCounter =
@ -66,10 +68,12 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
Mousetrap.bind("d d", () => {
onDelete();
});
Mousetrap.bind(",", () => setCollapsed(!collapsed));
return () => {
Mousetrap.unbind("e");
Mousetrap.unbind("d d");
Mousetrap.unbind(",");
};
});
@ -174,9 +178,15 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
}
};
function getCollapseButtonText() {
return collapsed ? ">" : "<";
}
return (
<div className="row">
<div className="studio-details col-md-4">
<div
className={`studio-details details-tab ${collapsed ? "collapsed" : ""}`}
>
<div className="text-center">
{encodingImage ? (
<LoadingIndicator message="Encoding image..." />
@ -215,7 +225,12 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
/>
)}
</div>
<div className="col col-md-8">
<div className="details-divider d-none d-xl-block">
<Button onClick={() => setCollapsed(!collapsed)}>
{getCollapseButtonText()}
</Button>
</div>
<div className={`col content-container ${collapsed ? "expanded" : ""}`}>
<Tabs
id="studio-tabs"
mountOnEnter

21
ui/v2.5/src/components/Tags/TagDetails/Tag.tsx
View file

@ -1,4 +1,4 @@
import { Tabs, Tab, Dropdown } from "react-bootstrap";
import { Button, Tabs, Tab, Dropdown } from "react-bootstrap";
import React, { useEffect, useState } from "react";
import { useParams, useHistory } from "react-router-dom";
import { FormattedMessage, useIntl } from "react-intl";
@ -49,6 +49,8 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
const Toast = useToast();
const intl = useIntl();
const [collapsed, setCollapsed] = useState(false);
// Configuration settings
const { configuration } = React.useContext(ConfigurationContext);
const abbreviateCounter =
@ -88,6 +90,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
Mousetrap.bind("d d", () => {
onDelete();
});
Mousetrap.bind(",", () => setCollapsed(!collapsed));
return () => {
if (isEditing) {
@ -96,6 +99,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
Mousetrap.unbind("e");
Mousetrap.unbind("d d");
Mousetrap.unbind(",");
};
});
@ -245,13 +249,19 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
);
}
function getCollapseButtonText() {
return collapsed ? ">" : "<";
}
return (
<>
<Helmet>
<title>{tag.name}</title>
</Helmet>
<div className="row">
<div className="tag-details col-md-4">
<div
className={`tag-details details-tab ${collapsed ? "collapsed" : ""}`}
>
<div className="text-center logo-container">
{encodingImage ? (
<LoadingIndicator message="Encoding image..." />
@ -290,7 +300,12 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
/>
)}
</div>
<div className="col col-md-8">
<div className="details-divider d-none d-xl-block">
<Button onClick={() => setCollapsed(!collapsed)}>
{getCollapseButtonText()}
</Button>
</div>
<div className={`col content-container ${collapsed ? "expanded" : ""}`}>
<Tabs
id="tag-tabs"
mountOnEnter

2
ui/v2.5/src/docs/en/Changelog/v0200.md
View file

@ -13,7 +13,7 @@
### 🎨 Improvements
* Improved Images wall view layout and added Interface settings to adjust the layout. ([#3511](https://github.com/stashapp/stash/pull/3511))
* Added collapsible divider to Gallery page. ([#3508](https://github.com/stashapp/stash/pull/3508))
* Added collapsible divider to Gallery, Performer, Studio and Tag pages. ([#3508](https://github.com/stashapp/stash/pull/3508), [#3514](https://github.com/stashapp/stash/pull/3514))
* Overhauled and improved HLS streaming. ([#3274](https://github.com/stashapp/stash/pull/3274))
### 🐛 Bug fixes

73
ui/v2.5/src/index.scss
View file

@ -767,6 +767,79 @@ div.dropdown-menu {
}
}
$detailTabWidth: calc(100% / 3);
.content-container,
.details-tab {
padding-left: 15px;
padding-right: 15px;
position: relative;
width: 100%;
}
@media (min-width: 768px) {
.details-tab {
flex: 0 0 $detailTabWidth;
max-width: $detailTabWidth;
}
.content-container {
flex: 0 0 calc(100% - #{$detailTabWidth});
max-width: calc(100% - #{$detailTabWidth});
}
}
@media (min-width: 1200px) {
.details-tab {
flex: 0 0 $detailTabWidth;
max-height: calc(100vh - 4rem);
max-width: $detailTabWidth;
overflow: auto;
&.collapsed {
display: none;
}
}
.details-divider {
flex: 0 0 15px;
height: calc(100vh - 4rem);
max-width: 15px;
button {
background-color: transparent;
border: 0;
color: $link-color;
cursor: pointer;
font-size: 10px;
font-weight: 800;
height: 100%;
line-height: 100%;
padding: 0;
text-align: center;
width: 100%;
&:active:not(:hover),
&:focus:not(:hover) {
background-color: transparent;
border: 0;
box-shadow: none;
}
}
}
.content-container {
flex: 0 0 calc(100% - #{$detailTabWidth} - 15px);
max-height: calc(100vh - 4rem);
max-width: calc(100% - #{$detailTabWidth} - 15px);
overflow: auto;
&.expanded {
flex: 0 0 calc(100% - 15px);
max-width: calc(100% - 15px);
}
}
}
.pre {
white-space: pre-line;
}