diff --git a/ui/v2.5/src/components/Galleries/GalleryCard.tsx b/ui/v2.5/src/components/Galleries/GalleryCard.tsx index af7e42aec..ad29ab450 100644 --- a/ui/v2.5/src/components/Galleries/GalleryCard.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryCard.tsx @@ -4,8 +4,14 @@ import { Link } from "react-router-dom"; import * as GQL from "src/core/generated-graphql"; import { FormattedPlural } from "react-intl"; import { useConfiguration } from "src/core/StashService"; -import { HoverPopover, Icon, TagLink } from "../Shared"; -import { BasicCard } from "../Shared/BasicCard"; +import { + BasicCard, + HoverPopover, + Icon, + TagLink, + TruncatedText, +} from "src/components/Shared"; +import { TextUtils } from "src/utils"; interface IProps { gallery: GQL.GallerySlimDataFragment; @@ -174,7 +180,14 @@ export const GalleryCard: React.FC = (props) => { <>
- {props.gallery.title ?? props.gallery.path} +
diff --git a/ui/v2.5/src/components/Galleries/styles.scss b/ui/v2.5/src/components/Galleries/styles.scss index 943e538da..c93a976b3 100644 --- a/ui/v2.5/src/components/Galleries/styles.scss +++ b/ui/v2.5/src/components/Galleries/styles.scss @@ -34,6 +34,10 @@ } } + .card-popovers { + margin-bottom: 0; + } + .card-section-title { color: $text-color; } diff --git a/ui/v2.5/src/components/Images/ImageCard.tsx b/ui/v2.5/src/components/Images/ImageCard.tsx index d40dda346..4c992f598 100644 --- a/ui/v2.5/src/components/Images/ImageCard.tsx +++ b/ui/v2.5/src/components/Images/ImageCard.tsx @@ -3,7 +3,13 @@ import { Button, ButtonGroup, Card, Form } from "react-bootstrap"; import { Link } from "react-router-dom"; import cx from "classnames"; import * as GQL from "src/core/generated-graphql"; -import { Icon, TagLink, HoverPopover, SweatDrops } from "src/components/Shared"; +import { + Icon, + TagLink, + HoverPopover, + SweatDrops, + TruncatedText, +} from "src/components/Shared"; import { TextUtils } from "src/utils"; interface IImageCardProps { @@ -200,9 +206,14 @@ export const ImageCard: React.FC = (
- {props.image.title - ? props.image.title - : TextUtils.fileNameFromPath(props.image.path)} +
diff --git a/ui/v2.5/src/components/Images/styles.scss b/ui/v2.5/src/components/Images/styles.scss index 9cdf480b6..fdbfd78cd 100644 --- a/ui/v2.5/src/components/Images/styles.scss +++ b/ui/v2.5/src/components/Images/styles.scss @@ -47,6 +47,7 @@ &-image { height: 100%; object-fit: contain; + object-position: top; width: 100%; } diff --git a/ui/v2.5/src/components/Movies/MovieCard.tsx b/ui/v2.5/src/components/Movies/MovieCard.tsx index 9dff7cbf9..0e616fdc3 100644 --- a/ui/v2.5/src/components/Movies/MovieCard.tsx +++ b/ui/v2.5/src/components/Movies/MovieCard.tsx @@ -62,7 +62,7 @@ export const MovieCard: FunctionComponent = (props: IProps) => { details={ <>
- +
{maybeRenderSceneNumber()} diff --git a/ui/v2.5/src/components/Movies/styles.scss b/ui/v2.5/src/components/Movies/styles.scss index ed0f4f057..45fb9c14b 100644 --- a/ui/v2.5/src/components/Movies/styles.scss +++ b/ui/v2.5/src/components/Movies/styles.scss @@ -1,26 +1,20 @@ -.card.movie-card { - padding: 0 0 1rem 0; -} - .movie-details { max-width: 1200px; } .movie-card { - &-header { - height: 240px; - line-height: 240px; - text-align: center; + width: 240px; + + @media (max-width: 576px) { + width: 100%; + } + + &.card { + padding: 0 0 1rem; } &-image { - max-height: 240px; object-fit: contain; - vertical-align: middle; - width: 320px; - - @media (max-width: 576px) { - width: 100%; - } + width: 100%; } }