From 9aae98abdbd919aeef62fb0ad49338abf2d03850 Mon Sep 17 00:00:00 2001 From: Stephen Swanson Date: Thu, 18 Jul 2024 17:28:22 +0300 Subject: [PATCH 1/2] Blocking Updates: - Basic blocking for news, calendar, karhunkierros, contact, and footer sections - Needs to all be made responsive, polished, doocumented, etc - Using Embla carousel until M3 web component becomes available - Directus implementation could also be done soon to give the homepage a more complete feel --- components/Carousel.tsx | 121 ++++++++++++++++++++++++++++++++++ components/CarouselArrows.tsx | 95 ++++++++++++++++++++++++++ components/Navbar.tsx | 69 ++++++++++++------- package-lock.json | 29 ++++++++ package.json | 3 +- pages/index.tsx | 103 ++++++++++++++++++++++++++++- public/contact-aside.png | Bin 0 -> 12070 bytes styles/Home.module.css | 96 +++++++++++++++++++++++++++ styles/Navbar.module.css | 12 +++- styles/globals.css | 79 ++++++++++++++++++++++ temp_json/carousel.json | 40 +++++++++++ 11 files changed, 620 insertions(+), 27 deletions(-) create mode 100644 components/Carousel.tsx create mode 100644 components/CarouselArrows.tsx create mode 100644 public/contact-aside.png create mode 100644 temp_json/carousel.json diff --git a/components/Carousel.tsx b/components/Carousel.tsx new file mode 100644 index 0000000..c9f7b18 --- /dev/null +++ b/components/Carousel.tsx @@ -0,0 +1,121 @@ +import styles from "@/styles/Carousel.module.css"; +import React, { useCallback, useEffect, useRef } from "react"; +import Link from "next/link"; +import { + EmblaCarouselType, + EmblaEventType, + EmblaOptionsType, +} from "embla-carousel"; +import useEmblaCarousel from "embla-carousel-react"; +import { NextButton, PrevButton, usePrevNextButtons } from "./CarouselArrows"; + +const TWEEN_FACTOR_BASE = 0.84; + +const numberWithinRange = (number: number, min: number, max: number): number => + Math.min(Math.max(number, min), max); + +type PropType = { + slides: number[]; + options?: EmblaOptionsType; +}; + +const Carousel: React.FC = (props) => { + const { slides, options } = props; + const [emblaRef, emblaApi] = useEmblaCarousel(options); + const tweenFactor = useRef(0); + + const { + prevBtnDisabled, + nextBtnDisabled, + onPrevButtonClick, + onNextButtonClick, + } = usePrevNextButtons(emblaApi); + + const setTweenFactor = useCallback((emblaApi: EmblaCarouselType) => { + tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length; + }, []); + + const tweenOpacity = useCallback( + (emblaApi: EmblaCarouselType, eventName?: EmblaEventType) => { + const engine = emblaApi.internalEngine(); + const scrollProgress = emblaApi.scrollProgress(); + const slidesInView = emblaApi.slidesInView(); + const isScrollEvent = eventName === "scroll"; + + emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => { + let diffToTarget = scrollSnap - scrollProgress; + const slidesInSnap = engine.slideRegistry[snapIndex]; + + slidesInSnap.forEach((slideIndex) => { + if (isScrollEvent && !slidesInView.includes(slideIndex)) return; + + if (engine.options.loop) { + engine.slideLooper.loopPoints.forEach((loopItem) => { + const target = loopItem.target(); + + if (slideIndex === loopItem.index && target !== 0) { + const sign = Math.sign(target); + + if (sign === -1) { + diffToTarget = scrollSnap - (1 + scrollProgress); + } + if (sign === 1) { + diffToTarget = scrollSnap + (1 - scrollProgress); + } + } + }); + } + + const tweenValue = 1 - Math.abs(diffToTarget * tweenFactor.current); + const opacity = numberWithinRange(tweenValue, 0, 1).toString(); + emblaApi.slideNodes()[slideIndex].style.opacity = opacity; + }); + }); + }, + [], + ); + + useEffect(() => { + if (!emblaApi) return; + + setTweenFactor(emblaApi); + tweenOpacity(emblaApi); + emblaApi + .on("reInit", setTweenFactor) + .on("reInit", tweenOpacity) + .on("scroll", tweenOpacity) + .on("slideFocus", tweenOpacity); + }, [emblaApi, tweenOpacity]); + + return ( +
+
+
+ {slides.map((index) => ( +
+ Your alt text +
+ ))} +
+
+ +
+
+ + +
+
+ + Katso Lisää + +
+
+
+ ); +}; + +export default Carousel; diff --git a/components/CarouselArrows.tsx b/components/CarouselArrows.tsx new file mode 100644 index 0000000..09e143f --- /dev/null +++ b/components/CarouselArrows.tsx @@ -0,0 +1,95 @@ +import React, { + ComponentPropsWithRef, + useCallback, + useEffect, + useState, +} from "react"; +import { EmblaCarouselType } from "embla-carousel"; + +type UsePrevNextButtonsType = { + prevBtnDisabled: boolean; + nextBtnDisabled: boolean; + onPrevButtonClick: () => void; + onNextButtonClick: () => void; +}; + +export const usePrevNextButtons = ( + emblaApi: EmblaCarouselType | undefined, + onButtonClick?: (emblaApi: EmblaCarouselType) => void, +): UsePrevNextButtonsType => { + const [prevBtnDisabled, setPrevBtnDisabled] = useState(true); + const [nextBtnDisabled, setNextBtnDisabled] = useState(true); + + const onPrevButtonClick = useCallback(() => { + if (!emblaApi) return; + emblaApi.scrollPrev(); + if (onButtonClick) onButtonClick(emblaApi); + }, [emblaApi, onButtonClick]); + + const onNextButtonClick = useCallback(() => { + if (!emblaApi) return; + emblaApi.scrollNext(); + if (onButtonClick) onButtonClick(emblaApi); + }, [emblaApi, onButtonClick]); + + const onSelect = useCallback((emblaApi: EmblaCarouselType) => { + setPrevBtnDisabled(!emblaApi.canScrollPrev()); + setNextBtnDisabled(!emblaApi.canScrollNext()); + }, []); + + useEffect(() => { + if (!emblaApi) return; + + onSelect(emblaApi); + emblaApi.on("reInit", onSelect).on("select", onSelect); + }, [emblaApi, onSelect]); + + return { + prevBtnDisabled, + nextBtnDisabled, + onPrevButtonClick, + onNextButtonClick, + }; +}; + +type PropType = ComponentPropsWithRef<"button">; + +export const PrevButton: React.FC = (props) => { + const { children, ...restProps } = props; + + return ( + + ); +}; + +export const NextButton: React.FC = (props) => { + const { children, ...restProps } = props; + + return ( + + ); +}; diff --git a/components/Navbar.tsx b/components/Navbar.tsx index c717ad3..70aa401 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -10,7 +10,7 @@ import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; import Image from "next/image"; import Link from "next/link"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import close from "../public/close.svg"; import menu from "../public/menu.svg"; import sato_logo_nav from "../public/sato_logo_nav.png"; @@ -22,6 +22,25 @@ const Navbar = () => { right: false, }); + useEffect(() => { + let prevScrollpos = window.scrollY; + const handleScroll = () => { + const currentScrollpos = window.scrollY; + const navWrapper = document.getElementById("navContainer"); + if (navWrapper) { + if (prevScrollpos > currentScrollpos) { + navWrapper.style.top = "0"; + } else { + navWrapper.style.top = "-10rem"; + } + } + prevScrollpos = currentScrollpos; + }; + window.addEventListener("scroll", handleScroll); + + return () => window.removeEventListener("scroll", handleScroll); + }, []); + const toggleDrawer = (anchor: Anchor, open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { @@ -72,29 +91,31 @@ const Navbar = () => { ); return ( - + ); }; diff --git a/package-lock.json b/package-lock.json index 0a67305..1e4ff94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.11.5", "@mui/material": "^5.15.20", "dotenv": "^16.4.5", + "embla-carousel-react": "^8.1.6", "next": "14.2.4", "react": "^18", "react-dom": "^18" @@ -3261,6 +3262,34 @@ "integrity": "sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ==", "dev": true }, + "node_modules/embla-carousel": { + "version": "8.1.6", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.6.tgz", + "integrity": "sha512-9n7FVsbPAs1KD+JmO84DnEDOZMXPBQbLujjMQqvsBRN2CDWwgZ9hRSNapztdPnyJfzOIxowGmj0BUQ8ACYAPkA==", + "license": "MIT" + }, + "node_modules/embla-carousel-react": { + "version": "8.1.6", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.1.6.tgz", + "integrity": "sha512-DHxwFzF63yVrU95Eo58E9Xr5b6Y9ul6TTsqb/rtwMi+jXudAmIqN1i9iBxQ73i8jKuUVxll/ziNYMmnWvrdQJQ==", + "license": "MIT", + "dependencies": { + "embla-carousel": "8.1.6", + "embla-carousel-reactive-utils": "8.1.6" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.1 || ^18.0.0" + } + }, + "node_modules/embla-carousel-reactive-utils": { + "version": "8.1.6", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.6.tgz", + "integrity": "sha512-Wg+J2YoqLqkaqsXi7fTJaLmXm6BpgDRJ0EfTdvQ4KE/ip5OsUuKGpJsEQDTt4waGXSDyZhIBlfoQtgGJeyYQ1Q==", + "license": "MIT", + "peerDependencies": { + "embla-carousel": "8.1.6" + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", diff --git a/package.json b/package.json index b75a0f6..2f41d6e 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,10 @@ "@emotion/styled": "^11.11.5", "@mui/material": "^5.15.20", "dotenv": "^16.4.5", + "embla-carousel-react": "^8.1.6", "next": "14.2.4", "react": "^18", - "react-dom": "^18" + "react-dom": "^18" }, "devDependencies": { "@testing-library/react": "^16.0.0", diff --git a/pages/index.tsx b/pages/index.tsx index 4120b6b..d70109d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -15,6 +15,12 @@ import Link from "next/link"; import aino from "../public/aino.png"; import arrowBlue from "../public/arrow_forward_blue.svg"; import arrowWhite from "../public/arrow_forward_white.svg"; +import Carousel from "@/components/Carousel"; +import cAside from "../public/contact-aside.png"; + +const OPTIONS: EmblaOptionsType = { loop: true }; +const SLIDE_COUNT = 10; +const SLIDES = Array.from(Array(SLIDE_COUNT).keys()); export default function Home() { return ( @@ -123,7 +129,102 @@ export default function Home() { {/* News */} -
+
+

Uutisia

+ + + + + + Title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel + minima nemo ratione molestiae in ab laborum perferendis + beatae impedit dolorem iusto sunt. + + + + + + + + + + + + Title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel + minima nemo ratione molestiae in ab laborum perferendis + beatae impedit dolorem iusto sunt. + + + + + + + + +
+ {/* Calendar */} +
+ +

Kalenteri

+ +
+ {/* Carousel */} +
+

Osakuntalehti Karhunkierros

+ + + + +
+ {/* Contact */} +
+
+
+

Postia hallitikselle

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Asperiores facere at minus officiis nesciunt? Quos labore + dolorem et mollitia quia. Recusandae dolores modi quaerat + magnam! Autem distinctio ipsa a alias. +

+ +

Häirintälomake

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Asperiores facere at minus officiis nesciunt? Quos labore + dolorem et mollitia quia. Recusandae dolores modi quaerat + magnam! Autem distinctio ipsa a alias. +

+ +
+ various messaging icons +
+
+ + {/* Footer */} +
); diff --git a/public/contact-aside.png b/public/contact-aside.png new file mode 100644 index 0000000000000000000000000000000000000000..cc90689579bca75c232d6cc16f4094e0bdeb78dd GIT binary patch literal 12070 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 VfcI-3rO~o>3=I{qa;+j1_J4WH3M2pk literal 0 HcmV?d00001 diff --git a/styles/Home.module.css b/styles/Home.module.css index 4856dc1..e08a1fe 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -101,3 +101,99 @@ background-color: var(--blue100); color: var(--blue300); } + +.news { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + width: 70%; + margin: 5rem 0 5rem 0; +} + +.cardContainer { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + gap: 1rem; +} + +.newsCard { + width: 40%; +} + +.newCardContent { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.cardTitle { + font-weight: 700; +} + +.cardDescription { + font-size: 0.8rem; +} + +/* Calendar */ +.calendarSection { + background-color: var(--orange100); + width: 100%; + height: 50rem; + display: flex; + justify-content: center; + align-items: center; + padding: 5rem 0 5rem 0; +} + +.sectionContainer { + width: 70%; + height: 100%; +} + +/* Carousel */ +.karhunkierros { + width: 70%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin: 5rem 0 5rem 0; +} + +.carouselContainer { + margin: 1rem 0 1rem 0; +} + +/* Contact */ +.contact { + background-color: var(--blue100); + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 5rem 0 5rem 0; +} + +.contactSectionContainer { + width: 70%; + height: 100%; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} + +.contactInfo { + width: 40%; +} + +/* footer */ +.footer { + width: 100%; + height: 20rem; + background-color: var(--blue300); +} diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css index 9f7e29f..0309602 100644 --- a/styles/Navbar.module.css +++ b/styles/Navbar.module.css @@ -1,9 +1,19 @@ +.navContainer { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + background-color: var(--blue100); + z-index: 999; + transition: 0.25s ease; +} + .navbar { display: flex; flex-direction: row; width: 80%; justify-content: space-between; align-items: center; - position: fixed; top: 0; } diff --git a/styles/globals.css b/styles/globals.css index 7fa4fc3..8583fb4 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -23,3 +23,82 @@ body { font-family: "Raleway", sans-serif; max-width: 2150px; } + +/* EMBLA CAROUSEL*/ +.embla { + width: 100%; + margin: auto; + --slide-height: 19rem; + --slide-spacing: 1rem; + --slide-size: 30%; +} +.embla__viewport { + overflow: hidden; +} +.embla__container { + backface-visibility: hidden; + display: flex; + touch-action: pan-y pinch-zoom; + margin-left: calc(var(--slide-spacing) * -1); +} +.embla__slide { + flex: 0 0 var(--slide-size); + min-width: 0; + padding-left: var(--slide-spacing); +} +.embla__slide__img { + border-radius: 1.8rem; + display: block; + height: var(--slide-height); + width: 100%; + object-fit: cover; +} +.embla__controls { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + grid-template-columns: auto 1fr; + justify-content: space-between; + margin-top: 1.8rem; +} +.embla__buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.6rem; + align-items: center; +} +.embla__button { + -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5); + -webkit-appearance: none; + appearance: none; + background-color: transparent; + touch-action: manipulation; + display: inline-flex; + text-decoration: none; + cursor: pointer; + border: 0; + padding: 0; + margin: 0; + box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast); + width: 3.6rem; + height: 3.6rem; + z-index: 1; + border-radius: 50%; + color: var(--text-body); + display: flex; + align-items: center; + justify-content: center; +} +.embla__button:disabled { + color: var(--detail-high-contrast); +} +.embla__button__svg { + width: 35%; + height: 35%; +} +.embla__link, +.embla__link:visited { + color: var(--black); + font-weight: 700; +} diff --git a/temp_json/carousel.json b/temp_json/carousel.json new file mode 100644 index 0000000..587fdaa --- /dev/null +++ b/temp_json/carousel.json @@ -0,0 +1,40 @@ +{ + "images": [ + { + "url": "https://images.unsplash.com/photo-1709884735017-114f4a31f944?q=80&w=2129&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + "alt_text": "boat" + }, + { + "url": "https://plus.unsplash.com/premium_photo-1669357657874-34944fa0be68?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + "alt_text": "plant" + }, + { + "url": "https://plus.unsplash.com/premium_photo-1684445034763-013f0525c40c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + "alt_text": "chair" + }, + { + "url": "https://images.unsplash.com/photo-1709884735017-114f4a31f944?q=80&w=2129&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + "alt_text": "boat" + }, + { + "url": "https://plus.unsplash.com/premium_photo-1669357657874-34944fa0be68?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + "alt_text": "plant" + }, + { + "url": "https://plus.unsplash.com/premium_photo-1684445034763-013f0525c40c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + "alt_text": "chair" + }, + { + "url": "https://images.unsplash.com/photo-1709884735017-114f4a31f944?q=80&w=2129&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + "alt_text": "boat" + }, + { + "url": "https://plus.unsplash.com/premium_photo-1669357657874-34944fa0be68?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + "alt_text": "plant" + }, + { + "url": "https://plus.unsplash.com/premium_photo-1684445034763-013f0525c40c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + "alt_text": "chair" + } + ] +} From 9d9fe64e2a5b35402b20f020499f2de2f5dcd106 Mon Sep 17 00:00:00 2001 From: Stephen Swanson Date: Thu, 18 Jul 2024 17:35:03 +0300 Subject: [PATCH 2/2] Fixed an import --- pages/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/index.tsx b/pages/index.tsx index d70109d..99b4850 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -17,6 +17,7 @@ import arrowBlue from "../public/arrow_forward_blue.svg"; import arrowWhite from "../public/arrow_forward_white.svg"; import Carousel from "@/components/Carousel"; import cAside from "../public/contact-aside.png"; +import { EmblaOptionsType } from "embla-carousel"; const OPTIONS: EmblaOptionsType = { loop: true }; const SLIDE_COUNT = 10;