enhance(ui): make consistent ux for headbar of native ios on wide scr…

…een device (iPad)
logseq · Dec 21, 2021 · 9908e91 · 9908e91
1 parent 446671a
commit 9908e91
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/src/main/frontend/components/header.css b/src/main/frontend/components/header.css
@@ -189,10 +189,59 @@ html.is-ios.is-safari {
   }
 }
 
-html.is-native-ios {
+html.is-ios {
   --ls-headbar-inner-top-padding: 36px;
 
   .cp__header > .r {
     display: flex;
   }
+
+  @screen sm {
+    --ls-headbar-inner-top-padding: 0px;
+    --ls-headbar-height: 4rem;
+
+    .cp__header {
+      background-color: transparent !important;
+      display: flex;
+      width: 100%;
+
+      > .l {
+        background-color: var(--ls-primary-background-color);
+        padding-top: 20px;
+      }
+
+      > .r {
+        flex: 1;
+        background-color: var(--ls-primary-background-color);
+        height: 100%;
+        padding-top: 20px;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    }
+
+    .ls-left-sidebar-open {
+      .cp__header {
+        > .l {
+          background-color: transparent;
+        }
+      }
+    }
+
+    .ls-right-sidebar-open {
+     .cp__header {
+       width: calc(100% - var(--ls-right-sidebar-width));
+     }
+    }
+
+    .left-sidebar-inner  {
+      > .wrap {
+        padding-top: 70px;
+      }
+    }
+
+    .cp__right-sidebar {
+      margin-top: 8px;
+    }
+  }
 }
diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs
@@ -534,7 +534,8 @@
                          (util/fix-open-external-with-shift! e))}
 
        [:div.theme-inner
-        {:class (util/classnames [{:ls-left-sidebar-open left-sidebar-open?}])}
+        {:class (util/classnames [{:ls-left-sidebar-open left-sidebar-open?
+                                   :ls-right-sidebar-open sidebar-open?}])}
 
         [:div.#app-container
          {:style {:padding-top (ui/main-content-top-padding)}}