Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-06-22 21:50:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/styles/vault.css
+118 -4
View File
@@ -221,24 +221,110 @@ select.input.duplicate-mode-toolbar-select {
@apply h-[34px] w-auto min-w-[156px] max-w-full;
}
.duplicate-mode-head-menu {
@apply min-w-0;
}
.duplicate-mode-toolbar-select {
@apply w-auto max-w-[170px] shrink-0;
}
.list-head {
@apply mb-2 flex items-center gap-2.5;
@apply mb-1.5 flex items-center gap-2;
min-height: 34px;
}
.list-head .search-input-wrap {
.list-head.selection-mode {
@apply gap-2;
}
.list-head.selection-mode > .btn.small {
@apply min-w-0 flex-1 justify-center;
}
.list-head .search-input-wrap,
.duplicate-mode-head-menu {
@apply min-w-0 flex-auto;
}
.list-head .search-input {
@apply h-[42px];
@apply h-[34px] rounded-[10px] px-3 py-0 text-[13px] font-semibold;
line-height: 34px;
}
.list-head .btn {
@apply whitespace-nowrap;
@apply h-[34px] whitespace-nowrap rounded-[10px] px-3 py-0 text-[13px];
}
.mobile-vault-filter-row {
@apply hidden;
}
.mobile-vault-filter-control {
@apply relative min-w-0;
}
.mobile-vault-filter-trigger {
@apply flex h-[34px] w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-[10px] border px-2.5 py-0 text-left text-[13px] font-semibold;
background: var(--panel);
border-color: rgba(74, 103, 150, 0.28);
color: var(--muted-strong);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
transition:
border-color var(--dur-fast) var(--ease-smooth),
background-color var(--dur-fast) var(--ease-smooth),
color var(--dur-fast) var(--ease-smooth),
box-shadow var(--dur-fast) var(--ease-smooth);
}
.mobile-vault-filter-trigger:hover,
.mobile-vault-filter-trigger.active {
border-color: rgba(43, 102, 217, 0.46);
background: #f8fbff;
color: var(--primary-strong);
}
.mobile-vault-filter-trigger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.mobile-vault-filter-trigger-icon,
.mobile-vault-filter-item-icon {
@apply inline-flex shrink-0 items-center justify-center;
}
.mobile-vault-filter-trigger-label {
@apply min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap;
}
.mobile-vault-filter-chevron {
@apply shrink-0;
}
.mobile-vault-filter-trigger.active .mobile-vault-filter-chevron {
transform: rotate(180deg);
}
.mobile-vault-filter-menu {
@apply left-0 right-auto max-h-[280px] min-w-full overflow-auto;
min-width: max(100%, 168px);
}
.mobile-vault-filter-control:last-child .mobile-vault-filter-menu {
@apply left-auto right-0;
}
.mobile-vault-filter-item {
@apply gap-2;
}
.mobile-vault-filter-item-main {
@apply flex min-w-0 items-center gap-2;
}
.mobile-vault-filter-item-main span:last-child {
@apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
}
.list-count {
@@ -262,6 +348,10 @@ select.input.duplicate-mode-toolbar-select {
@apply w-9 min-w-9 justify-center gap-0 p-0;
}
.sort-trigger.sort-trigger-labeled {
@apply h-[34px] w-auto min-w-0 gap-1.5 rounded-[10px] px-3;
}
.sort-trigger.active {
background: #e9f1ff;
border-color: #a9c2ee;
@@ -303,6 +393,30 @@ select.input.duplicate-mode-toolbar-select {
@apply h-3.5 w-3.5 shrink-0;
}
.desktop-create-menu-wrap {
@apply shrink-0;
}
.desktop-create-trigger {
@apply h-[34px] w-[34px] min-w-[34px] gap-0 rounded-[10px] p-0 text-[0];
}
.desktop-create-trigger .btn-icon {
@apply m-0;
}
.duplicates-helper-toolbar {
@apply justify-start pb-0.5;
}
.duplicates-helper-toolbar .btn.small {
@apply h-[34px] rounded-[10px] px-3 py-0 text-[13px];
}
.list-count-status {
@apply mb-1 pl-1;
}
.list-panel {
@apply min-h-0 overflow-auto p-2;
/* Virtualized rows update top/bottom spacers while scrolling. Chrome's scroll anchoring