From 892c6c32e7b0b402b7aec74e6ef3aa341590ebda Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Sat, 6 Dec 2025 02:40:33 +0800 Subject: [PATCH] fix(mobile): safe area --- resources/mobile/index.html | 2 +- src/main/frontend/components/repo.cljs | 3 ++- src/main/mobile/components/app.cljs | 12 ++++-------- src/main/mobile/components/app.css | 17 ++++++++--------- src/main/mobile/components/favorites.cljs | 2 +- src/main/mobile/components/graphs.cljs | 3 +-- src/main/mobile/components/header.cljs | 7 +++---- src/main/mobile/components/search.cljs | 2 +- src/main/mobile/deeplink.cljs | 1 - src/main/mobile/routes.cljs | 2 +- 10 files changed, 22 insertions(+), 29 deletions(-) diff --git a/resources/mobile/index.html b/resources/mobile/index.html index be0b07a483..f773170d33 100644 --- a/resources/mobile/index.html +++ b/resources/mobile/index.html @@ -2,7 +2,7 @@ - + Logseq: A privacy-first platform for knowledge management and collaboration diff --git a/src/main/frontend/components/repo.cljs b/src/main/frontend/components/repo.cljs index acef029222..7355a708d6 100644 --- a/src/main/frontend/components/repo.cljs +++ b/src/main/frontend/components/repo.cljs @@ -227,7 +227,8 @@ (when-not (util/capacitor?) [:h1.title (t :graph/all-graphs)]) - [:div.pl-1.content.mt-8 + [:div.pl-1.content + {:class (when-not (util/mobile?) "mt-8")} (when-not (util/mobile?) [:div.flex.flex-row.my-8 [:div.mr-8 diff --git a/src/main/mobile/components/app.cljs b/src/main/mobile/components/app.cljs index e32c536874..90eea43fc6 100644 --- a/src/main/mobile/components/app.cljs +++ b/src/main/mobile/components/app.cljs @@ -31,8 +31,7 @@ (rum/defc journals [] (ui-component/classic-app-container-wrap - [:div.pt-6 - (journal/all-journals)])) + (journal/all-journals))) (rum/defc home-inner < rum/static [db-restoring?] @@ -92,8 +91,7 @@ {:did-mount (fn [state] (p/do! (editor-handler/quick-add-ensure-new-block-exists!) - ;; (editor-handler/quick-add-open-last-block!) - ) + (editor-handler/quick-add-open-last-block!)) state)} [] (quick-add/quick-add)) @@ -143,9 +141,7 @@ (when-let [element (util/app-scroll-container-node)] (common-handler/listen-to-scroll! element))) []) - [:div.h-full {:class (if (contains? #{"search"} tab) - "mt-20" - "mt-24")} + [:div.h-full (mobile-header/header current-repo tab) (main-content tab route-match)])) @@ -162,7 +158,7 @@ show-popup? (and open? content-fn) fold-button-on-right? (state/enable-fold-button-right?) route-match (state/sub :route-match)] - [:main.w-full.h-full + [:div#app-main.w-full.h-full {:class (util/classnames [{:ls-fold-button-on-right fold-button-on-right?}])} [:div.w-full.h-full {:class (when show-popup? "invisible")} diff --git a/src/main/mobile/components/app.css b/src/main/mobile/components/app.css index b32dc6e770..3b2a432b5c 100644 --- a/src/main/mobile/components/app.css +++ b/src/main/mobile/components/app.css @@ -6,21 +6,19 @@ :root { --ls-mobile-font-scale: 1; --ls-page-title-size: calc(26px * var(--ls-mobile-font-scale, 1)); - --safe-area-inset-top: 40px; - --safe-area-inset-bottom: 16px; --ls-mobile-font-size: 16px; } -html.is-native-ios { - --safe-area-inset-top: 58px; - --safe-area-inset-bottom: 24px; -} - html.is-native-ios, html.is-ios { font-size: calc(var(--ls-mobile-font-size) * var(--ls-mobile-font-scale, 1)); } +#app-main { + padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); +} + html.is-native-ios body, html.is-native-ios textarea, html.is-native-ios input, @@ -49,7 +47,7 @@ html.has-mobile-keyboard { } .app-popup, #main-content-container, #app-main-home { - padding-bottom: calc(var(--ls-native-kb-height, 0px) + 160px); + padding-bottom: calc(var(--ls-native-kb-height, 0px) + 32px); } } @@ -311,7 +309,8 @@ body, #root { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; - padding-bottom: 160px; + padding-top: 0px; + padding-bottom: 64px; } .cp__select-main, .cp__emoji-icon-picker, .ls-property-key { diff --git a/src/main/mobile/components/favorites.cljs b/src/main/mobile/components/favorites.cljs index f236738f46..87d59e915b 100644 --- a/src/main/mobile/components/favorites.cljs +++ b/src/main/mobile/components/favorites.cljs @@ -6,7 +6,7 @@ (rum/defc favorites [] [:div.left-sidebar-inner - [:div.sidebar-contents-container.mt-2 + [:div.sidebar-contents-container {:class "!gap-4"} (app-left-sidebar/sidebar-favorites) (app-left-sidebar/sidebar-recent-pages)]]) diff --git a/src/main/mobile/components/graphs.cljs b/src/main/mobile/components/graphs.cljs index ac9bc40d5b..570b858165 100644 --- a/src/main/mobile/components/graphs.cljs +++ b/src/main/mobile/components/graphs.cljs @@ -6,5 +6,4 @@ (rum/defc page < rum/reactive [] [:div.app-index-graphs - [:div.mt-8 - (repo/repos-cp)]]) + (repo/repos-cp)]) diff --git a/src/main/mobile/components/header.cljs b/src/main/mobile/components/header.cljs index 9b6841f194..82841c4d18 100644 --- a/src/main/mobile/components/header.cljs +++ b/src/main/mobile/components/header.cljs @@ -143,8 +143,7 @@ (defn- configure-native-top-bar! [repo {:keys [tab title route-name route-view sync-color favorited?]}] (when (mobile-util/native-ios?) - (let [hidden? (and (contains? #{"search"} tab) - (not= route-name :page)) + (let [hidden? false rtc-indicator? (and repo (ldb/get-graph-rtc-uuid (db/get-db)) (user-handler/logged-in?)) @@ -219,14 +218,14 @@ (:block/title block) (= tab "home") short-repo-name + (= tab "search") + "Search" :else (string/capitalize tab))] (configure-native-top-bar! current-repo {:tab tab :title title - :hidden? (and (= tab "search") - (not= route-name :page)) :route-name route-name :route-view route-view :sync-color sync-color diff --git a/src/main/mobile/components/search.cljs b/src/main/mobile/components/search.cljs index 86b736b72c..61d0135a89 100644 --- a/src/main/mobile/components/search.cljs +++ b/src/main/mobile/components/search.cljs @@ -59,7 +59,7 @@ (when (and (string/blank? input) (seq recents)) [:div [:div.px-2.font-medium.text-muted-foreground - [:div.flex.flex-item.items-center.justify-between.mt-2 + [:div.flex.flex-item.items-center.justify-between "Recent" (shui/button {:variant :text diff --git a/src/main/mobile/deeplink.cljs b/src/main/mobile/deeplink.cljs index d2a2b16f78..857475e8ee 100644 --- a/src/main/mobile/deeplink.cljs +++ b/src/main/mobile/deeplink.cljs @@ -3,7 +3,6 @@ (:require [clojure.string :as string] [frontend.config :as config] [frontend.db.async :as db-async] - [frontend.handler.editor :as editor-handler] [frontend.handler.notification :as notification] [frontend.handler.route :as route-handler] [frontend.mobile.intent :as intent] diff --git a/src/main/mobile/routes.cljs b/src/main/mobile/routes.cljs index 9423a7629d..6d917a1443 100644 --- a/src/main/mobile/routes.cljs +++ b/src/main/mobile/routes.cljs @@ -10,7 +10,7 @@ ["/page/:name" {:name :page :view (fn [route-match] - [:div.ls-mobile-page.pt-8 + [:div.ls-mobile-page (page/page-cp (assoc route-match :mobile-page? true))])}] ["/import" {:name :import