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

sct · Jan 12, 2021 · d9e0c90 · d9e0c90
1 parent a740b07
commit d9e0c90
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 49 deletions.
diff --git a/src/components/Common/ButtonWithDropdown/index.tsx b/src/components/Common/ButtonWithDropdown/index.tsx
@@ -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)}
           >

diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
@@ -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

diff --git a/...ents/MovieDetails/RequestButton/index.tsx → src/components/RequestButton/index.tsx b/...ents/MovieDetails/RequestButton/index.tsx → src/components/RequestButton/index.tsx
@@ -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>
     </>
   );

diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
@@ -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