feat: enhance mobile vault filter UI and improve styling for better usability

This commit is contained in:
shuaiplus
2026-06-16 21:17:43 +08:00
parent d5c2ab2b0f
commit 7e0406f751
13 changed files with 445 additions and 153 deletions
+48 -4
View File
@@ -302,10 +302,15 @@
}
.list-head {
@apply grid items-center gap-2;
@apply grid items-center gap-1.5;
grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.list-head.selection-mode {
@apply justify-stretch;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.list-count {
grid-column: auto;
@apply w-auto whitespace-nowrap text-xs;
@@ -316,15 +321,50 @@
}
.list-head .search-input {
@apply h-[42px] w-full min-w-0 rounded-[14px];
@apply h-[34px] w-full min-w-0 rounded-[10px] px-3 py-0 text-[13px] font-semibold;
line-height: 34px;
}
.mobile-vault-filter-row {
@apply grid min-w-0 gap-1.5;
grid-column: 1 / -1;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.list-head .duplicate-mode-head-select {
@apply h-[34px] min-w-0 w-auto max-w-full rounded-full;
@apply h-[34px] min-w-0 w-auto max-w-full rounded-[10px];
}
.list-icon-btn {
@apply w-auto min-w-0 gap-1.5 whitespace-nowrap px-3 py-0 text-[13px];
@apply h-[34px] w-auto min-w-0 gap-1.5 whitespace-nowrap rounded-[10px] px-3 py-0 text-[13px];
}
.list-head.selection-mode > .btn.small {
@apply h-[34px] min-w-0 w-full justify-center gap-1 px-2 text-[12px];
}
.list-head.selection-mode > .btn.small .btn-icon {
@apply m-0;
}
.sort-trigger {
@apply h-[34px] w-[34px] min-w-[34px] rounded-[10px];
}
.sort-trigger.sort-trigger-labeled {
@apply h-[34px] w-[34px] min-w-[34px] gap-0 px-0 text-[0];
}
.sort-trigger.sort-trigger-labeled .btn-icon {
@apply m-0;
}
.desktop-create-menu-wrap {
display: none;
}
.duplicate-mode-head-menu .mobile-vault-filter-menu {
min-width: max(100%, 190px);
}
.toolbar.actions {
@@ -346,6 +386,10 @@
@apply h-[34px] w-auto min-w-0 gap-1.5 whitespace-nowrap rounded-full px-3 py-0 text-[13px];
}
.list-count-status {
@apply mb-1 px-1;
}
.mobile-fab-wrap {
@apply fixed right-3.5 z-[45];
bottom: calc(14px + var(--mobile-tabbar-height, 70px) + env(safe-area-inset-bottom));