+
+
+
- {{ scope.label }}
- {{ scope.count }}
-
@@ -48,23 +47,23 @@
+
+
+
-
@@ -203,33 +201,14 @@
{{ $t('members.bulkActions') }}
-
-
-
-
-
-
-
-
-
-
- {{ exportPreviewNames.length ? exportPreviewNames.join(', ') : $t('members.exportPreviewEmpty') }}
+
+
+
+
+
+
+
+
@@ -307,7 +286,7 @@ export default {
}
.members-header,
-.members-filter-topline,
+.members-filter-workbench,
.members-results-bar {
display: flex;
justify-content: space-between;
@@ -327,19 +306,17 @@ export default {
align-items: center;
}
-.filters-section,
.members-results-bar,
-.members-bulk-actions {
+.members-bulk-actions,
+.members-filters {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background: var(--background-light);
padding: 0.85rem;
}
-.filters-section,
.members-results-bar {
- padding-top: 0.7rem;
- padding-bottom: 0.7rem;
+ padding: 0.6rem 0.75rem;
}
.members-results-hint {
@@ -365,12 +342,17 @@ export default {
}
.member-search-group {
- flex: 1 1 18rem;
+ flex: 1 1 20rem;
}
.member-search-input,
.filter-select {
min-width: 11rem;
+ min-height: 2.25rem;
+}
+
+.member-search-input {
+ width: 100%;
}
.age-range-group {
@@ -433,38 +415,54 @@ export default {
color: var(--primary-strong);
}
-.members-filter-topline-compact {
- align-items: center;
+.members-filter-workbench {
+ display: grid;
+ grid-template-columns: minmax(20rem, 1fr) minmax(12rem, 15rem);
+ align-items: flex-end;
+ gap: 0.45rem 0.8rem;
}
.members-quick-filter-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
- min-width: 16rem;
+ flex: 0 1 15rem;
+ min-width: 12rem;
}
-.members-advanced-filters {
- margin-top: 0.75rem;
- border-top: 1px solid var(--border-color);
- padding-top: 0.75rem;
+.members-scope-buttons {
+ grid-column: 1 / -1;
+ gap: 0.4rem;
+ padding-bottom: 0.05rem;
}
-.members-advanced-filters summary {
+.members-filters {
+ padding: 0.55rem 0.75rem;
+}
+
+.members-filters summary {
cursor: pointer;
font-weight: 600;
color: var(--text-primary);
user-select: none;
+ font-size: 0.82rem;
}
-.members-advanced-filters .filter-controls {
- margin-top: 0.85rem;
+.members-filters[open] .members-filter-workbench {
+ margin-top: 0.6rem;
+}
+
+.members-filters[open] .filter-controls {
+ margin-top: 0.55rem;
+ padding-top: 0.55rem;
+ border-top: 1px solid var(--border-color);
}
.members-results-summary {
display: flex;
- flex-direction: column;
- gap: 0.45rem;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.35rem 0.6rem;
}
.members-results-stats {
@@ -489,19 +487,18 @@ export default {
font-weight: 600;
color: var(--text-primary);
user-select: none;
+ font-size: 0.82rem;
}
.members-bulk-actions-grid {
- display: flex;
- flex-wrap: wrap;
- gap: 0.6rem;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 0.55rem;
margin-top: 0.85rem;
}
-.members-bulk-preview {
- margin-top: 0.75rem;
- color: var(--text-muted);
- font-size: 0.82rem;
+.members-bulk-actions-grid > button {
+ width: 100%;
}
@media (max-width: 900px) {
@@ -510,17 +507,33 @@ export default {
align-items: stretch;
}
+ .members-filter-workbench {
+ display: flex;
+ align-items: stretch;
+ }
+
+ .member-search-group-primary {
+ flex-basis: 100%;
+ }
+
+ .members-scope-buttons {
+ flex: 1 1 100%;
+ }
+
.action-buttons,
.filter-controls,
.members-results-actions {
width: 100%;
}
- .action-buttons > button,
- .members-bulk-actions-grid > button {
+ .action-buttons > button {
flex: 1 1 14rem;
}
+ .members-bulk-actions-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
.members-results-actions {
justify-content: flex-start;
}
@@ -536,9 +549,9 @@ export default {
gap: 0.85rem;
}
- .filters-section,
.members-results-bar,
- .members-bulk-actions {
+ .members-bulk-actions,
+ .members-filters {
padding: 0.75rem;
}
@@ -547,6 +560,10 @@ export default {
justify-content: space-between;
}
+ .members-bulk-actions-grid {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
.member-search-group,
.members-sort-group,
.filter-group,
@@ -594,7 +611,6 @@ export default {
}
.action-buttons > button,
- .members-bulk-actions-grid > button,
.btn-clear-filters {
width: 100%;
flex: 1 1 100%;
diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 677f66de..5f808a87 100755
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -4667,8 +4667,9 @@ h3 {
.columns {
display: flex;
- justify-content: space-between;
- width: calc(100% - 1em);
+ align-items: flex-start;
+ gap: clamp(1rem, 1.5vw, 1.5rem);
+ width: 100%;
overflow: visible;
height: 100%;
}
@@ -4711,7 +4712,8 @@ h3 {
}
.column:first-child {
- flex: 1;
+ flex: 1 1 0;
+ min-width: 0;
overflow: visible;
height: 100%;
justify-self: start;
@@ -4720,6 +4722,8 @@ h3 {
}
.column:last-child {
+ flex: 0 1 clamp(19rem, 25vw, 25rem);
+ min-width: 0;
overflow: auto;
}