open-source-mirrors
/
overseerr
mirror of https://github.com/sct/overseerr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): improve flex header on movie/tv details page

Browse Source
pull/467/head
sct 4 years ago
parent 3438045e51
commit d7b1c28406
3 changed files with 63 additions and 19 deletions
Show Stats Download Patch File Download Diff File

43
src/components/MovieDetails/index.tsx
Unescape View File

@ -70,6 +70,7 @@ const messages = defineMessages({
decline: 'Decline', decline: 'Decline',
studio: 'Studio', studio: 'Studio',
viewfullcrew: 'View Full Crew', viewfullcrew: 'View Full Crew',
view: 'View',
}); });
interface MovieDetailsProps { interface MovieDetailsProps {
@ -206,15 +207,15 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</div> </div>
)} )}
</SlideOver> </SlideOver>
<div className="flex flex-col items-center pt-4 md:flex-row md:items-end"> <div className="flex flex-col items-center pt-4 lg:flex-row lg:items-end">
<div className="flex-shrink-0 md:mr-4"> <div className="lg:mr-4">
<img <img
src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`} src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
alt="" alt=""
className="w-32 rounded shadow md:rounded-lg md:shadow-2xl md:w-52" className="w-32 rounded shadow md:rounded-lg md:shadow-2xl md:w-44 lg:w-52"
/> />
</div> </div>
<div className="flex flex-col mt-4 text-center text-white md:mr-4 md:mt-0 md:text-left"> <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
<div className="mb-2"> <div className="mb-2">
{data.mediaInfo?.status === MediaStatus.AVAILABLE && ( {data.mediaInfo?.status === MediaStatus.AVAILABLE && (
<Badge badgeType="success"> <Badge badgeType="success">
@ -232,11 +233,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</Badge> </Badge>
)} )}
</div> </div>
<h1 className="text-2xl md:text-4xl"> <h1 className="text-2xl lg:text-4xl">
{data.title}{' '} {data.title}{' '}
<span className="text-2xl">({data.releaseDate.slice(0, 4)})</span> <span className="text-2xl">({data.releaseDate.slice(0, 4)})</span>
</h1> </h1>
<span className="mt-1 text-xs md:text-base md:mt-0"> <span className="mt-1 text-xs lg:text-base lg:mt-0">
{(data.runtime ?? 0) > 0 && ( {(data.runtime ?? 0) > 0 && (
<> <>
<FormattedMessage <FormattedMessage
@ -249,10 +250,30 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
{data.genres.map((g) => g.name).join(', ')} {data.genres.map((g) => g.name).join(', ')}
</span> </span>
</div> </div>
<div className="flex justify-end flex-1 mt-4 md:mt-0"> <div className="flex justify-end flex-shrink-0 mt-4 lg:mt-0">
{trailerUrl && ( {trailerUrl && (
<a href={trailerUrl} target={'_blank'} rel="noreferrer"> <a href={trailerUrl} target={'_blank'} rel="noreferrer">
<Button buttonType="ghost"> <Button buttonType="ghost">
<svg
className="w-5 h-5 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<FormattedMessage {...messages.watchtrailer} /> <FormattedMessage {...messages.watchtrailer} />
</Button> </Button>
</a> </a>
@ -266,7 +287,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
> >
{activeRequest ? ( {activeRequest ? (
<svg <svg
className="w-4 mr-1" className="w-5 mr-1"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -279,7 +300,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</svg> </svg>
) : ( ) : (
<svg <svg
className="w-4 mr-1" className="w-5 mr-1"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -464,7 +485,9 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
> >
<div className="flex items-center justify-between p-4 text-gray-200 transition duration-300 h-14 group-hover:text-white"> <div className="flex items-center justify-between p-4 text-gray-200 transition duration-300 h-14 group-hover:text-white">
<div>{data.collection.name}</div> <div>{data.collection.name}</div>
<Button buttonSize="sm">View</Button> <Button buttonSize="sm">
{intl.formatMessage(messages.view)}
</Button>
</div> </div>
</div> </div>
</a> </a>

38
src/components/TvDetails/index.tsx
Unescape View File

@ -227,15 +227,15 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</div> </div>
)} )}
</SlideOver> </SlideOver>
<div className="flex flex-col items-center pt-4 md:flex-row md:items-end"> <div className="flex flex-col items-center pt-4 lg:flex-row lg:items-end">
<div className="flex-shrink-0 md:mr-4"> <div className="lg:mr-4">
<img <img
src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`} src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
alt="" alt=""
className="w-32 rounded shadow md:rounded-lg md:shadow-2xl md:w-52" className="w-32 rounded shadow md:rounded-lg md:shadow-2xl md:w-44 lg:w-52"
/> />
</div> </div>
<div className="flex flex-col mt-4 text-center text-white md:mr-4 md:mt-0 md:text-left"> <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
<div className="mb-2"> <div className="mb-2">
{data.mediaInfo?.status === MediaStatus.AVAILABLE && ( {data.mediaInfo?.status === MediaStatus.AVAILABLE && (
<Badge badgeType="success"> <Badge badgeType="success">
@ -258,7 +258,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</Badge> </Badge>
)} )}
</div> </div>
<h1 className="text-2xl md:text-4xl"> <h1 className="text-2xl lg:text-4xl">
<span>{data.name}</span> <span>{data.name}</span>
{data.firstAirDate && ( {data.firstAirDate && (
<span className="ml-2 text-2xl"> <span className="ml-2 text-2xl">
@ -266,14 +266,34 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</span> </span>
)} )}
</h1> </h1>
<span className="mt-1 text-xs md:text-base md:mt-0"> <span className="mt-1 text-xs lg:text-base lg:mt-0">
{data.genres.map((g) => g.name).join(', ')} {data.genres.map((g) => g.name).join(', ')}
</span> </span>
</div> </div>
<div className="flex justify-end flex-1 mt-4 md:mt-0"> <div className="flex justify-end flex-shrink-0 mt-4 lg:mt-0">
{trailerUrl && ( {trailerUrl && (
<a href={trailerUrl} target="_blank" rel="noreferrer"> <a href={trailerUrl} target="_blank" rel="noreferrer">
<Button buttonType="ghost"> <Button buttonType="ghost">
<svg
className="w-5 h-5 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<FormattedMessage {...messages.watchtrailer} /> <FormattedMessage {...messages.watchtrailer} />
</Button> </Button>
</a> </a>
@ -286,7 +306,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
onClick={() => setShowRequestModal(true)} onClick={() => setShowRequestModal(true)}
> >
<svg <svg
className="w-4 mr-1" className="w-5 mr-1"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -323,7 +343,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
text={ text={
<> <>
<svg <svg
className="w-4 mr-1" className="w-5 mr-1"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

1
src/i18n/locale/en.json
Unescape View File

@ -56,6 +56,7 @@
"components.MovieDetails.studio": "Studio", "components.MovieDetails.studio": "Studio",
"components.MovieDetails.unavailable": "Unavailable", "components.MovieDetails.unavailable": "Unavailable",
"components.MovieDetails.userrating": "User Rating", "components.MovieDetails.userrating": "User Rating",
"components.MovieDetails.view": "View",
"components.MovieDetails.viewfullcrew": "View Full Crew", "components.MovieDetails.viewfullcrew": "View Full Crew",
"components.MovieDetails.viewrequest": "View Request", "components.MovieDetails.viewrequest": "View Request",
"components.MovieDetails.watchtrailer": "Watch Trailer", "components.MovieDetails.watchtrailer": "Watch Trailer",

Write Preview
Loading…
Cancel
Save