From f0a614d4f0a13aff48168a0daf78c008cce7fcb8 Mon Sep 17 00:00:00 2001 From: thislight Date: Wed, 24 Jul 2024 14:27:20 +0800 Subject: [PATCH] Timelines: respect the notch --- .gitignore | 3 ++- index.html | 5 ++++- src/App.css | 5 +++++ src/App.tsx | 1 - src/settings/Settings.tsx | 2 +- src/timelines/Home.tsx | 10 +++++----- 6 files changed, 17 insertions(+), 9 deletions(-) diff --git a/.gitignore b/.gitignore index d26c746..fb699e4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules -dist/ \ No newline at end of file +dist/ +dev-dist/ \ No newline at end of file diff --git a/index.html b/index.html index 6d30de8..2712433 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,11 @@ - + + + Tutu + diff --git a/src/App.css b/src/App.css index 26dd292..bba585f 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,10 @@ :root { + --safe-area-inset-top: env(safe-area-inset-top); + --safe-area-inset-left: env(safe-area-inset-left); + --safe-area-inset-bottom: env(safe-area-inset-bottom); + --safe-area-inset-right: env(safe-area-inset-right); background-color: var(--tutu-color-surface, transparent); + overscroll-behavior-block: contain; } .custom-emoji { diff --git a/src/App.tsx b/src/App.tsx index 8a711e1..55e9971 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,6 @@ import { createMastoClientFor, type Session, } from "./masto/clients.js"; -import "./App.css"; import { $accounts } from "./accounts/stores.js"; import { useStore } from "@nanostores/solid"; diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 40bbffd..36a4026 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -42,7 +42,7 @@ const Settings: ParentComponent = () => { } .setting-list { - padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); + padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 16px); } `; return ( diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx index 8d14d76..c70cf39 100644 --- a/src/timelines/Home.tsx +++ b/src/timelines/Home.tsx @@ -122,7 +122,7 @@ const TimelinePanel: Component<{
{ max-width: 560px; height: 100%; padding: 40px 16px; - max-height: calc(100vh - var(--scaffold-topbar-height, 0px)); - max-height: calc(100dvh - var(--scaffold-topbar-height, 0px)); scroll-snap-align: center; @media (max-width: 600px) { @@ -257,6 +255,8 @@ const Home: ParentComponent = (props) => { scroll-snap-stop: always; height: calc(100vh - var(--scaffold-topbar-height, 0px)); height: calc(100dvh - var(--scaffold-topbar-height, 0px)); + padding-left: var(--safe-area-inset-left, 0); + padding-right: var(--safe-area-inset-right, 0); @media (max-width: 600px) { grid-auto-columns: 100%; @@ -269,7 +269,7 @@ const Home: ParentComponent = (props) => { - + Home