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

refactor(frontend): titlecard design experiment

Browse Source
This commit is contained in:
sct
2021-01-02 14:06:41 +00:00
parent 8c0903393c
commit 78b15cad18
1 changed files with 52 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/TitleCard/index.tsx
View File

@@ -1,8 +1,5 @@
import React, { useState, useCallback, useEffect } from 'react'; import React, { useState, useCallback, useEffect } from 'react';
import type { MediaType } from '../../../server/models/Search'; import type { MediaType } from '../../../server/models/Search';
import Available from '../../assets/available.svg';
import Requested from '../../assets/requested.svg';
import Unavailable from '../../assets/unavailable.svg';
import { withProperties } from '../../utils/typeHelpers'; import { withProperties } from '../../utils/typeHelpers';
import Transition from '../Transition'; import Transition from '../Transition';
import Placeholder from './Placeholder'; import Placeholder from './Placeholder';
@@ -98,33 +95,53 @@ const TitleCard: React.FC<TitleCardProps> = ({
tabIndex={0} tabIndex={0}
> >
<div className="absolute top-0 bottom-0 left-0 right-0 w-full h-full overflow-hidden shadow-xl"> <div className="absolute top-0 bottom-0 left-0 right-0 w-full h-full overflow-hidden shadow-xl">
<div <div className="absolute z-40 top-2 right-2">
className={`absolute left-0 top-0 rounded-tl-md rounded-br-md z-40 ${
mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
}`}
>
<div className="flex items-center h-4 px-2 py-1 text-xs font-normal text-center text-white uppercase">
{mediaType === 'movie'
? intl.formatMessage(messages.movie)
: intl.formatMessage(messages.tvshow)}
</div>
</div>
<div
className="absolute top-0 right-0 z-40"
style={{
right: '-1px',
}}
>
{(currentStatus === MediaStatus.AVAILABLE || {(currentStatus === MediaStatus.AVAILABLE ||
currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && ( currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
<Available className="rounded-tr-md" /> <div className="flex items-center justify-center w-4 h-4 text-white bg-green-400 border border-green-600 rounded-full">
<svg
className="w-3 h-3"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
</div>
)} )}
{currentStatus === MediaStatus.PENDING && ( {currentStatus === MediaStatus.PENDING && (
<Requested className="rounded-tr-md" /> <div className="flex items-center justify-center w-4 h-4 text-white bg-yellow-500 border border-yellow-600 rounded-full">
<svg
className="w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
</div>
)} )}
{currentStatus === MediaStatus.PROCESSING && ( {currentStatus === MediaStatus.PROCESSING && (
<Unavailable className="rounded-tr-md" /> <div className="flex items-center justify-center w-4 h-4 text-white bg-indigo-500 border border-indigo-600 rounded-full">
<svg
className="w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
clipRule="evenodd"
/>
</svg>
</div>
)} )}
</div> </div>
<Transition <Transition
@@ -164,6 +181,17 @@ const TitleCard: React.FC<TitleCardProps> = ({
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="absolute top-0 bottom-0 left-0 right-0"> <div className="absolute top-0 bottom-0 left-0 right-0">
<div
className={`absolute left-2 top-2 rounded-md z-40 ${
mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
}`}
>
<div className="flex items-center h-4 px-1 py-2 text-xs font-normal tracking-wider text-center text-white uppercase">
{mediaType === 'movie'
? intl.formatMessage(messages.movie)
: intl.formatMessage(messages.tvshow)}
</div>
</div>
<Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}> <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
<a <a
className="absolute top-0 bottom-0 left-0 right-0 w-full h-full overflow-hidden text-left rounded-lg cursor-pointer" className="absolute top-0 bottom-0 left-0 right-0 w-full h-full overflow-hidden text-left rounded-lg cursor-pointer"