From cd66550eed0c9f56fa225088e07922c66e3d62d0 Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Wed, 20 Mar 2024 01:36:25 +0800 Subject: [PATCH] Fix overscroll behavior and update carousel layout --- src/pages/home/AnnouncementsCard.css | 57 +++++++++++++----------- src/pages/home/AnnouncementsCard.tsx | 33 +++++++------- src/pages/home/Carousel.css | 43 ++++++++++-------- src/pages/home/Carousel.tsx | 65 +++++++++++++++------------- src/pages/home/announcements.json | 32 +++++++------- src/pages/home/index.css | 18 +++++--- src/pages/home/index.tsx | 12 ++--- tailwind.config.js | 2 +- vite.config.js | 21 +++++---- 9 files changed, 153 insertions(+), 130 deletions(-) diff --git a/src/pages/home/AnnouncementsCard.css b/src/pages/home/AnnouncementsCard.css index d952999..9b4628d 100644 --- a/src/pages/home/AnnouncementsCard.css +++ b/src/pages/home/AnnouncementsCard.css @@ -1,35 +1,40 @@ -.container { +.announcement-container { @apply flex - flex-row - max-w-full - h-[30vh] - lg:h-[30vh] + flex-col + lg:flex-row + h-[20rem] + lg:h-[16rem] + w-full + lg:w-[24rem] + xl:w-[28rem] items-center - justify-center - md:justify-around - px-2 - md:gap-2 - ; + justify-start + lg:justify-around + px-4 } -.container>img { +.announcement-container>img { @apply - object-cover - p-4 - w-32 - md:w-48 - max-h-[30vh] - rounded-3xl + object-cover + p-4 + max-h-40 + min-w-40 + lg:max-h-44 + lg:min-w-44 + rounded-3xl ; } .text-container { @apply - flex - flex-col - lg:p-4 - max-h-full + flex + flex-col + h-fit + max-w-48 + lg:max-w-[16rem] + p-2 + lg:pr-4 ; } @@ -37,7 +42,7 @@ @apply font-bold text-sm - md:text-xl + lg:text-xl ; } @@ -45,8 +50,8 @@ @apply font-subheading text-xs - md:text-sm - pb-4 + lg:text-sm + pb-2 ; } @@ -55,7 +60,7 @@ line-clamp-2 font-body text-xs - md:text-sm + lg:text-sm ; } @@ -66,7 +71,7 @@ font-subheading p-2 text-xs - md:text-base + lg:text-base ; } diff --git a/src/pages/home/AnnouncementsCard.tsx b/src/pages/home/AnnouncementsCard.tsx index c32448d..4d45867 100644 --- a/src/pages/home/AnnouncementsCard.tsx +++ b/src/pages/home/AnnouncementsCard.tsx @@ -11,22 +11,23 @@ interface AnnouncementsCardProps { link: string; } -export default function AnnouncementsCard(props: AnnouncementsCardProps) { - const content = ( -
- -
-

{props.title}

-

{props.date}

-

{props.desc}

-

- Read More -

-
-
- ); - +function AnnouncementsCard(props: AnnouncementsCardProps) { return ( - + + +
+

{props.title}

+

{props.date}

+

{props.desc}

+

+ Read More +

+
+ + }> ); } + +export default AnnouncementsCard; diff --git a/src/pages/home/Carousel.css b/src/pages/home/Carousel.css index 9347122..d6ff037 100644 --- a/src/pages/home/Carousel.css +++ b/src/pages/home/Carousel.css @@ -1,8 +1,14 @@ .item { - @apply - p-8 - md:p-14 - ; + @apply + py-8 + lg:py-12 + ; +} + +.item>.window { + @apply + m-auto + ; } .slick-arrow.slick-next, @@ -11,29 +17,30 @@ flex justify-center items-center - h-24 - w-24 + h-20 + w-20 z-10 - max-w-full ; } .slick-prev::before,.slick-next::before{ - display:none; + @apply + hidden + ; } .arrows { - @apply - h-80 - w-80 - text-primary - opacity-60 - z-10 - ; + @apply + h-80 + w-80 + text-primary + opacity-60 + z-10 + ; } .arrows:hover { - @apply - opacity-100 - ; + @apply + opacity-100 + ; } diff --git a/src/pages/home/Carousel.tsx b/src/pages/home/Carousel.tsx index a1d28df..502ed27 100644 --- a/src/pages/home/Carousel.tsx +++ b/src/pages/home/Carousel.tsx @@ -1,13 +1,14 @@ import React from 'react'; -import Slider from 'react-slick'; -import AnnouncementsCard from './AnnouncementsCard'; -import './Carousel.css'; import { GoChevronLeft, GoChevronRight } from 'react-icons/go'; +import Slider, { CustomArrowProps, Settings } from 'react-slick'; +import resolveConfig from 'tailwindcss/resolveConfig'; +import tailwindConfig from '../../../tailwind.config.js'; +import AnnouncementsCard from './AnnouncementsCard'; import announcements from './announcements.json' with {type: 'json'}; +import './Carousel.css'; - -function NextArrow(props) { - const { className, style, onClick } = props; +function NextArrow(props: CustomArrowProps) { + const { className, onClick } = props; return (
-
+ + ); } - -export default function Carousel() { - const settings = { +function Carousel() { + const breakpoints = resolveConfig(tailwindConfig).theme.screens; + const settings: Settings = { dots: true, infinite: true, speed: 500, slidesToShow: 2, slidesToScroll: 1, + centerMode: true, nextArrow: , prevArrow: , responsive: [ { - breakpoint: 1200, + breakpoint: parseInt(breakpoints['md'].replace('px', '')), settings: { slidesToShow: 1, slidesToScroll: 1, initialSlide: 1, + centerMode: true, + arrows: false, }, }, { - breakpoint: 800, + breakpoint: parseInt(breakpoints['lg'].replace('px', '')), settings: { - slidesToShow: 1, + slidesToShow: 2, slidesToScroll: 1, initialSlide: 1, - nextArrow: false, - prevArrow: false, + arrows: false, }, }, ], }; - return (
- {announcements.map((announcement, index) => ( -
- -
- ))} + { + announcements.map((announcement, index) => ( +
+ +
+ )) + }
); } + +export default Carousel; diff --git a/src/pages/home/announcements.json b/src/pages/home/announcements.json index e238012..28cbfc0 100644 --- a/src/pages/home/announcements.json +++ b/src/pages/home/announcements.json @@ -1,30 +1,30 @@ [ { - "title": "Freshman Social Camp (FSC)", + "title": "Freshman Social Camp", "desc": "FSC is crafted to kickstart your university journey with enduring friendships and unforgettable experiences. Engage in a variety of physical and intellectual games, participate in team bonding exercises, and compete for exciting team and individual prizes. You will also have the opportunity to attend the beach finale event Bash together with your new friends, solidifying your friendships.", - "date": "19th June - 22nd June 2024", - "imgSrc": "announcements/fsc.jpg", - "link": "./events/freshman_social_camp" + "date": "19/06/24 - 22/06/24", + "link": "./events/freshman_social_camp", + "imgSrc": "/announcements/fsc.jpg" }, { - "title": "Freshman Orientation Week (FOW)", + "title": "Freshman Orientation Week", "desc": "FOW is a 4-day physical orientation camp where seniors help freshmen adapt to different aspects of university life through preparatory talks and team-building activities. Forge lasting friendships as you navigate campus resources and academic challenges together. Look forward to strategic team games that develop you both intellectually and physically.", - "date": "24th July - 27th July 2024", - "imgSrc": "announcements/fow.jpg", - "link": "./events/freshman_orientation_camp" + "date": "24/07/24 - 27/07/24", + "link": "./events/freshman_orientation_camp", + "imgSrc": "/announcements/fow.jpg" }, { - "title": "Freshman Finale Camp (FFC)", + "title": "Freshman Finale Camp", "desc": "FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.", - "date": "5th August - 7th August 2024", - "imgSrc": "announcements/ffc.jpg", - "link": "./events/freshman_finale_camp" + "date": "05/08/24 - 07/08/24", + "link": "./events/freshman_finale_camp", + "imgSrc": "/announcements/ffc.jpg" }, { "title": "Computing Bash", - "desc": "FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.", - "date": "16th August 2024", - "imgSrc": "announcements/bash.jpg", - "link": "./events/computing_bash" + "desc": "A fun-filled beach finale event where freshmen and seniors come together to wrap up the entire orientation experience with a night of performances, games, and food. Held at Sentosa Beach, Bash 2024 offers an electrifying atmosphere with DJ sets, inflatable obstacle courses, and much more.", + "date": "16/08/24", + "link": "./events/computing_bash", + "imgSrc": "/announcements/bash.jpg" } ] diff --git a/src/pages/home/index.css b/src/pages/home/index.css index 58d751c..089989d 100644 --- a/src/pages/home/index.css +++ b/src/pages/home/index.css @@ -16,9 +16,11 @@ section { .latest-announcements { @apply - flex - flex-col - h-[80vh] + flex + flex-col + h-fit + md:min-h-[80vh] + ; } .section-header { @@ -55,10 +57,12 @@ section { .carousel-container { @apply - px-0 - md:px-6 - lg:px-20 - pb-4 + h-fit + md:px-8 + xl:px-16 + 2xl:px-32 + pb-16 + 2xl:pb-8 ; } diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index fac36d8..e3617ee 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -17,22 +17,22 @@ function Home() { the gaps between them and the school.

- + {/* latest announcements */} -
-
+
+

Latest Announcements

-
+
{/* events */}
- +

Wondering

What's up?

@@ -60,7 +60,7 @@ function Home() {
- +
); diff --git a/tailwind.config.js b/tailwind.config.js index 2facf57..a4d013a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ -module.exports = { +export default { content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: { diff --git a/vite.config.js b/vite.config.js index b6d7a33..6b167f8 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,9 +3,9 @@ import react from '@vitejs/plugin-react'; import tailwindcss from 'tailwindcss'; // https://vitejs.dev/config/ -export default defineConfig(({ command }) => { - const config = { - plugins: [react( +export default defineConfig({ + plugins: [ + react( { babel: { plugins: [ @@ -13,13 +13,12 @@ export default defineConfig(({ command }) => { ], }, }, - )], - base: '/', - css: { - postcss: { - plugins: [tailwindcss()], - }, + ), + ], + base: '/', + css: { + postcss: { + plugins: [tailwindcss()], }, - }; - return config; + }, });