Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

Timelines: respect the notch

Browse source
This commit is contained in:
thislight 2024-07-24 14:27:20 +08:00
parent 067a363550
commit f0a614d4f0
6 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,2 +1,3 @@
node_modules node_modules
dist/ dist/
dev-dist/

5
index.html
View file

@ -2,8 +2,11 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Tutu</title> <title>Tutu</title>
<link rel="stylesheet" href="/src/App.css" />
<script src="/src/index.tsx" type="module"></script> <script src="/src/index.tsx" type="module"></script>
</head> </head>
<body> <body>

5
src/App.css
View file

@ -1,5 +1,10 @@
:root { :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); background-color: var(--tutu-color-surface, transparent);
overscroll-behavior-block: contain;
} }
.custom-emoji { .custom-emoji {

1
src/App.tsx
View file

@ -13,7 +13,6 @@ import {
createMastoClientFor, createMastoClientFor,
type Session, type Session,
} from "./masto/clients.js"; } from "./masto/clients.js";
import "./App.css";
import { $accounts } from "./accounts/stores.js"; import { $accounts } from "./accounts/stores.js";
import { useStore } from "@nanostores/solid"; import { useStore } from "@nanostores/solid";

2
src/settings/Settings.tsx
View file

@ -42,7 +42,7 @@ const Settings: ParentComponent = () => {
} }
.setting-list { .setting-list {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 16px);
} }
`; `;
return ( return (

10
src/timelines/Home.tsx
View file

@ -122,7 +122,7 @@ const TimelinePanel: Component<{
<div <div
style={{ style={{
display: "flex", display: "flex",
padding: "20px 0", padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
"align-items": "center", "align-items": "center",
"justify-content": "center", "justify-content": "center",
}} }}
@ -136,7 +136,7 @@ const TimelinePanel: Component<{
<div <div
style={{ style={{
display: "flex", display: "flex",
padding: "20px 0", padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
"align-items": "center", "align-items": "center",
"justify-content": "center", "justify-content": "center",
}} }}
@ -239,8 +239,6 @@ const Home: ParentComponent = (props) => {
max-width: 560px; max-width: 560px;
height: 100%; height: 100%;
padding: 40px 16px; 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; scroll-snap-align: center;
@media (max-width: 600px) { @media (max-width: 600px) {
@ -257,6 +255,8 @@ const Home: ParentComponent = (props) => {
scroll-snap-stop: always; scroll-snap-stop: always;
height: calc(100vh - var(--scaffold-topbar-height, 0px)); height: calc(100vh - var(--scaffold-topbar-height, 0px));
height: calc(100dvh - 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) { @media (max-width: 600px) {
grid-auto-columns: 100%; grid-auto-columns: 100%;
@ -269,7 +269,7 @@ const Home: ParentComponent = (props) => {
<Scaffold <Scaffold
topbar={ topbar={
<AppBar position="static"> <AppBar position="static">
<Toolbar variant="dense" class="responsive"> <Toolbar variant="dense" class="responsive" sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}>
<Tabs onFocusChanged={setCurrentFocusOn} offset={panelOffset()}> <Tabs onFocusChanged={setCurrentFocusOn} offset={panelOffset()}>
<Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}> <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
Home Home