Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-18 12:54:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add missing card classes (#2327)

Browse Source 
* Move performer flag and add classes
* Add class to interactive heat map
* Add classes to scene card
* Add missing class names
This commit is contained in:
WithoutPants
2022-02-20 11:05:51 +11:00
committed by GitHub
parent 77acbc42b7
commit 1fab368328
10 changed files with 75 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/v2.5/src/components/Galleries/GalleryCard.tsx
View File

@@ -111,7 +111,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
function maybeRenderOrganized() {
if (props.gallery.organized) {
return (
<div>
<div className="organized">
<Button className="minimal">
<Icon icon="box" />
</Button>

4
ui/v2.5/src/components/Images/ImageCard.tsx
View File

@@ -50,7 +50,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
function maybeRenderOCounter() {
if (props.image.o_counter) {
return (
<div>
<div className="o-count">
<Button className="minimal">
<span className="fa-icon">
<SweatDrops />
@@ -65,7 +65,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
function maybeRenderOrganized() {
if (props.image.organized) {
return (
<div>
<div className="organized">
<Button className="minimal">
<Icon icon="box" />
</Button>

14
ui/v2.5/src/components/Movies/MovieCard.tsx
View File

@@ -85,12 +85,14 @@ export const MovieCard: FunctionComponent<IProps> = (props: IProps) => {
</>
}
details={
<>
<span>{props.movie.date}</span>
<p>
<TruncatedText text={props.movie.synopsis} lineCount={3} />
</p>
</>
<div className="movie-card__details">
<span className="movie-card__date">{props.movie.date}</span>
<TruncatedText
className="movie-card__description"
text={props.movie.synopsis}
lineCount={3}
/>
</div>
}
selected={props.selected}
selecting={props.selecting}

4
ui/v2.5/src/components/Movies/styles.scss
View File

@@ -17,6 +17,10 @@
.movie-scene-number {
text-align: center;
}
&__details {
margin-bottom: 1rem;
}
}
.movie-images {

26
ui/v2.5/src/components/Performers/PerformerCard.tsx
View File

@@ -180,6 +180,22 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
);
}
function maybeRenderFlag() {
if (performer.country) {
return (
<Link to={NavUtils.makePerformersCountryUrl(performer)}>
<CountryFlag
className="performer-card__country-flag"
country={performer.country}
/>
<span className="performer-card__country-string">
{performer.country}
</span>
</Link>
);
}
}
return (
<GridCard
className="performer-card"
@@ -197,14 +213,16 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
/>
{maybeRenderFavoriteIcon()}
{maybeRenderRatingBanner()}
{maybeRenderFlag()}
</>
}
details={
<>
{age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
<Link to={NavUtils.makePerformersCountryUrl(performer)}>
<CountryFlag country={performer.country} />
</Link>
{age !== 0 ? (
<div className="performer-card__age">{ageString}</div>
) : (
""
)}
{maybeRenderPopoverButtonGroup()}
</>
}

14
ui/v2.5/src/components/Performers/styles.scss
View File

@@ -60,6 +60,10 @@
.performer-card {
width: 20rem;
.thumbnail-section {
position: relative;
}
&-image {
height: 30rem;
min-width: 11.25rem;
@@ -70,6 +74,7 @@
.flag-icon {
bottom: 1rem;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
height: 2rem;
position: absolute;
right: 1rem;
@@ -83,6 +88,15 @@
right: 5px;
top: 10px;
}
&__age {
color: $muted-gray;
}
// allow country string to be shown, but disable by default
&__country-string {
display: none;
}
}
.card {

16
ui/v2.5/src/components/Scenes/SceneCard.tsx
View File

@@ -228,7 +228,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
function maybeRenderOCounter() {
if (props.scene.o_counter) {
return (
<div className="o-counter">
<div className="o-count">
<Button className="minimal">
<span className="fa-icon">
<SweatDrops />
@@ -354,12 +354,14 @@ export const SceneCard: React.FC<ISceneCardProps> = (
}
overlays={maybeRenderSceneStudioOverlay()}
details={
<>
<span>{props.scene.date}</span>
<p>
<TruncatedText text={props.scene.details} lineCount={3} />
</p>
</>
<div className="scene-card__details">
<span className="scene-card__date">{props.scene.date}</span>
<TruncatedText
className="scene-card__description"
text={props.scene.details}
lineCount={3}
/>
</div>
}
popovers={maybeRenderPopoverButtonGroup()}
selected={props.selected}

4
ui/v2.5/src/components/Scenes/styles.scss
View File

@@ -208,6 +208,10 @@ textarea.scene-description {
}
}
&__details {
margin-bottom: 1rem;
}
&:hover,
&:active {
.scene-specs-overlay,

8
ui/v2.5/src/components/Shared/GridCard.tsx
View File

@@ -80,7 +80,13 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
function maybeRenderInteractiveHeatmap() {
if (props.interactiveHeatmap) {
return <img src={props.interactiveHeatmap} alt="interactive heatmap" />;
return (
<img
src={props.interactiveHeatmap}
alt="interactive heatmap"
className="interactive-heatmap"
/>
);
}
}

8
ui/v2.5/src/components/Studios/StudioCard.tsx
View File

@@ -22,7 +22,7 @@ function maybeRenderParent(
) {
if (!hideParent && studio.parent_studio) {
return (
<div>
<div className="studio-parent-studios">
<FormattedMessage
id="part_of"
values={{
@@ -41,7 +41,7 @@ function maybeRenderParent(
function maybeRenderChildren(studio: GQL.StudioDataFragment) {
if (studio.child_studios.length > 0) {
return (
<div>
<div className="studio-child-studios">
<FormattedMessage
id="parent_of"
values={{
@@ -151,12 +151,12 @@ export const StudioCard: React.FC<IProps> = ({
/>
}
details={
<>
<div className="studio-card__details">
{maybeRenderParent(studio, hideParent)}
{maybeRenderChildren(studio)}
<RatingBanner rating={studio.rating} />
{maybeRenderPopoverButtonGroup()}
</>
</div>
}
selected={selected}
selecting={selecting}