Merge pull request #6041 from manuelmeister/feature/ui-checklists-imp…

…rovement Fix checklist ui bugs
ecamp · Sep 29, 2024 · b267dc7 · b267dc7
2 parents 6233ac9 + 07bbbfe
commit b267dc7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/frontend/src/components/activity/content/Checklist.vue b/frontend/src/components/activity/content/Checklist.vue
@@ -5,6 +5,8 @@
         v-model="showDialog"
         icon="mdi-clipboard-list-outline"
         :title="$tc('components.activity.content.checklist.title')"
+        :cancel-action="close"
+        :cancel-visible="false"
       >
         <template #activator="{ on }">
           <button
@@ -42,7 +44,7 @@
                       >
                     </template>
                   </v-list-item-subtitle>
-                  <v-list-item-title>
+                  <v-list-item-title class="ec-checklist--item-title">
                     {{ parents.map(({ position }) => position + 1 + '.').join('')
                     }}{{ item.position + 1 }}. {{ item.text }}
                   </v-list-item-title>
@@ -257,6 +259,9 @@ export default {
       this.uncheckedItems = []
       this.dirty = false
     },
+    close() {
+      this.showDialog = false
+    },
   },
 }
 </script>
@@ -267,4 +272,8 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.ec-checklist--item-title {
+  white-space: normal;
+  line-height: 1.33;
+}
 </style>
diff --git a/frontend/src/components/checklist/SortableChecklist.vue b/frontend/src/components/checklist/SortableChecklist.vue
@@ -180,11 +180,15 @@ export default {
   padding-bottom: 6px;
   display: grid;
 }
+.e-checklist-dragarea--inner {
+  min-width: 0;
+}
 .e-checklist-dragarea.dragging:deep(.e-checklist-dragarea) {
   background: rgba(0, 130, 236, 0.15);
   padding-bottom: 0;
 }
 .e-sortable-checklist-item__add {
+  min-width: 0;
   padding-top: 2px;
   padding-bottom: 2px;
 }

diff --git a/frontend/src/components/dialog/DialogBottomSheet.vue b/frontend/src/components/dialog/DialogBottomSheet.vue
@@ -138,4 +138,12 @@ export default {
 .error-area:empty {
   display: none;
 }
+:deep(.ec-dialog-form.v-bottom-sheet.v-dialog) {
+  overflow-y: auto;
+}
+.ec-dialog-toolbar {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+}
 </style>