BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

responsive design

Browse source
This commit is contained in:
3zachm 2023-01-20 18:24:31 -08:00
parent 0a9287ab4f
commit 7d3b0d2554
3 changed files with 73 additions and 60 deletions
layouts
DashLayout.tsx
misc
7TVAPI.tsx
pages/user/[username]
index.tsx

1
layouts/DashLayout.tsx
View file

@ -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" />

2
misc/7TVAPI.tsx
View file

@ -1,4 +1,4 @@
import RedisInstance from "ioredis"; import type RedisInstance from "ioredis";
async function applyCache( async function applyCache(
redis: RedisInstance, redis: RedisInstance,

32
pages/user/[username]/index.tsx
View file

@ -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,9 +212,10 @@ 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="flex h-44 w-full max-w-[256px] flex-col items-center rounded-xl bg-zinc-900 bg-opacity-80 p-2">
<div className="mt-2 mb-2 h-24 w-24"> <div className="mt-2 mb-2 h-24 w-24">
<div className="flex h-full w-full items-center justify-center p-2"> <div className="flex h-full w-full items-center justify-center p-2">
{ {
@ -258,6 +269,7 @@ function UserPage() {
</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>