apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(frontend): adopt card-style for recent listens

Browse source
This commit is contained in:
Julian Tölle 2020-11-15 02:59:33 +01:00
parent 9896ea31ff
commit 6c8ac2b7a5
1 changed files with 14 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/RecentListens.tsx
View file

@ -43,7 +43,7 @@ export const RecentListens: React.FC = () => {
<ReloadIcon className="w-5 h-5 fill-current" /> <ReloadIcon className="w-5 h-5 fill-current" />
</button> </button>
</div> </div>
<div> <div className="shadow-xl bg-gray-100 rounded p-2 m-2">
{isLoading && ( {isLoading && (
<div> <div>
<span>Loading Listens</span> <span>Loading Listens</span>
@ -54,8 +54,9 @@ export const RecentListens: React.FC = () => {
<p>Could not find any listens!</p> <p>Could not find any listens!</p>
</div> </div>
)} )}
<div>
{recentListens.length > 0 && ( {recentListens.length > 0 && (
<div className="table-auto my-2 w-full text-gray-700"> <div className="table-auto w-full text-gray-700">
{recentListens.map((listen) => ( {recentListens.map((listen) => (
<ListenItem listen={listen} key={listen.id} /> <ListenItem listen={listen} key={listen.id} />
))} ))}
@ -65,6 +66,7 @@ export const RecentListens: React.FC = () => {
<Pagination page={page} totalPages={totalPages} setPage={setPage} /> <Pagination page={page} totalPages={totalPages} setPage={setPage} />
</div> </div>
</div> </div>
</div>
); );
}; };
@ -80,7 +82,7 @@ const Pagination: React.FC<{
const isLastPage = page === totalPages; const isLastPage = page === totalPages;
return ( return (
<div className="flex justify-center"> <div className="flex justify-center my-4">
<button <button
className={`${ className={`${
isFirstPage ? disabledBtn : "hover:bg-gray-400" isFirstPage ? disabledBtn : "hover:bg-gray-400"
@ -133,8 +135,8 @@ const ListenItem: React.FC<{ listen: Listen }> = ({ listen }) => {
}); });
const dateTime = format(new Date(listen.playedAt), "PP p"); const dateTime = format(new Date(listen.playedAt), "PP p");
return ( return (
<div className="hover:bg-gray-100 border-b border-gray-200 md:flex md:justify-around text-gray-700 px-4 py-2"> <div className="hover:bg-gray-100 border-b border-gray-200 md:flex md:justify-around text-gray-700 px-2 py-2">
<div className="md:w-1/3 font-bold">{trackName}</div> <div className="md:w-1/2 font-bold">{trackName}</div>
<div className=" md:w-1/3">{artists}</div> <div className=" md:w-1/3">{artists}</div>
<div <div
className="md:w-1/6 text-gray-500 font-thin text-sm" className="md:w-1/6 text-gray-500 font-thin text-sm"