Merge branch '1002-fixed-bar-for-iterator' into 'master'

Enable fixed header in CRUDIterator

See merge request !1456

aleksis/core/frontend/components/generic/CRUDIterator.vue

@@ -57,6 +57,10 @@
           <slot name="additionalActions" :attrs="attrs" :on="on" />
         </template>
       </c-r-u-d-bar>
+      <div
+        v-if="fixedHeader"
+        class="c-r-u-d-iterator-fixed-header-placeholder"
+      />
     </template>
 
     <template #default="slotProps">
@@ -136,6 +140,15 @@ export default {
         ? this.$attrs.headers.filter((header) => !header.disableEdit)
         : [];
     },
+    fixedHeaderTop() {
+      return `${this.$vuetify.application.top}px`;
+    },
+    fixedHeaderWidth() {
+      return `calc(100vw - ${this.$vuetify.application.left}px - ${this.$vuetify.application.right}px)`;
+    },
+    fixedHeaderLeft() {
+      return `${this.$vuetify.application.left}px`;
+    },
   },
   methods: {
     handleItems(items) {
@@ -168,9 +181,17 @@ export default {
 
 <style lang="scss">
 .c-r-u-d-iterator-fixed-header {
-  position: sticky;
-  /* TODO: This should use the v-toolbar height instead. But it is not accessible here. */
-  top: 64px;
+  position: fixed;
+  width: v-bind(fixedHeaderWidth);
+  left: v-bind(fixedHeaderLeft);
+  top: v-bind(fixedHeaderTop);
   z-index: 3;
 }
+
+.c-r-u-d-iterator-fixed-header-placeholder {
+  height: v-bind(fixedHeaderTop);
+  position: sticky;
+  top: v-bind(fixedHeaderTop);
+  z-index: 2;
+}
 </style>