From 07938adc8ffc17f0db6e3e1a7174fa9e98db8409 Mon Sep 17 00:00:00 2001 From: Kerby Keith Aquino <94678583+skepfusky@users.noreply.github.com> Date: Tue, 14 Jun 2022 16:57:03 +0800 Subject: [PATCH] End of June features release Replacing Flask to FastAPI on stuff Added nav indicators on headings Detect all JavaScript files into TypeScript --- .gitattributes | 1 + README.md | 2 +- app/src/components/Footer.tsx | 4 +-- app/src/components/Header.tsx | 18 ++++++++++-- .../components/{ => layouts}/HeaderHero.tsx | 14 ++++++++-- app/src/pages/index.tsx | 28 ++----------------- app/src/styles/partials/_layouts.scss | 11 ++++++-- 7 files changed, 41 insertions(+), 37 deletions(-) create mode 100644 .gitattributes rename app/src/components/{ => layouts}/HeaderHero.tsx (81%) diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..282f21f --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.js linguist-language=TypeScript diff --git a/README.md b/README.md index 718d57b..7564efc 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Searchpets' open issues

-Searchpets is an open source search engine to find characters and texts from comics (coming soon) from Housepets! written in Next.js and Flask. +Searchpets is an open source search engine to find characters and texts from comics (coming soon) from Housepets! written in Next.js and FastAPI.

This project was taken inspiration from this forum post. diff --git a/app/src/components/Footer.tsx b/app/src/components/Footer.tsx index 9633aa6..1caf55d 100644 --- a/app/src/components/Footer.tsx +++ b/app/src/components/Footer.tsx @@ -11,7 +11,7 @@ export default function Footer() {

- A full stack web app created with Next.js and Flask by{" "} + A full stack web app created with Next.js and FastAPI by{" "} @@ -49,7 +49,7 @@ export default function Footer() { size="sm" className="translate-y-0.5" /> - Housepets Website + Official Housepets Website diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx index 02c0345..f7eb3b3 100644 --- a/app/src/components/Header.tsx +++ b/app/src/components/Header.tsx @@ -1,11 +1,24 @@ +import { useState, useEffect } from "react" import Link from "next/link" import { useRouter } from "next/router" import { FontAwesomeIcon as FaIcon } from "@fortawesome/react-fontawesome" -import { faInfoCircle, faList, faSearch } from "@fortawesome/free-solid-svg-icons" +import { + faInfoCircle, + faList, + faSearch, +} from "@fortawesome/free-solid-svg-icons" export default function Header() { const router = useRouter() + const [navIdn, setNavIdn] = useState("translate-x-8") + + useEffect(() => { + if (router.pathname === "/") setNavIdn("translate-x-9") + if (router.pathname === "/characters") setNavIdn("translate-x-[10.75rem]") + if (router.pathname === "/about") setNavIdn("translate-x-[19rem]") + }, [router.pathname]) + return (

@@ -17,6 +30,7 @@ export default function Header() {
diff --git a/app/src/components/HeaderHero.tsx b/app/src/components/layouts/HeaderHero.tsx similarity index 81% rename from app/src/components/HeaderHero.tsx rename to app/src/components/layouts/HeaderHero.tsx index c572c1c..7000327 100644 --- a/app/src/components/HeaderHero.tsx +++ b/app/src/components/layouts/HeaderHero.tsx @@ -1,9 +1,17 @@ +import { useEffect, useState } from "react" + interface IHeaderHeroProps { characterCount: number comicCount: number } -export default function HeaderHero({ characterCount, comicCount}: IHeaderHeroProps) { +export default function HeaderHero({ + characterCount, + comicCount, +}: IHeaderHeroProps) { + + + return (

@@ -24,5 +32,5 @@ export default function HeaderHero({ characterCount, comicCount}: IHeaderHeroPro characters from the entire Housepets! comic catalog!

- ); -}; + ) +} diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx index c5ead90..e15d200 100644 --- a/app/src/pages/index.tsx +++ b/app/src/pages/index.tsx @@ -8,7 +8,7 @@ import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons" import { ComicItemLoading } from "../components/ComicItem" import BaseHead from "../components/BaseHead" import Container from "../components/Container" -import HeaderHero from "../components/HeaderHero" +import HeaderHero from "../components/layouts/HeaderHero" import YearPickerItem from "../components/YearPickerItem" import BackToTopButton from "../components/BackToTop" @@ -150,36 +150,12 @@ export default function Home({ comicCount, charCount }) { heroMargin.style.display = "none" return } + resultText.classList.add("hidden") heroMargin.style.marginTop = "12vh" heroMargin.style.display = "flex" }, [comics, years]) - useEffect(() => { - window.onscroll = () => { - const heroText = document.querySelector(".hero-header") - const searchBox = document.querySelector(".search-box-wrapper") - - if (heroText.clientHeight === 72) { - window.pageYOffset > 327 - ? searchBox.classList.add("lock") - : searchBox.classList.remove("lock") - } - - if (heroText.clientHeight === 108) { - window.pageYOffset > 390 - ? searchBox.classList.add("lock") - : searchBox.classList.remove("lock") - } - - if (heroText.clientHeight === 144) { - window.pageYOffset > 408 - ? searchBox.classList.add("lock") - : searchBox.classList.remove("lock") - } - } - }, []) - const title = "Search characters and texts from Housepets!" let description = `Search through ${comicCount} pages and ${charCount} characters from the entire Housepets! comic catalog!` diff --git a/app/src/styles/partials/_layouts.scss b/app/src/styles/partials/_layouts.scss index 4d8804d..e95ad4b 100644 --- a/app/src/styles/partials/_layouts.scss +++ b/app/src/styles/partials/_layouts.scss @@ -47,7 +47,8 @@ footer { /*** Header stuff ***/ .header-nav { - @apply flex text-lg gap-x-1 flex-col md:flex-row; + @apply flex text-lg gap-x-1 flex-col md:flex-row relative; + a { @apply px-3 py-2 rounded-md transition-colors duration-100; @@ -58,7 +59,11 @@ footer { } .active { - @apply text-blue-400; + @apply text-blue-400 font-bold; +} + +.nav-indicator { + @apply h-[3px] w-12 rounded-lg bg-blue-400 absolute -bottom-2 transition-transform duration-300; } /********* @@ -116,7 +121,7 @@ footer { @supports (backdrop-filter: blur(10px)) { .search-box-wrapper.lock { - backdrop-filter: blur(10px); + @apply backdrop-blur; background-color: rgba(60, 60, 60, 0.44); } }