devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made some of the code a bit more responsive

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-18 12:12:26 +01:00
parent 13c8fae588
commit d61592b73e
10 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/index.tsx
View File

@@ -15,6 +15,7 @@ import JSON_RESULTS from "@/demo/user_results.json";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {User} from "@/interfaces/user";
import {useEffect, useState} from "react";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -36,6 +37,10 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
}, sessionOptions);
export default function Home({user}: {user: User}) {
const [showEndExam, setShowEndExam] = useState(false);
useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
return (
<>
<Head>
@@ -47,20 +52,14 @@ export default function Home({user}: {user: User}) {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-screen flex flex-col items-center bg-neutral-100">
<Navbar profilePicture={user.profilePicture} />
<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100">
<Navbar profilePicture={user.profilePicture} showExamEnd={showEndExam} />
<div className="w-full h-full p-4 relative">
<Link href="/exam">
<button className={clsx("btn gap-2 top-12 right-12 absolute", infoButtonStyle)}>
<Icon path={mdiPlus} color="white" size={1} />
New Exam
</button>
</Link>
<section className="h-full w-full flex items-center p-8 gap-12 justify-center">
<section className="w-1/2 h-full flex items-center">
<section className="h-full w-full flex flex-col lg:flex-row gap-12 justify-center items-center md:items-start">
<section className="w-full lg:w-1/2 h-full flex items-center">
<ProfileCard user={user} className="text-black self-start" />
</section>
<section className="w-1/2 h-full flex items-center justify-center">
<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
<UserResultChart results={JSON_RESULTS} resultKey="total" label="Total exams" className="w-2/3" />
</section>
</section>