Home Explore Help
Register Sign In
Apq
/
logseq
mirror of https://github.com/logseq/logseq.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

fix(mobile): safe area

Tienson Qin 5 days ago
parent
a02c9d3142
commit
892c6c32e7
10 changed files with 22 additions and 29 deletions
Split View Show Diff Stats
  1. 1 1
      resources/mobile/index.html
  2. 2 1
      src/main/frontend/components/repo.cljs
  3. 4 8
      src/main/mobile/components/app.cljs
  4. 8 9
      src/main/mobile/components/app.css
  5. 1 1
      src/main/mobile/components/favorites.cljs
  6. 1 2
      src/main/mobile/components/graphs.cljs
  7. 3 4
      src/main/mobile/components/header.cljs
  8. 1 1
      src/main/mobile/components/search.cljs
  9. 0 1
      src/main/mobile/deeplink.cljs
  10. 1 1
      src/main/mobile/routes.cljs

+ 1 - 1
resources/mobile/index.html
View File 

@@ -2,7 +2,7 @@
 
 <html lang="en" data-color="logseq">
 
 <head>
 
     <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover, user-scalable=no">
 
     <link href="./css/style.css" rel="stylesheet" type="text/css">
 
     <title>Logseq: A privacy-first platform for knowledge management and collaboration</title>
 
 </head>

+ 2 - 1
src/main/frontend/components/repo.cljs
View File 

@@ -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

+ 4 - 8
src/main/mobile/components/app.cljs
View File 

@@ -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")}

+ 8 - 9
src/main/mobile/components/app.css
View File 

@@ -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 {

+ 1 - 1
src/main/mobile/components/favorites.cljs
View File 

@@ -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)]])

+ 1 - 2
src/main/mobile/components/graphs.cljs
View File 

@@ -6,5 +6,4 @@
 
 (rum/defc page < rum/reactive
 
   []
 
   [:div.app-index-graphs
 
-   [:div.mt-8
 
-    (repo/repos-cp)]])
 
+   (repo/repos-cp)])

+ 3 - 4
src/main/mobile/components/header.cljs
View File 

@@ -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

+ 1 - 1
src/main/mobile/components/search.cljs
View File 

@@ -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

+ 0 - 1
src/main/mobile/deeplink.cljs
View File 

@@ -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]

+ 1 - 1
src/main/mobile/routes.cljs
View File 

@@ -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