Merge pull request #5112 from pmattmann/feature/picasso-size

Feature / Picasso full size
ecamp · May 4, 2024 · d8108f6 · d8108f6
2 parents 0cc208a + 8512791
commit d8108f6
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 3 deletions.
diff --git a/frontend/src/components/program/ScheduleEntries.vue b/frontend/src/components/program/ScheduleEntries.vue
@@ -114,7 +114,7 @@ export default {
   position: fixed;
   bottom: calc(16px + 56px + env(safe-area-inset-bottom)) !important;
   @media #{map-get($display-breakpoints, 'md-and-up')} {
-    bottom: calc(16px + 36px + env(safe-area-inset-bottom)) !important;
+    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
   }
 }
 </style>
diff --git a/frontend/src/components/program/ScheduleEntryFilters.vue b/frontend/src/components/program/ScheduleEntryFilters.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="d-flex flex-wrap items-baseline" style="overflow-y: auto; gap: 10px">
+  <div
+    v-resizeobserver:0.immediate="onResize"
+    class="d-flex flex-wrap items-baseline"
+    style="overflow-y: auto; gap: 10px"
+  >
     <BooleanFilter
       v-if="loadingEndpoints !== true && loadingEndpoints.campCollaborations !== true"
       v-model="showOnlyMyActivities"
@@ -245,6 +249,9 @@ export default {
       this.value.responsible = []
       this.value.progressLabel = []
     },
+    onResize({ height }) {
+      this.$emit('height-changed', height)
+    },
   },
 }
 </script>

diff --git a/frontend/src/components/program/picasso/Picasso.vue b/frontend/src/components/program/picasso/Picasso.vue
@@ -382,7 +382,7 @@ export default {
   }
 
   @media #{map-get($display-breakpoints, 'md-and-up')} {
-    height: calc(100vh - 168px);
+    height: calc(100vh - 136px - var(--schedule-entry-filters-height));
   }
 
   :deep {

diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
@@ -90,6 +90,7 @@ Show all activity schedule entries of a single period.
       class="ec-content-card__toolbar--border pb-4 justify-center"
       :loading-endpoints="loadingEndpoints"
       :camp="camp"
+      @height-changed="scheduleEntryFiltersHeightChanged"
     />
     <template v-if="loading">
       <v-skeleton-loader type="table" />
@@ -224,6 +225,10 @@ export default {
     },
   },
   watch: {
+    openFilter: {
+      immediate: true,
+      handler: 'openFilterChanged',
+    },
     'filter.category': 'persistRouterState',
     'filter.responsible': 'persistRouterState',
     'filter.progressLabel': 'persistRouterState',
@@ -283,6 +288,21 @@ export default {
       if (filterAndQueryAreEqual(query, this.$route.query)) return
       this.$router.replace({ query }).catch((err) => console.warn(err))
     },
+    openFilterChanged(openFilter) {
+      if (!openFilter) {
+        this.scheduleEntryFiltersHeightChanged(0)
+      }
+    },
+    scheduleEntryFiltersHeightChanged(h) {
+      const root = document.querySelector(':root')
+      root.style.setProperty('--schedule-entry-filters-height', `${h}px`)
+    },
   },
 }
 </script>
+
+<style>
+:root {
+  --schedule-entry-filters-height: 0px;
+}
+</style>