diff --git a/src/main/frontend/mobile/index.css b/src/main/frontend/mobile/index.css index bf6d519b65..2146b65d96 100644 --- a/src/main/frontend/mobile/index.css +++ b/src/main/frontend/mobile/index.css @@ -26,15 +26,13 @@ } #mobile-editor-toolbar { - @apply fixed -bottom-1 left-0 w-full z-[99999] flex justify-between bg-gray-100 border-t border-gray-200 + @apply absolute bottom-0 left-0 w-full z-[99999] flex justify-between bg-gray-100 border-t border-gray-200 dark:border-gray-800 dark:bg-[#222]; - /* will-change: transform; transform: translateY(calc(-1 * var(--ls-native-kb-height, 0))); opacity: var(--ls-native-toolbar-opacity, 0); transition: transform 250ms ease-out, opacity 50ms ease-out; - */ button { @apply flex items-center py-2 px-2 opacity-95; diff --git a/src/main/mobile/components/app.cljs b/src/main/mobile/components/app.cljs index 973a211648..fa6c54c2b4 100644 --- a/src/main/mobile/components/app.cljs +++ b/src/main/mobile/components/app.cljs @@ -143,6 +143,17 @@ (some-> js/window.externalsjs (.settleStatusBar))) [current-repo])) +(defn use-screen-size-effects! + [] + (hooks/use-effect! + (fn [] + (let [handle-size! (fn [] + (.setProperty (.-style js/document.body) "--ls-full-screen-height" (str js/window.screen.height "px")))] + (handle-size!) + (.addEventListener js/window "orientationchange" handle-size!) + #(.removeEventListener js/window "orientationchange" handle-size!))) + [])) + (rum/defc journal-calendar-btn [] (shui/button @@ -174,14 +185,15 @@ (let [[tab] (mobile-state/use-tab) *home (rum/use-ref nil) *search-page (rum/use-ref nil)] + (use-screen-size-effects!) (use-theme-effects! current-repo) (silkhq/depth-sheet-stack {:as-child true} (silkhq/depth-sheet-scenery-outlets (silkhq/scroll {:as-child true} (silkhq/scroll-view - {:class "silk-scroll-view" + {:class "app-silk-index-scroll-view" :pageScroll true - :nativePageScrollReplacement true} + :nativePageScrollReplacement false} (silkhq/scroll-content {:class "app-silk-index-scroll-content"} [:div.app-silk-index-container diff --git a/src/main/mobile/components/app.css b/src/main/mobile/components/app.css index 4226508aa6..c33ab0582a 100644 --- a/src/main/mobile/components/app.css +++ b/src/main/mobile/components/app.css @@ -20,15 +20,9 @@ html.is-native-android { } #mobile-editor-toolbar { - @apply opacity-0 delay-100; - bottom: calc(var(--safe-area-inset-bottom) - 2px); } html.has-mobile-keyboard { - .app-silk-tabs { - display: none; - } - #mobile-editor-toolbar { @apply opacity-100; } @@ -50,6 +44,14 @@ html { } } +body { + position: relative; + + .SheetWithDepth-stackSceneryContainer, > .SheetWithDepth-view { + height: var(--ls-full-screen-height, "auto"); + } +} + ul { @apply !list-disc ml-1 mt-2 list-inside; @@ -62,7 +64,6 @@ ul { @apply bg-gray-01; } - .pswp__top-bar { @apply top-8; } @@ -230,8 +231,6 @@ ul { .app-silk-sheet-scroll-content { @apply flex flex-col items-center; - - } .BottomSheet-bleedingBackground, @@ -255,6 +254,13 @@ ul { display: grid; } +html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view { + & > div:first-child { + height: var(--ls-full-screen-height, "auto") !important; + overflow-y: auto !important; + } +} + .app-silk-index-container { @apply p-4 flex flex-col gap-3 bg-gray-01; @@ -300,11 +306,11 @@ ul { } .app-silk-tabs { - @apply flex border-t overflow-hidden - bg-gray-02 fixed left-0 bottom-0 w-full z-[1] dark:bg-gray-01; + @apply flex border-t overflow-hidden select-none + bg-gray-02 absolute left-0 -bottom-0 w-full z-[1] dark:bg-gray-01; - padding-top: 4px; - padding-bottom: calc(env(safe-area-inset-bottom) + 20px); + padding-top: 6px; + padding-bottom: calc(env(safe-area-inset-bottom) + 12px); > .as-item { @apply flex flex-1 flex-col items-center pb-1 transition-opacity; diff --git a/src/main/mobile/components/demos.cljs b/src/main/mobile/components/demos.cljs index 67b969af87..38d0f49662 100644 --- a/src/main/mobile/components/demos.cljs +++ b/src/main/mobile/components/demos.cljs @@ -18,6 +18,7 @@ {:class "app-silk-scroll-content"} [:div.app-silk-scroll-content-inner [:h1.my-4.text-3xl.font-semibold "hello silk depth view"] + (shui/input) (when (not nested?) (silkhq/depth-sheet (silkhq/depth-sheet-trigger diff --git a/src/main/mobile/components/editor_toolbar.cljs b/src/main/mobile/components/editor_toolbar.cljs index 84b4569b19..b0f3e9c47c 100644 --- a/src/main/mobile/components/editor_toolbar.cljs +++ b/src/main/mobile/components/editor_toolbar.cljs @@ -77,6 +77,7 @@ (= "app-keep-keyboard-open-input" (some-> js/document.activeElement (.-id))))) (let [commands' (commands)] [:div#mobile-editor-toolbar + {:on-click #(util/stop %)} [:div.toolbar-commands ;; (command (editor-handler/move-up-down true) {:icon "arrow-bar-to-up"}) ;; (command (editor-handler/move-up-down false) {:icon "arrow-bar-to-down"}) diff --git a/src/main/mobile/components/modal.cljs b/src/main/mobile/components/modal.cljs index bf48729c9b..1ade3d1ad0 100644 --- a/src/main/mobile/components/modal.cljs +++ b/src/main/mobile/components/modal.cljs @@ -41,8 +41,7 @@ {:class "app-silk-sheet-scroll-content"} (silkhq/scroll {:as-child true} (silkhq/scroll-view - {:class "app-silk-scroll-view" - :scrollGestureTrap {:yEnd true}} + {:class "app-silk-scroll-view"} (silkhq/scroll-content {:class "app-silk-scroll-content"} [:div.app-silk-scroll-content-inner