From 7f84792673001c7c498d1205ef8fd308da01c0e6 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Sat, 18 Feb 2023 19:35:22 +0500 Subject: [PATCH] animations --- package.json | 2 +- src/animations/search.animation.ts | 49 +++++++++ src/components/category/MainImg.tsx | 4 +- src/components/global/NewsScroll.tsx | 1 - src/components/header/LanguageSelect.tsx | 91 +++++++++------- src/components/header/Nav.tsx | 123 +++++++++++++++------- src/components/header/Search.tsx | 24 ++++- src/components/news/NewsArticleSlider.tsx | 5 +- src/hooks/useMediaQuery.tsx | 22 ++++ src/pages/Main.tsx | 2 +- src/styles/_general.scss | 5 +- src/styles/_nav.scss | 78 +++++++++----- src/styles/_news.scss | 6 ++ 13 files changed, 298 insertions(+), 114 deletions(-) create mode 100644 src/hooks/useMediaQuery.tsx diff --git a/package.json b/package.json index a9ca0b4..5308027 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "tsc && vite build", "preview": "vite preview" }, diff --git a/src/animations/search.animation.ts b/src/animations/search.animation.ts index 3011609..1f59716 100644 --- a/src/animations/search.animation.ts +++ b/src/animations/search.animation.ts @@ -13,3 +13,52 @@ export const searchMotion: Variants = { type: "tween", }, }; + +export const searchMobileMotion: Variants = { + rest: { + width: "12rem", + right: "8rem", + type: "spring", + borderColor: "rgba(166, 166, 166, 0)", + }, + active: { + width: "100%", + right: "0", + type: "spring", + borderColor: "rgba(166, 166, 166, 1)", + }, + + logoRest: { + display: "block", + opacity: 1, + transform: "translateX(0%)", + type: "spring", + }, + logoActive: { + opacity: 0, + transform: "translateX(-150%)", + type: "spring", + }, + + langRest: { + opacity: 1, + transform: "translateX(0%)", + type: "spring", + }, + langActive: { + opacity: 0, + transform: "translateX(150%)", + type: "spring", + }, + + loopRest: { + width: "1.3rem", + height: "1.4rem", + type: "spring", + }, + loopActive: { + width: "2rem", + height: "2rem", + type: "spring", + }, +}; diff --git a/src/components/category/MainImg.tsx b/src/components/category/MainImg.tsx index f42f0f6..17545e7 100644 --- a/src/components/category/MainImg.tsx +++ b/src/components/category/MainImg.tsx @@ -20,12 +20,12 @@ const MainImg = () => { 0 - ? data[0].featured_images[0] + ? data[0].featured_images[0].path : "") as string } alt={ (data[0].featured_images.length > 0 - ? data[0].featured_images[0] + ? data[0].featured_images[0].file_name : "") as string } useIntersectionObserver diff --git a/src/components/global/NewsScroll.tsx b/src/components/global/NewsScroll.tsx index 3ec49ae..d2a6f75 100644 --- a/src/components/global/NewsScroll.tsx +++ b/src/components/global/NewsScroll.tsx @@ -70,7 +70,6 @@ const NewsScroll = ({ title, category }: Props) => { return (
-
{title === true ? ( { +interface IProps { + isSmall: boolean; + isInputFocused: boolean; +} + +const LanguageSelect = ({ isSmall, isInputFocused }: IProps) => { const [dropdown, setDropdown] = useState(false); const activeLanguage = useSelector( @@ -41,48 +50,54 @@ const LanguageSelect = () => { }; return ( setDropdown(!dropdown)} - initial={"wrapperRest"} - animate={dropdown ? "wrapperActive" : "wrapperRest"} - variants={languageMotion} + initial={isSmall ? "langRest" : {}} + animate={isSmall ? (isInputFocused ? "langActive" : "langRest") : {}} + variants={searchMobileMotion} > - {activeLanguage} setDropdown(!dropdown)} + initial={"wrapperRest"} + animate={dropdown ? "wrapperActive" : "wrapperRest"} variants={languageMotion} > - + {activeLanguage} + + + + + {languages.map((language: ILanguage) => { + return ( +
  • + onLanguageClick(language.title)} + > + {language.title} + +
    • + ); + })} +     - - {languages.map((language: ILanguage) => { - return ( -
  • - onLanguageClick(language.title)} - > - {language.title} - -
    • - ); - })} -     ); }; diff --git a/src/components/header/Nav.tsx b/src/components/header/Nav.tsx index 9c1ca49..c2d1110 100644 --- a/src/components/header/Nav.tsx +++ b/src/components/header/Nav.tsx @@ -1,5 +1,8 @@ // Modules +import { useState } from "react"; import { Link } from "react-router-dom"; +import { motion } from "framer-motion"; + // Icons import { ReactComponent as Logo } from "../../assets/icons/logo.svg"; import { ReactComponent as Instagram } from "../../assets/icons/insta-black.svg"; @@ -10,48 +13,94 @@ import { ReactComponent as TikTok } from "../../assets/icons/tiktok-black.svg"; import Search from "./Search"; import LanguageSelect from "./LanguageSelect"; +// Hooks +import useMediaQuery from "../../hooks/useMediaQuery"; + +// Animation +import { searchMobileMotion } from "../../animations/search.animation"; + const Nav = () => { + const isSmall = useMediaQuery("(max-width: 850px)"); + const [isInputFocused, setIsInputFocused] = useState(false); return ( ); diff --git a/src/components/header/Search.tsx b/src/components/header/Search.tsx index a218eab..b2fe725 100644 --- a/src/components/header/Search.tsx +++ b/src/components/header/Search.tsx @@ -1,9 +1,13 @@ // Modules +import { Dispatch, SetStateAction } from "react"; import { motion } from "framer-motion"; import { useSelector, useDispatch } from "react-redux"; // Animations -import { searchMotion } from "../../animations/search.animation"; +import { + searchMotion, + searchMobileMotion, +} from "../../animations/search.animation"; // Icons import { ReactComponent as Loop } from "../../assets/icons/loop.svg"; @@ -14,10 +18,17 @@ import { RootState } from "../../types/store.types"; // Actions import { setSearch } from "../../actions/setSearch"; -const Search = () => { +interface IProps { + isSmall: boolean; + isInputFocused: boolean; + setIsInputFocused: Dispatch>; +} + +const Search = ({ isSmall, isInputFocused, setIsInputFocused }: IProps) => { const onInputChange = (value: string) => { dispatch(setSearch(value)); }; + // redux const dispatch = useDispatch(); const inputValue = useSelector( @@ -37,14 +48,21 @@ const Search = () => { onChange={(event: React.ChangeEvent) => onInputChange(event.target.value) } + onFocus={() => { + setIsInputFocused(true); + }} + onBlur={() => { + setIsInputFocused(false); + }} /> 0 ? "active" : "rest"} variants={searchMotion} > - Search anything... + Search ); diff --git a/src/components/news/NewsArticleSlider.tsx b/src/components/news/NewsArticleSlider.tsx index 9d98902..04e01a5 100644 --- a/src/components/news/NewsArticleSlider.tsx +++ b/src/components/news/NewsArticleSlider.tsx @@ -1,5 +1,5 @@ // Modules -import { Swiper, SwiperSlide } from "swiper/react"; +import { Swiper, SwiperSlide, useSwiper } from "swiper/react"; import { Navigation, Pagination, Autoplay } from "swiper"; import { v4 as uuidv4 } from "uuid"; @@ -13,12 +13,13 @@ interface IProps { } const NewsArticleSlider = ({ images }: IProps) => { + let loop = images.length > 1; return (
    { + const [matches, setMatches] = useState(false); + + useEffect(() => { + const media = window.matchMedia(query); + if (media.matches !== matches) { + setMatches(media.matches); + } + const listener = () => { + setMatches(media.matches); + }; + media.addListener(listener); + return () => media.removeListener(listener); + }, [matches, query]); + + return matches; +}; + +export default useMediaQuery; diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 6e101b2..47276ba 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -21,7 +21,7 @@ const Main = () => {
    - +
    diff --git a/src/styles/_general.scss b/src/styles/_general.scss index 8cbfcf5..0010521 100644 --- a/src/styles/_general.scss +++ b/src/styles/_general.scss @@ -1,5 +1,5 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap"); * { margin: 0; @@ -16,6 +16,7 @@ html { body { min-height: 100vh; + overflow-x: hidden; } #root { diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss index 8073e19..5a4d4d1 100644 --- a/src/styles/_nav.scss +++ b/src/styles/_nav.scss @@ -1,4 +1,5 @@ .nav-inner { + position: relative; padding: 3rem 0; display: grid; align-items: center; @@ -6,17 +7,44 @@ gap: 2.4rem; justify-content: space-between; border-bottom: 0.1rem solid $black; + z-index: 2; + + &.mobile { + min-height: 10rem; + display: flex; + flex-direction: row; + align-items: center; + gap: 1.6rem; + justify-content: space-between; + + .nav-mid { + position: absolute; + left: 0; + top: 3rem; + } + .search-wrap { + position: absolute; + right: 8rem; + top: 3rem; + } + .lang-wrap { + position: absolute; + right: 0; + top: 3rem; + } + } } .search { + width: 100%; overflow: hidden; position: relative; + border: 0.1rem solid $gray-dark; + border-radius: 0.5rem; input { - border: 0.1rem solid $gray-dark; padding: 1rem 1.4rem; font-size: 1.6rem; color: $black; - border-radius: 0.5rem; } div { @@ -37,6 +65,7 @@ } .nav-left { + width: 100%; display: flex; align-items: center; gap: 1.6rem; @@ -162,39 +191,34 @@ // Media @media screen and (max-width: 850px) { - // .nav-burger { - // display: block; - // width: 3rem; - // height: 3rem; - - // .line { - // position: absolute; - // width: 100%; - // border-radius: 1rem; - // background: $black; - // height: 0.33rem; - - // &-1 { - // top: 15%; - // } - // &-2 { - // top: 50%; - // transform: translateY(-50%); - // } - // &-3 { - // top: 75%; - // } - // } - // } - .search, .nav-right { display: none; } .nav-left { + justify-content: flex-end; padding-right: 0; } + .search { + input { + width: 100%; + padding: 1rem 0.8rem; + } + + div { + left: 0.8rem; + + img { + width: 100%; + height: 100%; + } + span { + white-space: nowrap; + } + } + } + .nav-inner { display: flex; flex-direction: row-reverse; diff --git a/src/styles/_news.scss b/src/styles/_news.scss index 698e1b2..8dbf712 100644 --- a/src/styles/_news.scss +++ b/src/styles/_news.scss @@ -102,6 +102,12 @@ color: $black; } +.news-image { + img { + @include wh100; + } +} + @media (max-width: 1024px) { .news-title { font-size: 2rem;