Fix assessments tab height

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue

@@ -13,6 +13,7 @@
     >
       <VCard class="edit-modal-wrapper">
         <Uploader
+          class="uploader-container"
           allowMultiple
           displayOnly
           :uploadingHandler="createNodesFromUploads"
@@ -96,7 +97,10 @@
             </ResizableNavigationDrawer>
 
             <!-- Main editing area -->
-            <VContent>
+            <VContent
+              class="edit-modal-content"
+              :class="{ 'has-bottom-bar': showBottomBar }"
+            >
               <VLayout
                 v-if="loadError"
                 align-center
@@ -126,7 +130,7 @@
           </template>
         </Uploader>
       </VCard>
-      <BottomBar v-if="!loading && !loadError && !showFileUploadDefault">
+      <BottomBar v-if="showBottomBar">
         <FileStorage
           v-if="showStorage"
           class="mx-2"
@@ -311,6 +315,9 @@
       showFileUploadDefault() {
         return this.uploadMode && !this.nodeIds.length;
       },
+      showBottomBar() {
+        return !this.loading && !this.loadError && !this.showFileUploadDefault;
+      },
       nodeIds() {
         return (this.detailNodeIds && this.detailNodeIds.split(',')) || [];
       },
@@ -656,6 +663,8 @@
 
 <style lang="scss" scoped>
 
+  @import '../../../shared/styles/variables';
+
   ::v-deep .v-toolbar__extension {
     padding: 0;
 
@@ -673,7 +682,6 @@
   }
 
   ::v-deep .v-content__wrap {
-    max-height: calc(100vh - 128px);
     overflow-y: auto;
   }
 
@@ -690,4 +698,17 @@
     z-index: 5 !important;
   }
 
+  .edit-modal-content {
+    height: 100%;
+
+    &.has-bottom-bar {
+      // Reserve room for the fixed BottomBar
+      padding-bottom: $bottom-bar-height !important;
+    }
+  }
+
+  .uploader-container {
+    height: 100%;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue

@@ -24,8 +24,11 @@
         </VFlex>
       </VLayout>
     </VContainer>
-    <VLayout v-else>
-      <VFlex grow>
+    <div
+      v-else
+      class="edit-view-layout-wrapper"
+    >
+      <div class="edit-view-layout">
         <ToolBar
           v-if="showTabs"
           :flat="!tabsElevated"
@@ -116,6 +119,7 @@
         </ToolBar>
         <VContainer
           fluid
+          class="tab-content"
           :style="questionsTabStyles"
         >
           <VTabsItems v-model="currentTab">
@@ -174,8 +178,8 @@
             </VTabItem>
           </VTabsItems>
         </VContainer>
-      </VFlex>
-    </VLayout>
+      </div>
+    </div>
   </VContainer>
 
 </template>
@@ -441,10 +445,26 @@
     z-index: 5;
   }
 
+  .edit-view-layout-wrapper {
+    height: 100%;
+  }
+
+  .edit-view-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
   .container {
     width: unset;
   }
 
+  .tab-content {
+    // Override Vuetify's default margin for VContainer, which is not needed in this layout.
+    margin-right: 0;
+    margin-left: 0;
+  }
+
   .v-alert {
     padding: 10px;
     margin: 15px;
@@ -473,7 +493,7 @@
 
   .wrapper {
     min-width: 100%;
-    max-height: inherit;
+    height: 100%;
     overflow: auto;
   }
 

contentcuration/contentcuration/frontend/shared/styles/variables.scss

@@ -0,0 +1,6 @@
+// Shared SCSS variables. Import this partial wherever a value needs to stay in
+// sync across components.
+
+// Height of the fixed BottomBar. Content that sits behind the bar reserves the
+// same amount of room for it.
+$bottom-bar-height: 64px;

contentcuration/contentcuration/frontend/shared/views/BottomBar.vue

@@ -36,6 +36,8 @@
 
 <style lang="scss" scoped>
 
+  @import '../styles/variables';
+
   .bottom-bar {
     position: fixed;
     bottom: 0;
@@ -44,7 +46,10 @@
     display: flex;
     align-items: center;
     width: 100%;
-    height: 64px;
+    // This value has impact on other modules that depend on it, if you need to change it,
+    // change the variable value instead, so that all modules that depend on it are
+    // updated accordingly.
+    height: $bottom-bar-height;
   }
 
 </style>