Skip to content
This repository has been archived by the owner on Jul 14, 2024. It is now read-only.

Commit

Permalink
redesign: Redesign schedules page (#112)
Browse files Browse the repository at this point in the history 
* Remove trailing commas

* Polish schedules page & Remove unneeded styles

* Add scroll animations

* Add scrolling animation to time view

* Refactor schedule page layout and styling

---------

Co-authored-by: Factiven <[email protected]>
  • Loading branch information
@Artrix9095 @DevanAbinaya
Artrix9095 and DevanAbinaya authored Jan 13, 2024
1 parent e9aea5f commit b44b8dc
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 25 deletions.
3 changes: 2 additions & 1 deletion .prettierrc.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"bracketSpacing": true,
"printWidth": 80
"printWidth": 80,
"trailingComma": "none"
}
77 changes: 53 additions & 24 deletions pages/en/schedule/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// @ts-nocheck

import Image from "next/image";
import { cubicBezier, motion } from "framer-motion";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { CalendarIcon } from "@heroicons/react/24/solid";
Expand All @@ -11,7 +12,7 @@ import {
filterFormattedSchedule,
filterScheduleByDay,
sortScheduleByDay,
transformSchedule,
transformSchedule
} from "@/utils/schedulesUtils";

import { scheduleQuery } from "@/lib/graphql/query";
Expand All @@ -28,7 +29,7 @@ const day = [
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Saturday"
];

const isAired = (timestamp: number | null) => {
Expand Down Expand Up @@ -68,9 +69,9 @@ export async function getServerSideProps() {

return {
props: {
schedule: scheduleByDay,
schedule: scheduleByDay
// today: todaySchedule,
},
}
};
} else {
now.setHours(0, 0, 0, 0); // Set the time to 00:00:00.000
Expand All @@ -88,16 +89,16 @@ export async function getServerSideProps() {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Accept: "application/json"
},
body: JSON.stringify({
query: scheduleQuery,
variables: {
weekStart,
weekEnd,
page,
},
}),
page
}
})
});

const json = await res.json();
Expand All @@ -113,7 +114,7 @@ export async function getServerSideProps() {

const timestampToDay = (timestamp: number) => {
return new Date(timestamp * 1000).toLocaleDateString(undefined, {
weekday: "long",
weekday: "long"
});
};

Expand All @@ -137,9 +138,9 @@ export async function getServerSideProps() {

return {
props: {
schedule: scheduleByDay,
schedule: scheduleByDay
// today: todaySchedule,
},
}
};
}
// setSchedule(scheduleByDay);
Expand Down Expand Up @@ -267,11 +268,11 @@ export default function Schedule({ schedule }: any) {
<MobileNav hideProfile={true} />
<Navbar scrollP={10} toTop={true} />
<div className="w-screen">
<span className="absolute z-20 top-0 left-0 w-screen h-[190px] lg:h-[250px] bg-secondary overflow-hidden">
<div className="absolute top-40 lg:top-36 w-full h-full bg-primary rounded-t-3xl xl:rounded-t-[50px]" />
</span>
<div className="flex flex-col mx-auto my-10 w-full mt-16 lg:mt-24 max-w-screen-2xl gap-5 md:gap-10 z-30">
<div className="flex flex-col lg:flex-row gap-2 justify-between z-20 px-3">
{/* <span className="absolute w-screen h-[190px] lg:h-[250px] bg-white overflow-hidden">
<div className="w-full h-full bg-white rounded" />
</span> */}
<div className="flex flex-col mx-auto my-10 w-full mt-16 lg:mt-24 max-w-screen-2xl gap-10">
<div className="flex flex-col lg:flex-row gap-2 justify-between px-5">
<ul
ref={scrollContainerRef}
className="flex overflow-x-scroll cust-scroll items-center gap-5 font-karla text-2xl font-semibold"
Expand Down Expand Up @@ -327,13 +328,27 @@ export default function Schedule({ schedule }: any) {
<div
key={`section_${day}`}
// id={`same_${day}`}
className="flex flex-col gap-5 z-50 px-3"
className="grid gap-5 px-5"
>
<h2 className="font-bold font-outfit text-white text-2xl z-[250]">
<h2 className="font-bold font-outfit text-white text-2xl">
{day}
</h2>
{Object.entries(timeSlots).map(([time, animeList]) => (
<div
<motion.div
initial={{
y: 30,
opacity: 0
}}
whileInView={{
y: 0,
opacity: 1
}}
transition={{
duration: 0.5,
delay: 0.2,

ease: cubicBezier(0.35, 0.17, 0.3, 0.86)
}}
key={time}
// id={`same_${time}`}
className="relative space-y-2"
Expand All @@ -358,7 +373,7 @@ export default function Schedule({ schedule }: any) {
key={m.id}
// id={`same_${m.id}`}
href={`/en/${m.type.toLowerCase()}/${m.id}`}
className={`flex bg-secondary rounded group cursor-pointer overflow-hidden ml-4 z-50`}
className={`flex bg-secondary rounded group cursor-pointer overflow-hidden ml-4`}
>
<Image
src={m.coverImage.extraLarge}
Expand Down Expand Up @@ -387,7 +402,7 @@ export default function Schedule({ schedule }: any) {
);
})}
</div>
</div>
</motion.div>
))}
</div>
))
Expand All @@ -402,15 +417,29 @@ export default function Schedule({ schedule }: any) {
<div
key={`section2_${day}`}
// id={`same_${day}`}
className="flex flex-col gap-5 px-3 z-50"
className="flex flex-col gap-5 px-5 lg:px-10"
>
<h2
// id={day}
className="font-bold font-outfit text-white text-2xl"
>
{day}
</h2>
<div className="w-full grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 md:gap-7 grid-flow-row">
<motion.div
initial={{
y: 30,
opacity: 0
}}
whileInView={{
y: 0,
opacity: 1
}}
transition={{
duration: 0.5,
ease: cubicBezier(0.35, 0.17, 0.3, 0.86)
}}
className="w-full grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-5 sm:gap-4 grid-flow-row"
>
{schedules.map((s) => {
const m = s.media;

Expand Down Expand Up @@ -470,7 +499,7 @@ export default function Schedule({ schedule }: any) {
</Link>
);
})}
</div>
</motion.div>
</div>
)
)
Expand Down

0 comments on commit b44b8dc

Please sign in to comment.