Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 23:02:53 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: UX improvements for the TOC component

Browse Source
This commit is contained in:
saicaca
2024-10-27 16:44:12 +08:00
parent 2db5938beb
commit 2b9f6bc5bb
3 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/layouts/Layout.astro
View File

@@ -138,12 +138,6 @@ const bannerOffset =
>
<ConfigCarrier></ConfigCarrier>
<GlobalStyles>
{siteConfig.banner.enable && <div id="banner-wrapper" class="absolute -top-[30vh] w-full transition duration-700 overflow-hidden">
<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
src={siteConfig.banner.src} position={siteConfig.banner.position}
>
</ImageWrapper>
</div>}
<slot />
</GlobalStyles>
@@ -414,8 +408,10 @@ let backToTopBtn = document.getElementById('back-to-top-btn');
let toc = document.getElementById('toc-wrapper');
let navbar = document.getElementById('navbar-wrapper')
function scrollFunction() {
let bannerHeight = window.innerHeight * 0.30
if (backToTopBtn) {
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
if (document.body.scrollTop > bannerHeight || document.documentElement.scrollTop > bannerHeight) {
backToTopBtn.classList.remove('hide')
} else {
backToTopBtn.classList.add('hide')
@@ -423,7 +419,7 @@ function scrollFunction() {
}
if (toc) {
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
if (document.body.scrollTop > bannerHeight || document.documentElement.scrollTop > bannerHeight) {
toc.classList.remove('toc-hide')
} else {
toc.classList.add('toc-hide')

25
src/layouts/MainGridLayout.astro
View File

@@ -8,6 +8,7 @@ import { Icon } from 'astro-icon/components'
import { siteConfig } from '../config'
import type { MarkdownHeading } from 'astro'
import TOC from "../components/widget/TOC.astro";
import ImageWrapper from "../components/misc/ImageWrapper.astro";
interface Props {
title?: string
@@ -25,6 +26,8 @@ const hasBannerLink = !!siteConfig.banner.credit.url
---
<Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}>
<!-- Navbar -->
<slot slot="head" name="head"></slot>
<div id="top-row" class="z-50 pointer-events-none relative transition-all duration-700 max-w-[var(--page-width)] px-0 md:px-4 mx-auto" class:list={[""]}>
<div id="navbar-wrapper" class="pointer-events-auto sticky top-0 transition-all">
@@ -32,8 +35,18 @@ const hasBannerLink = !!siteConfig.banner.credit.url
</div>
</div>
<div class="absolute w-full" class:list={[{"top-[30vh]": siteConfig.banner.enable, "top-[5.5rem]": !siteConfig.banner.enable}]}>
<div class="relative max-w-[var(--page-width)] mx-auto">
<!-- Banner -->
{siteConfig.banner.enable && <div id="banner-wrapper" class="absolute z-10 -top-[30vh] w-full transition duration-700 overflow-hidden">
<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
src={siteConfig.banner.src} position={siteConfig.banner.position}
>
</ImageWrapper>
</div>}
<!-- Main content -->
<div class="absolute w-full z-30 pointer-events-none" class:list={[{"top-[30vh]": siteConfig.banner.enable, "top-[5.5rem]": !siteConfig.banner.enable}]}>
<!-- The pointer-events-none here prevent blocking the click event of the TOC -->
<div class="relative max-w-[var(--page-width)] mx-auto pointer-events-auto">
<div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]
mx-auto gap-4 px-0 md:px-4"
>
@@ -69,6 +82,13 @@ const hasBannerLink = !!siteConfig.banner.credit.url
</div>
</div>
<BackToTop></BackToTop>
</div>
</div>
<!-- The things that should be under the banner, only the TOC for now -->
<div class="absolute w-full z-0">
<div class="relative max-w-[var(--page-width)] mx-auto">
<!-- TOC component -->
<div id="toc-wrapper" class="transition absolute top-0 -right-[30rem] w-[30rem] flex items-center toc-hide">
<div id="toc-inner-wrapper" class="fixed top-14 w-96 h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar">
@@ -79,7 +99,6 @@ const hasBannerLink = !!siteConfig.banner.credit.url
</div>
</div>
</div>
<BackToTop></BackToTop>
</div>
</div>
</Layout>