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): adjust titlecard badge styling

Browse Source 
this commit aligns the badges, removes the border from the availability badge (replaces it with a
light shadow) and also adds a new animation to the titlecard
This commit is contained in:
sct
2021-01-04 15:21:46 +00:00
parent b04eda6c8a
commit effc80977a
2 changed files with 63 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Slider/index.tsx
View File

@@ -207,7 +207,7 @@ const Slider: React.FC<SliderProps> = ({
</button> </button>
</div> </div>
<div <div
className="relative px-2 -ml-4 -mr-4 overflow-x-scroll overflow-y-auto whitespace-nowrap hide-scrollbar overscroll-x-contain" className="relative px-2 py-2 -my-2 -ml-4 -mr-4 overflow-x-scroll overflow-y-auto whitespace-nowrap hide-scrollbar overscroll-x-contain"
ref={containerRef} ref={containerRef}
onScroll={onScroll} onScroll={onScroll}
> >

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

@@ -76,7 +76,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
onCancel={closeModal} onCancel={closeModal}
/> />
<div <div
className="outline-none cursor-default titleCard" className="transition duration-300 transform scale-100 outline-none cursor-default titleCard hover:scale-105 focus:scale-105"
style={{ style={{
backgroundImage: `url(//image.tmdb.org/t/p/w300_and_h450_face${image})`, backgroundImage: `url(//image.tmdb.org/t/p/w300_and_h450_face${image})`,
}} }}
@@ -95,22 +95,23 @@ const TitleCard: React.FC<TitleCardProps> = ({
role="link" role="link"
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">
<div className="absolute left-0 right-0 flex items-center justify-between p-2">
<div <div
className={`absolute left-2 top-2 rounded-md z-40 pointer-events-none ${ className={`rounded-full z-40 pointer-events-none shadow ${
mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600' 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"> <div className="flex items-center h-4 px-2 py-2 text-xs font-normal tracking-wider text-center text-white uppercase sm:h-5">
{mediaType === 'movie' {mediaType === 'movie'
? intl.formatMessage(messages.movie) ? intl.formatMessage(messages.movie)
: intl.formatMessage(messages.tvshow)} : intl.formatMessage(messages.tvshow)}
</div> </div>
</div> </div>
<div className="absolute z-40 pointer-events-none top-2 right-2"> <div className="z-40 pointer-events-none">
{(currentStatus === MediaStatus.AVAILABLE || {(currentStatus === MediaStatus.AVAILABLE ||
currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && ( currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
<div className="flex items-center justify-center w-4 h-4 text-white bg-green-400 border border-green-600 rounded-full sm:w-5 sm:h-5"> <div className="flex items-center justify-center w-4 h-4 text-white bg-green-400 rounded-full shadow sm:w-5 sm:h-5">
<svg <svg
className="w-3 h-3 sm:w-4 sm:h-4" className="w-3 h-3 sm:w-4 sm:h-4"
fill="none" fill="none"
@@ -128,7 +129,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
</div> </div>
)} )}
{currentStatus === MediaStatus.PENDING && ( {currentStatus === MediaStatus.PENDING && (
<div className="flex items-center justify-center w-4 h-4 text-white bg-yellow-500 border border-yellow-600 rounded-full sm:w-5 sm:h-5"> <div className="flex items-center justify-center w-4 h-4 text-white bg-yellow-500 rounded-full shadow sm:w-5 sm:h-5">
<svg <svg
className="w-3 h-3 sm:w-4 sm:h-4" className="w-3 h-3 sm:w-4 sm:h-4"
fill="currentColor" fill="currentColor"
@@ -140,7 +141,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
</div> </div>
)} )}
{currentStatus === MediaStatus.PROCESSING && ( {currentStatus === MediaStatus.PROCESSING && (
<div className="flex items-center justify-center w-4 h-4 text-white bg-indigo-500 border border-indigo-600 rounded-full sm:w-5 sm:h-5"> <div className="flex items-center justify-center w-4 h-4 text-white bg-indigo-500 rounded-full shadow sm:w-5 sm:h-5">
<svg <svg
className="w-3 h-3 sm:w-4 sm:h-4" className="w-3 h-3 sm:w-4 sm:h-4"
fill="currentColor" fill="currentColor"
@@ -156,6 +157,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
</div> </div>
)} )}
</div> </div>
</div>
<Transition <Transition
show={isUpdating} show={isUpdating}
enter="transition ease-in-out duration-300 transform opacity-0" enter="transition ease-in-out duration-300 transform opacity-0"