shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): fix button styling on details page on small screen sizes

Browse Source
This commit is contained in:
sct
2021-01-12 12:25:57 +00:00
parent a740b07f06
commit d9e0c90e76
4 changed files with 44 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Common/ButtonWithDropdown/index.tsx
View File

@@ -54,7 +54,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
{children && (
<button
type="button"
className="relative inline-flex items-center px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-700 border border-indigo-600 rounded-r-md hover:bg-indigo-500 focus:z-10 focus:outline-none active:bg-indigo-700 focus:ring-blue"
className="relative inline-flex items-center h-full px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-700 border border-indigo-600 rounded-r-md hover:bg-indigo-500 focus:z-10 focus:outline-none active:bg-indigo-700 focus:ring-blue"
aria-label="Expand"
onClick={() => setIsOpen((state) => !state)}
>

27
src/components/MovieDetails/index.tsx
View File

@@ -33,7 +33,7 @@ import Head from 'next/head';
import ExternalLinkBlock from '../ExternalLinkBlock';
import { sortCrewPriority } from '../../utils/creditHelpers';
import StatusBadge from '../StatusBadge';
import RequestButton from './RequestButton';
import RequestButton from '../RequestButton';
const messages = defineMessages({
releasedate: 'Release Date',
@@ -212,9 +212,14 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
{data.genres.map((g) => g.name).join(', ')}
</span>
</div>
<div className="relative z-10 flex justify-end flex-shrink-0 mt-4 lg:mt-0">
<div className="relative z-10 flex flex-wrap justify-center flex-shrink-0 mt-4 sm:justify-end sm:flex-nowrap lg:mt-0">
{trailerUrl && (
<a href={trailerUrl} target={'_blank'} rel="noreferrer">
<a
href={trailerUrl}
target={'_blank'}
rel="noreferrer"
className="mb-3 sm:mb-0"
>
<Button buttonType="ghost">
<svg
className="w-5 h-5 mr-1"
@@ -240,16 +245,18 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
</Button>
</a>
)}
<RequestButton
mediaType="movie"
media={data.mediaInfo}
tmdbId={data.id}
onUpdate={() => revalidate()}
/>
<div className="mb-3 sm:mb-0">
<RequestButton
mediaType="movie"
media={data.mediaInfo}
tmdbId={data.id}
onUpdate={() => revalidate()}
/>
</div>
{hasPermission(Permission.MANAGE_REQUESTS) && (
<Button
buttonType="default"
className="ml-2 first:ml-0"
className="mb-3 ml-2 first:ml-0 sm:mb-0"
onClick={() => setShowManager(true)}
>
<svg

33
src/components/MovieDetails/RequestButton/index.tsx → src/components/RequestButton/index.tsx
View File

@@ -4,13 +4,13 @@ import { defineMessages, useIntl } from 'react-intl';
import {
MediaRequestStatus,
MediaStatus,
} from '../../../../server/constants/media';
import Media from '../../../../server/entity/Media';
import { MediaRequest } from '../../../../server/entity/MediaRequest';
import { SettingsContext } from '../../../context/SettingsContext';
import { Permission, useUser } from '../../../hooks/useUser';
import ButtonWithDropdown from '../../Common/ButtonWithDropdown';
import RequestModal from '../../RequestModal';
} from '../../../server/constants/media';
import Media from '../../../server/entity/Media';
import { MediaRequest } from '../../../server/entity/MediaRequest';
import { SettingsContext } from '../../context/SettingsContext';
import { Permission, useUser } from '../../hooks/useUser';
import ButtonWithDropdown from '../Common/ButtonWithDropdown';
import RequestModal from '../RequestModal';
const messages = defineMessages({
viewrequest: 'View Request',
@@ -555,25 +555,6 @@ const RequestButton: React.FC<RequestButtonProps> = ({
</ButtonWithDropdown.Item>
))
: null}
{/* {hasPermission(Permission.MANAGE_REQUESTS) && (
<>
<ButtonWithDropdown.Item onClick={() => modifyRequest('approve')}>
<svg
className="w-4 mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
{intl.formatMessage(messages.approve)}
</ButtonWithDropdown.Item>
</>
)} */}
</ButtonWithDropdown>
</>
);

31
src/components/TvDetails/index.tsx
View File

@@ -35,7 +35,7 @@ import ExternalLinkBlock from '../ExternalLinkBlock';
import { sortCrewPriority } from '../../utils/creditHelpers';
import { Crew } from '../../../server/models/common';
import StatusBadge from '../StatusBadge';
import RequestButton from '../MovieDetails/RequestButton';
import RequestButton from '../RequestButton';
const messages = defineMessages({
firstAirDate: 'First Air Date',
@@ -234,9 +234,14 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
{data.genres.map((g) => g.name).join(', ')}
</span>
</div>
<div className="flex justify-end flex-shrink-0 mt-4 lg:mt-0">
<div className="flex flex-wrap justify-center flex-shrink-0 mt-4 sm:flex-nowrap sm:justify-end lg:mt-0">
{trailerUrl && (
<a href={trailerUrl} target="_blank" rel="noreferrer">
<a
href={trailerUrl}
target="_blank"
rel="noreferrer"
className="mb-3 sm:mb-0"
>
<Button buttonType="ghost">
<svg
className="w-5 h-5 mr-1"
@@ -262,18 +267,20 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</Button>
</a>
)}
<RequestButton
mediaType="tv"
onUpdate={() => revalidate()}
tmdbId={data?.id}
media={data?.mediaInfo}
isShowComplete={isComplete}
is4kShowComplete={is4kComplete}
/>
<div className="mb-3 sm:mb-0">
<RequestButton
mediaType="tv"
onUpdate={() => revalidate()}
tmdbId={data?.id}
media={data?.mediaInfo}
isShowComplete={isComplete}
is4kShowComplete={is4kComplete}
/>
</div>
{hasPermission(Permission.MANAGE_REQUESTS) && (
<Button
buttonType="default"
className="ml-2 first:ml-0"
className="mb-3 ml-2 first:ml-0 sm:mb-0"
onClick={() => setShowManager(true)}
>
<svg