xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

visual changes improvements

This commit is contained in:
Daniel 2023-05-15 21:59:51 +03:30
parent 5e27c971ff
commit 9b064bbb1e
7 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/CollectionCard.tsx
View File

@ -21,7 +21,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
<Link href={`/collections/${collection.id}`}> <Link href={`/collections/${collection.id}`}>
<div className="p-5 bg-gray-100 min-h-[10rem] w-72 rounded-md border-sky-100 border-solid border flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100"> <div className="p-5 bg-gray-100 min-h-[10rem] w-72 rounded-md border-sky-100 border-solid border flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
<div> <div>
<div className="flex justify-between text-sky-900 items-center"> <div className="flex justify-between text-sky-600 items-center">
<p className="text-lg w-max font-bold">{collection.name}</p> <p className="text-lg w-max font-bold">{collection.name}</p>
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronRight} icon={faChevronRight}

6
components/Dashboard/CollectionItem.tsx
View File

@ -18,10 +18,10 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
}); });
return ( return (
<Link href={`/collections/${collection.id}`}> <Link href={`/collections/${collection.id}`} className="bg-white">
<div className="p-5 bg-white rounded-md flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100"> <div className="p-5 rounded-md flex border border-sky-100 flex-col gap-2 justify-between cursor-pointer hover:opacity-60 duration-100">
<div> <div>
<div className="flex justify-between text-sky-900 items-center"> <div className="flex justify-between text-sky-600 items-center">
<div className="flex items-baseline gap-1"> <div className="flex items-baseline gap-1">
<p className="text-lg w-max font-bold">{collection.name}</p> <p className="text-lg w-max font-bold">{collection.name}</p>
<p className="text-sky-400">{collection.description}</p> <p className="text-sky-400">{collection.description}</p>

6
components/Dashboard/LinkItem.tsx
View File

@ -21,8 +21,6 @@ export default function ({
link: ExtendedLink; link: ExtendedLink;
count: number; count: number;
}) { }) {
const [editModal, setEditModal] = useState(false);
const url = new URL(link.url); const url = new URL(link.url);
const formattedDate = new Date(link.createdAt).toLocaleString("en-US", { const formattedDate = new Date(link.createdAt).toLocaleString("en-US", {
year: "numeric", year: "numeric",
@ -31,7 +29,7 @@ export default function ({
}); });
return ( return (
<div className="bg-white p-5 rounded-md flex items-start relative gap-5 sm:gap-14 group/item"> <div className="bg-white p-5 rounded-md flex items-start border border-sky-100 relative gap-5 lg:gap-10 group/item">
<Image <Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`} src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={32} width={32}
@ -49,7 +47,7 @@ export default function ({
width={80} width={80}
height={80} height={80}
alt="" alt=""
className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block" className="blur-sm absolute left-2 opacity-40 select-none hidden lg:block"
draggable="false" draggable="false"
onError={(e) => { onError={(e) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;

6
components/Sidebar/index.tsx
View File

@ -18,7 +18,7 @@ import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function () { export default function ({ className }: { className?: string }) {
const { collections } = useCollectionStore(); const { collections } = useCollectionStore();
const { tags } = useTagStore(); const { tags } = useTagStore();
@ -31,7 +31,9 @@ export default function () {
}, [router]); }, [router]);
return ( return (
<div className="bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20"> <div
className={`bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`}
>
<p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4"> <p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4">
Linkwarden Linkwarden
</p> </p>

6
layouts/MainLayout.tsx
View File

@ -24,11 +24,11 @@ export default function ({ children }: Props) {
if (status === "authenticated" && !redirect && routeExists) if (status === "authenticated" && !redirect && routeExists)
return ( return (
<div className="flex"> <div className="flex">
<div className="hidden lgblock"> <div className="hidden lg:block">
<Sidebar /> <Sidebar className="fixed" />
</div> </div>
<div className="w-full"> <div className="w-full lg:ml-64 xl:ml-80">
<Navbar /> <Navbar />
{children} {children}
</div> </div>

5
lib/api/controllers/tags/getTags.ts
View File

@ -39,6 +39,11 @@ export default async function (userId: number) {
], ],
}, },
}, },
orderBy: {
links: {
_count: "desc",
},
},
}); });
return { response: tags, status: 200 }; return { response: tags, status: 200 };

36
pages/dashboard.tsx
View File

@ -67,12 +67,12 @@ export default function () {
</div> </div>
</div> </div>
<div className="flex flex-col md:flex-row items-start justify-evenly gap-5"> <div className="flex flex-col 2xl:flex-row items-start justify-evenly gap-5">
<div className="flex flex-col gap-2 p-2 bg-sky-50 rounded-md w-full"> <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
<div className="flex justify-between gap-2 items-baseline"> <div className="flex justify-between gap-2 items-baseline">
<p className="text-sky-600 text-xl mb-2">Recently added Links</p> <p className="text-sky-600 text-xl mb-2">Recently added Links</p>
<Link href="/links"> <Link href="/links">
<div className="text-sky-600 flex items-center gap-1"> <div className="text-sky-600 flex items-center gap-1 hover:border-b-sky-500 duration-100 hover:border-b">
View All View All
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowRight} icon={faArrowRight}
@ -93,11 +93,11 @@ export default function () {
))} ))}
</div> </div>
<div className="flex flex-col gap-2 p-2 bg-sky-50 rounded-md w-full"> <div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
<div className="flex justify-between gap-2 items-baseline"> <div className="flex justify-between gap-2 items-baseline">
<p className="text-sky-600 text-xl mb-2">Top Collections</p> <p className="text-sky-600 text-xl mb-2">Top Collections</p>
<Link href="/collections"> <Link href="/collections">
<div className="text-sky-600 flex items-center gap-1"> <div className="text-sky-600 flex items-center gap-1 hover:border-b-sky-500 duration-100 hover:border-b">
View All View All
<FontAwesomeIcon <FontAwesomeIcon
icon={faArrowRight} icon={faArrowRight}
@ -110,6 +110,32 @@ export default function () {
<CollectionItem key={i} collection={e} /> <CollectionItem key={i} collection={e} />
))} ))}
</div> </div>
<div className="flex flex-col gap-2 p-2 bg-gray-100 border border-sky-100 rounded-md w-full">
<div className="flex justify-between gap-2 items-baseline">
<p className="text-sky-600 text-xl mb-2">Top Tags</p>
<Link href="/collections">
<div className="text-sky-600 flex items-center gap-1 hover:border-b-sky-500 duration-100 hover:border-b">
View All
<FontAwesomeIcon
icon={faArrowRight}
className="w-4 h-4 text-sky-300"
/>
</div>
</Link>
</div>
<div className="flex gap-2 flex-wrap">
{tags.slice(0, 19).map((e, i) => (
<Link
href={`/tags/${e.id}`}
key={i}
className="px-2 py-1 bg-sky-200 rounded-full hover:bg-sky-100 duration-100 text-sky-700"
>
# {e.name}
</Link>
))}
</div>
</div>
</div> </div>
</div> </div>
</MainLayout> </MainLayout>