enhance(mobile): improve topbar layout

This commit is contained in:
charlie
2025-07-22 11:35:04 +08:00
parent 6bbe6f97ab
commit c8f883b5f2
3 changed files with 24 additions and 13 deletions

View File

@@ -223,13 +223,11 @@
(= tab "settings")
(assoc
:left-render (shui/button {:variant :icon :size :sm}
(shui/tabler-icon "chevron-left" {:size 22}))
:right-render [:<>
(shui/button {:variant :icon :size :sm}
(shui/tabler-icon "plus" {:size 22}))
(shui/tabler-icon "plus" {:size 23}))
(shui/button {:variant :icon :size :sm}
(shui/tabler-icon "dots" {:size 22}))])))
(shui/tabler-icon "dots" {:size 23}))])))
;; app tabs
(ui-silk/app-silk-tabs)

View File

@@ -274,7 +274,15 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
.app-silk-topbar {
@apply fixed top-0 left-0 w-full border-b bg-gray-02 dark:bg-gray-01
justify-between items-center overflow-hidden grid grid-cols-8 gap-4;
flex justify-between items-center overflow-hidden;
&[data-center-title] {
@apply grid grid-cols-8 gap-4;
> .as-left, .as-right {
@apply col-span-2;
}
}
padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
height: 48px;
@@ -285,7 +293,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
}
> .as-left, .as-right {
@apply flex items-center col-span-2 gap-2 px-2;
@apply flex items-center gap-2 px-2;
.ui__button {
@apply opacity-70 px-1;
@@ -300,9 +308,9 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
@apply justify-end;
}
> .title {
.title {
@apply font-semibold overflow-hidden text-ellipsis whitespace-nowrap col-span-4
block text-center text-lg;
block text-center text-lg pl-1 opacity-90 tracking-wide;
}
}

View File

@@ -4,11 +4,16 @@
[rum.core :as rum]))
(rum/defc app-silk-topbar
[{:keys [left-render right-render title props]}]
[:div.app-silk-topbar props
[:div.as-left (if (fn? left-render)
(left-render) left-render)]
[:strong.title title]
[{:keys [left-render right-render title props center-title?]}]
[:div.app-silk-topbar
(cond-> props
(boolean center-title?)
(assoc :data-center-title true))
[:div.as-left
(if (fn? left-render)
(left-render) left-render)
(when (not center-title?) [:span.title title])]
(when center-title? [:span.title title])
[:div.as-right (if (fn? right-render)
(right-render) right-render)]])