Просмотр исходного кода

fix(iPhone): remove extra top padding on landscape mode

close https://github.com/logseq/logseq/issues/3675
leizhe 4 лет назад
Родитель
Сommit
133d72e4c0

+ 44 - 8
src/main/frontend/components/header.css

@@ -182,11 +182,7 @@ a.button {
 }
 
 html.is-ios.is-safari {
-  
-  #main-container {
-    padding-top: 20px;
-  }
-
+    
   .cp__header {
     position: fixed !important;
     background-color: var(--ls-primary-background-color);
@@ -201,6 +197,10 @@ html.is-native-iphone,
 html.is-native-iphone-without-notch,
 html.is-native-ipad {
 
+    #main-container {
+        padding-top: 20px;
+    }
+    
     .cp__header > .r {
         display: flex;
     }
@@ -257,10 +257,46 @@ html.is-native-ipad {
   }
 
 html.is-native-iphone {
-  --ls-headbar-inner-top-padding: 36px;
+    --ls-headbar-inner-top-padding: 36px;
+
+    #main-container {
+        padding-top: 75px;
+    }
+
+    @media (orientation: landscape) {
+        --ls-headbar-inner-top-padding: 8px;
+        --ls-headbar-height: 2.5rem;
+
+        .cp__header {
+            @apply shadow z-10;
+        }
+
+        #main-container {
+            padding-top: 20px;
+        }
+        
+        #main-content{
+            padding-top: 0px;
+        }
+    }
 }
 
 html.is-native-iphone-without-notch {
-    --ls-headbar-inner-top-padding: 10px;
-    --ls-headbar-height: 3rem;
+    
+    --ls-headbar-inner-top-padding: 15px;
+    --ls-headbar-height: 2.5rem;
+
+    @media (orientation: landscape) {
+
+        --ls-headbar-inner-top-padding: 0px;
+        --ls-headbar-height: 2.5rem;
+     
+        .cp__header {
+            @apply shadow z-10;
+        }
+
+        #main-container {
+            padding-top: 20px;
+        }
+    }
 }

+ 1 - 3
src/main/frontend/components/sidebar.cljs

@@ -309,8 +309,7 @@
         mobile? (util/mobile?)]
     (rum/with-context [[t] i18n/*tongue-context*]
       [:div#main-content.cp__sidebar-main-layout.flex-1.flex
-       {:class (util/classnames [{:is-left-sidebar-open left-sidebar-open?}])
-        :style {:padding-top (ui/main-content-top-padding)}}
+       {:class (util/classnames [{:is-left-sidebar-open left-sidebar-open?}])}
 
        ;; desktop left sidebar layout
        (left-sidebar {:left-sidebar-open? left-sidebar-open?
@@ -539,7 +538,6 @@
                                    :ls-right-sidebar-open sidebar-open?}])}
 
         [:div.#app-container
-         {:style {:padding-top (ui/main-content-top-padding)}}
          [:div#left-container
           {:class (if (state/sub :ui/sidebar-open?) "overflow-hidden" "w-full")}
           (header/header {:open-fn        open-fn

+ 0 - 12
src/main/frontend/ui.cljs

@@ -38,18 +38,6 @@
 (def Tippy (r/adapt-class (gobj/get react-tippy "Tooltip")))
 (def ReactTweetEmbed (r/adapt-class react-tweet-embed))
 
-(defn main-content-top-padding
-  []
-  (cond
-    (mobile-util/native-iphone?)
-    (- (mobile-util/get-idevice-statusbar-height) 10)
-
-    (mobile-util/native-ipad?)
-    15
-
-    :else
-    0))
-
 (defn reset-ios-whole-page-offset!
   []
   (and (util/ios?)