handling improvements

2026-08-13 12:55:31 +02:00
parent 06355552c6
commit 2c5a98e9da
3 changed files with 145 additions and 119 deletions
--- a/frontend/src/components/diary/DiaryOverviewPanels.vue
+++ b/frontend/src/components/diary/DiaryOverviewPanels.vue
@@ -193,24 +193,24 @@ export default {
 }

 .diary-toggle-body {
-  padding: 0 0.9rem 0.9rem;
+  padding: 0 0.75rem 0.75rem;
 }

 .diary-toggle-body-open {
-  padding-top: 0.9rem;
+  padding-top: 0.7rem;
 }

 .diary-workspace-header {
  display: flex;
  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  align-items: center;
+  gap: 1.25rem;
+  margin-bottom: 0;
 }

 .diary-workspace-copy h3 {
-  margin: 0.1rem 0 0.25rem;
-  font-size: 1.15rem;
+  margin: 0.05rem 0 0.15rem;
+  font-size: 1.05rem;
 }

 .diary-workspace-label {
@@ -223,28 +223,32 @@ export default {

 .diary-workspace-status {
  margin: 0;
-  font-size: 0.92rem;
+  font-size: 0.86rem;
  color: #45606f;
 }

 .diary-workspace-stats {
  display: grid;
-  grid-template-columns: repeat(6, minmax(110px, 1fr));
-  gap: 0.75rem;
-  width: min(840px, 100%);
+  grid-template-columns: repeat(4, max-content);
+  justify-content: end;
+  gap: 0.4rem;
+  width: auto;
+  max-width: 100%;
+  flex: 0 1 auto;
 }

 .diary-stat-card {
-  padding: 0.8rem 0.9rem;
-  border-radius: 8px;
+  padding: 0.4rem 0.55rem 0.45rem;
+  border-radius: 6px;
  background: #fff;
  border: 1px solid #d9e4ec;
+  white-space: nowrap;
 }

 .diary-stat-label {
  display: block;
-  margin-bottom: 0.25rem;
-  font-size: 0.76rem;
+  margin-bottom: 0.1rem;
+  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
@@ -253,7 +257,7 @@ export default {

 .diary-stat-value {
  display: block;
-  font-size: 1rem;
+  font-size: 0.9rem;
  color: #173042;
 }

@@ -312,6 +316,7 @@ export default {
  .diary-workspace-header {
    gap: 0.75rem;
    margin-bottom: 0;
+    align-items: flex-start;
  }

  .diary-workspace-copy h3 {
@@ -344,6 +349,7 @@ export default {
@media (max-width: 768px) {
  .diary-workspace-header {
    flex-direction: column;
+    align-items: stretch;
  }

  .diary-workspace-stats {
--- a/frontend/src/components/members/MembersOverviewSection.vue
+++ b/frontend/src/components/members/MembersOverviewSection.vue
@@ -19,20 +19,19 @@
            </div>
        </div>

-        <div class="filters-section">
-            <div class="members-filter-topline members-filter-topline-compact">
-                <div class="members-scope-buttons" role="tablist" :aria-label="$t('members.memberScope')">
-                    <button
-                        v-for="scope in memberScopeOptions"
-                        :key="scope.value"
-                        type="button"
-                        class="scope-chip"
-                        :class="{ 'scope-chip-active': selectedMemberScope === scope.value }"
-                        @click="$emit('update:selected-member-scope', scope.value)"
+        <details class="members-filters">
+            <summary>{{ $t('common.filter') }}</summary>
+            <div class="members-filter-workbench">
+                <div class="member-search-group member-search-group-primary">
+                    <label for="member-search-input">{{ $t('members.search') }}</label>
+                    <input
+                        id="member-search-input"
+                        :value="searchQuery"
+                        type="search"
+                        class="member-search-input"
+                        :placeholder="$t('members.searchPlaceholder')"
+                        @input="$emit('update:search-query', $event.target.value.trim())"
                    >
-                        <span class="scope-chip-label">{{ scope.label }}</span>
-                        <span class="scope-chip-count">{{ scope.count }}</span>
-                    </button>
                </div>
                <div class="members-quick-filter-group">
                    <label for="members-quick-training-group">{{ $t('members.trainingGroups') }}</label>
@@ -48,23 +47,23 @@
                        </option>
                    </select>
                </div>
+                <div class="members-scope-buttons" role="group" :aria-label="$t('members.memberScope')">
+                    <button
+                        v-for="scope in memberScopeOptions"
+                        :key="scope.value"
+                        type="button"
+                        class="scope-chip"
+                        :class="{ 'scope-chip-active': selectedMemberScope === scope.value }"
+                        @click="$emit('update:selected-member-scope', scope.value)"
+                    >
+                        <span class="scope-chip-label">{{ scope.label }}</span>
+                        <span class="scope-chip-count">{{ scope.count }}</span>
+                    </button>
+                </div>
            </div>

-            <details class="members-advanced-filters">
-                <summary>{{ $t('members.searchAndFilter') }}</summary>
-                <div class="filter-controls">
-                    <div class="member-search-group">
-                        <label for="member-search-input">{{ $t('members.search') }}</label>
-                        <input
-                            id="member-search-input"
-                            :value="searchQuery"
-                            type="search"
-                            class="member-search-input"
-                            :placeholder="$t('members.searchPlaceholder')"
-                            @input="$emit('update:search-query', $event.target.value.trim())"
-                        >
-                    </div>
-                    <div class="checkbox-group">
+            <div class="filter-controls">
+                <div class="checkbox-group">
                        <label class="checkbox-item">
                            <input
                                type="checkbox"
@@ -81,8 +80,8 @@
                            >
                            <span>{{ $t('members.showTrainingParticipationsColumn') }}</span>
                        </label>
-                    </div>
-                    <div class="filter-group">
+                </div>
+                <div class="filter-group">
                        <label>{{ $t('members.ttSeasonFilter') }}</label>
                        <select
                            :value="selectedSeasonStartYear"
@@ -94,8 +93,8 @@
                            </option>
                        </select>
                        <p class="filter-hint filter-hint-tt">{{ $t('members.ttStichtagHint') }}</p>
-                    </div>
-                    <div class="filter-group">
+                </div>
+                <div class="filter-group">
                        <label>{{ $t('members.ageGroup') }}:</label>
                        <select :value="selectedAgeGroup" class="filter-select" @change="$emit('update:selected-age-group', $event.target.value)">
                            <option value="">{{ $t('common.all') }}</option>
@@ -116,8 +115,8 @@
                            </optgroup>
                            <option value="range">{{ $t('members.ageRange') }}</option>
                        </select>
-                    </div>
-                    <div v-if="selectedAgeGroup === 'range'" class="filter-group age-range-group">
+                </div>
+                <div v-if="selectedAgeGroup === 'range'" class="filter-group age-range-group">
                        <label>{{ $t('members.ageRange') }}:</label>
                        <div class="age-range-inputs">
                            <input
@@ -140,8 +139,8 @@
                                @input="$emit('update:selected-age-to', $event.target.value)"
                            >
                        </div>
-                    </div>
-                    <div class="filter-group">
+                </div>
+                <div class="filter-group">
                        <label>{{ $t('members.gender') }}:</label>
                        <select :value="selectedGender" class="filter-select" @change="$emit('update:selected-gender', $event.target.value)">
                            <option value="">{{ $t('common.all') }}</option>
@@ -150,8 +149,8 @@
                            <option value="diverse">{{ $t('members.genderDiverse') }}</option>
                            <option value="unknown">{{ $t('members.genderUnknown') }}</option>
                        </select>
-                    </div>
-                    <div class="filter-group">
+                </div>
+                <div class="filter-group">
                        <label>{{ $t('members.lastTrainingFilter') }}</label>
                        <select
                            :value="selectedLastTrainingFilter"
@@ -164,11 +163,10 @@
                            <option value="notInTraining">{{ $t('members.lastTrainingFilterNotInTraining') }}</option>
                        </select>
                        <p class="filter-hint filter-hint-tt">{{ $t('members.lastTrainingFilterHint') }}</p>
-                    </div>
-                    <button @click="$emit('clear-filters')" class="btn-clear-filters">{{ $t('members.clearFilters') }}</button>
                </div>
-            </details>
-        </div>
+                <button @click="$emit('clear-filters')" class="btn-clear-filters">{{ $t('members.clearFilters') }}</button>
+            </div>
+        </details>

        <div class="members-results-bar">
            <div class="members-results-summary">
@@ -203,33 +201,14 @@
        <details class="members-bulk-actions">
            <summary>{{ $t('members.bulkActions') }}</summary>
            <div class="members-bulk-actions-grid">
-                <button type="button" @click="$emit('create-phone-list-for-filtered')" :disabled="visibleMembersCount === 0">
-                    {{ $t('members.phoneListForSelection') }}
-                </button>
-                <button type="button" @click="$emit('mark-filtered-forms-handed-over')" :disabled="filteredMembersWithoutFormCount === 0">
-                    {{ $t('members.markFormsForSelection') }}
-                </button>
-                <button type="button" @click="$emit('mark-filtered-as-regular')" :disabled="filteredTestMembersCount === 0">
-                    {{ $t('members.markRegularForSelection') }}
-                </button>
-                <button type="button" @click="$emit('export-filtered-members-csv')" :disabled="visibleMembersCount === 0">
-                    {{ $t('members.exportCsv') }}
-                </button>
-                <button type="button" @click="$emit('copy-filtered-phones')" :disabled="filteredMembersWithPhonesCount === 0">
-                    {{ $t('members.copyPhones') }}
-                </button>
-                <button type="button" @click="$emit('copy-filtered-emails')" :disabled="filteredMembersWithEmailsCount === 0">
-                    {{ $t('members.copyEmails') }}
-                </button>
-                <button type="button" @click="$emit('compose-email-to-filtered')" :disabled="filteredMembersWithEmailsCount === 0">
-                    {{ $t('members.composeEmail') }}
-                </button>
-                <button type="button" @click="$emit('copy-filtered-contact-summary')" :disabled="visibleMembersCount === 0">
-                    {{ $t('members.copyContactSummary') }}
-                </button>
-            </div>
-            <div class="members-bulk-preview">
-                {{ exportPreviewNames.length ? exportPreviewNames.join(', ') : $t('members.exportPreviewEmpty') }}
+                <button type="button" @click="$emit('create-phone-list-for-filtered')" :disabled="visibleMembersCount === 0">{{ $t('members.phoneListForSelection') }}</button>
+                <button type="button" @click="$emit('mark-filtered-forms-handed-over')" :disabled="filteredMembersWithoutFormCount === 0">{{ $t('members.markFormsForSelection') }}</button>
+                <button type="button" @click="$emit('mark-filtered-as-regular')" :disabled="filteredTestMembersCount === 0">{{ $t('members.markRegularForSelection') }}</button>
+                <button type="button" @click="$emit('export-filtered-members-csv')" :disabled="visibleMembersCount === 0">{{ $t('members.exportCsv') }}</button>
+                <button type="button" @click="$emit('copy-filtered-phones')" :disabled="filteredMembersWithPhonesCount === 0">{{ $t('members.copyPhones') }}</button>
+                <button type="button" @click="$emit('copy-filtered-emails')" :disabled="filteredMembersWithEmailsCount === 0">{{ $t('members.copyEmails') }}</button>
+                <button type="button" @click="$emit('compose-email-to-filtered')" :disabled="filteredMembersWithEmailsCount === 0">{{ $t('members.composeEmail') }}</button>
+                <button type="button" @click="$emit('copy-filtered-contact-summary')" :disabled="visibleMembersCount === 0">{{ $t('members.copyContactSummary') }}</button>
            </div>
        </details>
    </div>
@@ -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%;
--- 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;
 }