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(ui): Size cards appropriately based on base font size (#871)

Browse Source
This commit is contained in:
TheCatLady
2021-02-08 01:04:13 -05:00
committed by GitHub
parent 7c0ddad653
commit 282f28f2b9
6 changed files with 20 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Common/ListView/index.tsx
View File

@@ -37,7 +37,7 @@ const ListView: React.FC<ListViewProps> = ({
{intl.formatMessage(messages.noresults)}
</div>
)}
<ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
<ul className="cardList">
{items?.map((title) => {
let titleCard: React.ReactNode;
@@ -90,22 +90,12 @@ const ListView: React.FC<ListViewProps> = ({
break;
}
return (
<li
key={title.id}
className="flex flex-col items-center col-span-1 text-center"
>
{titleCard}
</li>
);
return <li key={title.id}>{titleCard}</li>;
})}
{isLoading &&
!isReachingEnd &&
[...Array(20)].map((_item, i) => (
<li
key={`placeholder-${i}`}
className="flex flex-col items-center col-span-1 text-center"
>
<li key={`placeholder-${i}`}>
<TitleCard.Placeholder canExpand />
</li>
))}

7
src/components/MovieDetails/MovieCast/index.tsx
View File

@@ -45,13 +45,10 @@ const MovieCast: React.FC = () => {
{intl.formatMessage(messages.fullcast)}
</Header>
</div>
<ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
<ul className="cardList">
{data?.credits.cast.map((person, index) => {
return (
<li
key={`cast-${person.id}-${index}`}
className="flex flex-col items-center col-span-1 text-center"
>
<li key={`cast-${person.id}-${index}`}>
<PersonCard
name={person.name}
personId={person.id}

7
src/components/MovieDetails/MovieCrew/index.tsx
View File

@@ -45,13 +45,10 @@ const MovieCrew: React.FC = () => {
{intl.formatMessage(messages.fullcrew)}
</Header>
</div>
<ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
<ul className="cardList">
{data?.credits.crew.map((person, index) => {
return (
<li
key={`crew-${person.id}-${index}`}
className="flex flex-col items-center col-span-1 text-center"
>
<li key={`crew-${person.id}-${index}`}>
<PersonCard
name={person.name}
personId={person.id}

7
src/components/TvDetails/TvCast/index.tsx
View File

@@ -47,13 +47,10 @@ const TvCast: React.FC = () => {
{intl.formatMessage(messages.fullseriescast)}
</Header>
</div>
<ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
<ul className="cardList">
{data?.credits.cast.map((person) => {
return (
<li
key={person.id}
className="flex flex-col items-center col-span-1 text-center"
>
<li key={person.id}>
<PersonCard
name={person.name}
personId={person.id}

7
src/components/TvDetails/TvCrew/index.tsx
View File

@@ -47,13 +47,10 @@ const TvCrew: React.FC = () => {
{intl.formatMessage(messages.fullseriescrew)}
</Header>
</div>
<ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
<ul className="cardList">
{data?.credits.crew.map((person, index) => {
return (
<li
key={`crew-${person.id}-${index}`}
className="flex flex-col items-center col-span-1 text-center"
>
<li key={`crew-${person.id}-${index}`}>
<PersonCard
name={person.name}
personId={person.id}

9
src/styles/globals.css
View File

@@ -15,6 +15,15 @@ body {
background: #f19a30;
}
ul.cardList {
@apply grid gap-4;
grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
}
ul.cardList > li {
@apply flex flex-col items-center col-span-1 text-center;
}
.titleCard {
@apply relative bg-gray-800 bg-cover rounded-lg;
padding-bottom: 150%;