responsive design
This commit is contained in:
3zachm
parent
0a9287ab4f
commit
7d3b0d2554
3 changed files with 73 additions and 60 deletions
|
|
@ -25,6 +25,7 @@ function DashLayout(props: DashLayoutProps) {
|
||||||
variants={containerVariants}
|
variants={containerVariants}
|
||||||
>
|
>
|
||||||
<Head>
|
<Head>
|
||||||
|
<meta name="viewport" content="initial-scale=0.8" />
|
||||||
<title>Dashboard - toffee</title>
|
<title>Dashboard - toffee</title>
|
||||||
<meta name="description" content="Dashboard statistics for toffee" />
|
<meta name="description" content="Dashboard statistics for toffee" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import RedisInstance from "ioredis";
|
import type RedisInstance from "ioredis";
|
||||||
|
|
||||||
async function applyCache(
|
async function applyCache(
|
||||||
redis: RedisInstance,
|
redis: RedisInstance,
|
||||||
|
|
|
||||||
|
|
@ -89,7 +89,7 @@ function UserPage() {
|
||||||
/>
|
/>
|
||||||
</Head>
|
</Head>
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<div className="mt-2 inline-grid w-[calc(100%-40px)] max-w-5xl grid-cols-10 gap-3 pt-12 pl-2 font-plusJakarta lg:pl-0 lg:pr-2">
|
<div className="mt-7 inline-grid w-[calc(100%-40px)] max-w-5xl grid-cols-10 gap-3 pl-2 font-plusJakarta lg:mt-12 lg:pl-0 lg:pr-2">
|
||||||
{/* User "banner" */}
|
{/* User "banner" */}
|
||||||
<div className="col-span-10 mb-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3">
|
<div className="col-span-10 mb-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3">
|
||||||
<div className="flex items-center justify-between p-4">
|
<div className="flex items-center justify-between p-4">
|
||||||
|
|
@ -144,7 +144,7 @@ function UserPage() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="hidden md:block">
|
||||||
<h1>
|
<h1>
|
||||||
<span className="text-4xl font-semibold text-zinc-400">
|
<span className="text-4xl font-semibold text-zinc-400">
|
||||||
$
|
$
|
||||||
|
|
@ -157,12 +157,12 @@ function UserPage() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Main Container */}
|
{/* Main Container */}
|
||||||
<div className="col-span-7 inline-grid grid-cols-7 gap-3 rounded-2xl">
|
<div className="col-span-10 inline-grid grid-cols-7 gap-3 rounded-2xl lg:col-span-7">
|
||||||
{/* User's Rank/Graph */}
|
{/* User's Rank/Graph */}
|
||||||
<div className="col-span-7 rounded-2xl bg-zinc-800 bg-opacity-70">
|
<div className="col-span-7 rounded-2xl bg-zinc-800 bg-opacity-70">
|
||||||
<div className="flex flex-row items-center justify-between p-5">
|
<div className="flex flex-row items-center justify-between p-5">
|
||||||
<div className="flex-col">
|
<div className="flex-col px-2">
|
||||||
<h1 className="mb-1 text-center text-2xl font-medium text-white underline">
|
<h1 className="mb-1 whitespace-nowrap text-center text-xl font-medium text-white underline">
|
||||||
Global Rank
|
Global Rank
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex items-center text-3xl font-bold">
|
<div className="flex items-center text-3xl font-bold">
|
||||||
|
|
@ -172,7 +172,7 @@ function UserPage() {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="hidden md:block">
|
||||||
<Image
|
<Image
|
||||||
src="/img/well_drawn_rank_chart.webp"
|
src="/img/well_drawn_rank_chart.webp"
|
||||||
alt="Rank chart"
|
alt="Rank chart"
|
||||||
|
|
@ -180,6 +180,16 @@ function UserPage() {
|
||||||
height={100}
|
height={100}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="md:hidden">
|
||||||
|
<h1>
|
||||||
|
<span className="text-3xl font-semibold text-zinc-400 sm:text-4xl">
|
||||||
|
$
|
||||||
|
</span>
|
||||||
|
<span className="text-3xl text-white sm:text-4xl">
|
||||||
|
{userData.net_worth.toLocaleString("en-US")}
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* User's Assets */}
|
{/* User's Assets */}
|
||||||
|
|
@ -191,7 +201,7 @@ function UserPage() {
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
{/* User's Assets Body */}
|
{/* User's Assets Body */}
|
||||||
<div className="inline-grid grid-cols-4 items-center justify-start p-5">
|
<div className="inline-grid grid-cols-2 items-center justify-start gap-2 p-5 sm:grid-cols-3 xl:grid-cols-4">
|
||||||
{errorCode === 20000 ? (
|
{errorCode === 20000 ? (
|
||||||
<h1 className=" text-zinc-400">{`Could not load assets`}</h1>
|
<h1 className=" text-zinc-400">{`Could not load assets`}</h1>
|
||||||
) : (
|
) : (
|
||||||
|
|
@ -202,60 +212,62 @@ function UserPage() {
|
||||||
provider: string;
|
provider: string;
|
||||||
}) => (
|
}) => (
|
||||||
<div
|
<div
|
||||||
className="m-2 mb-0 flex h-44 w-40 flex-col items-center rounded-xl bg-zinc-900 bg-opacity-80 p-2"
|
className="flex items-center justify-center"
|
||||||
key={asset.name}
|
key={asset.name}
|
||||||
>
|
>
|
||||||
<div className="mt-2 mb-2 h-24 w-24">
|
<div className="flex h-44 w-full max-w-[256px] flex-col items-center rounded-xl bg-zinc-900 bg-opacity-80 p-2">
|
||||||
<div className="flex h-full w-full items-center justify-center p-2">
|
<div className="mt-2 mb-2 h-24 w-24">
|
||||||
{
|
<div className="flex h-full w-full items-center justify-center p-2">
|
||||||
// if error code is 10000, show placeholder image
|
{
|
||||||
errorCode === 10000 ? (
|
// if error code is 10000, show placeholder image
|
||||||
<h1 className="text-center text-zinc-400">{`404 :(`}</h1>
|
errorCode === 10000 ? (
|
||||||
) : (
|
<h1 className="text-center text-zinc-400">{`404 :(`}</h1>
|
||||||
<Image
|
) : (
|
||||||
src={channelEmotes[asset.name]}
|
<Image
|
||||||
alt={asset.name}
|
src={channelEmotes[asset.name]}
|
||||||
width={100}
|
alt={asset.name}
|
||||||
height={100}
|
width={100}
|
||||||
className="max-h-[100px]"
|
height={100}
|
||||||
/>
|
className="max-h-[100px]"
|
||||||
)
|
/>
|
||||||
}
|
)
|
||||||
{/* Fix asset count to bottom right of image */}
|
}
|
||||||
<div className="relative rounded-full bg-zinc-900 bg-opacity-80 p-1">
|
{/* Fix asset count to bottom right of image */}
|
||||||
<p
|
<div className="relative rounded-full bg-zinc-900 bg-opacity-80 p-1">
|
||||||
className="absolute -bottom-10 -right-2 -rotate-12 text-lg font-bold text-white"
|
<p
|
||||||
style={{ textShadow: "0px 0px 4px black" }}
|
className="absolute -bottom-10 -right-2 -rotate-12 text-lg font-bold text-white"
|
||||||
>
|
style={{ textShadow: "0px 0px 4px black" }}
|
||||||
x{asset.count}
|
>
|
||||||
</p>
|
x{asset.count}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="flex w-full flex-row items-center justify-center">
|
||||||
<div className="flex w-full flex-row items-center justify-center">
|
{
|
||||||
{
|
// show provider logo (7tv, bttv, ffz, twitch)
|
||||||
// show provider logo (7tv, bttv, ffz, twitch)
|
asset.provider === "7tv" ? (
|
||||||
asset.provider === "7tv" ? (
|
<div className="mr-1 pt-[1px] text-7tv ">
|
||||||
<div className="mr-1 pt-[1px] text-7tv ">
|
<SevenTVLogo />
|
||||||
<SevenTVLogo />
|
</div>
|
||||||
</div>
|
) : asset.provider === "bttv" ? (
|
||||||
) : asset.provider === "bttv" ? (
|
<div className="mr-1 pt-[1px] text-bttv">
|
||||||
<div className="mr-1 pt-[1px] text-bttv">
|
<BTTVLogo />
|
||||||
<BTTVLogo />
|
</div>
|
||||||
</div>
|
) : asset.provider === "ffz" ? (
|
||||||
) : asset.provider === "ffz" ? (
|
<div className="h-5 w-6 text-white">
|
||||||
<div className="h-5 w-6 text-white">
|
<FFZLogo />
|
||||||
<FFZLogo />
|
</div>
|
||||||
</div>
|
) : (
|
||||||
) : (
|
<div className="mr-1 w-4 pt-[1px] text-ttv">
|
||||||
<div className="mr-1 w-4 pt-[1px] text-ttv">
|
<TwitchLogo />
|
||||||
<TwitchLogo />
|
</div>
|
||||||
</div>
|
)
|
||||||
)
|
}
|
||||||
}
|
<p className="text-md max-w-[80%] overflow-hidden overflow-ellipsis whitespace-nowrap font-bold text-white">
|
||||||
<p className="text-md max-w-[80%] overflow-hidden overflow-ellipsis whitespace-nowrap font-bold text-white">
|
{asset.name}
|
||||||
{asset.name}
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
@ -265,8 +277,8 @@ function UserPage() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
<div className="col-span-3 flex flex-col">
|
<div className="col-span-10 flex flex-col justify-start md:flex-row lg:col-span-3 lg:flex-col">
|
||||||
<div className="center mb-3 inline-grid grid-cols-2 gap-3 rounded-2xl bg-zinc-800 bg-opacity-70 p-5 text-xl font-medium">
|
<div className="center mb-3 mr-3 inline-grid grid-cols-2 gap-3 rounded-2xl bg-zinc-800 bg-opacity-70 p-5 text-xl font-medium lg:mr-0">
|
||||||
{/* User's Stats, left side is label, right side is value */}
|
{/* User's Stats, left side is label, right side is value */}
|
||||||
<h1>Points</h1>
|
<h1>Points</h1>
|
||||||
<h1>{userData.points.toLocaleString("en-US")}</h1>
|
<h1>{userData.points.toLocaleString("en-US")}</h1>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue