Make footer fixed in new form

client/src/components/content-block-form/ContentBlockForm.vue

@@ -95,9 +95,10 @@
           @click="addBlock(outer)"
         />
       </div>
-
+    </div><!-- -->
     <!-- Save and Cancel buttons -->
     <footer class="content-block-form__footer">
+      <div class="content-block-form__buttons">
         <button
           :disabled="!isValid"
           class="button button--primary"
@@ -109,8 +110,8 @@
           class="button"
           @click="$emit('back')"
         >Abbrechen</a>
+      </div>
     </footer>
-    </div><!-- -->
   </div>
 </template>
 
@@ -307,15 +308,32 @@
   };
 </script>
 
+<style lang="scss">
+  @import '~styles/helpers';
+  // override parent page properties
+  .layout--no-scroll {
+    padding-bottom: 20px;
+    height: 100vh;
+    overflow-y: hidden;
+    box-sizing: border-box;
+
+    .module-page {
+      height: 100vh;
+      grid-template-rows: 60px 1fr;
+      padding-bottom: $small-spacing;
+      box-sizing: border-box;
+    }
+  }
+</style>
+
 <style scoped lang="scss">
   @import '~styles/helpers';
 
   .content-block-form {
-    width: 800px;
     max-width: 100%;
     display: grid;
-    grid-template-columns: 800px;
-    grid-template-rows: 1fr auto;
+    grid-template-columns: 100vw;
+    grid-template-rows:  85vh 80px;
     grid-template-areas:
       'content'
       'footer';
@@ -352,11 +370,28 @@
       overflow-x: visible;
       overflow-y: auto;
       padding: 10px;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+
+      & > * { // we make an exception and use a wildcard here
+        width: 800px;
+        max-width: 100vw;
+        box-sizing: border-box;
+      }
     }
 
     &__footer {
+      padding: $medium-spacing 0;
+      border-top: 1px solid $color-silver;
       margin-top: auto;
       grid-area: footer;
+      justify-content: center;
+      display: flex;
+    }
+
+    &__buttons {
+      width: 800px;
     }
   }
 </style>

client/src/layouts/DefaultLayout.vue

@@ -45,7 +45,15 @@
       },
       specialContainerClass() {
         let cls = this.$store.state.specialContainerClass;
-        return [cls ? `layout--${cls}` : '', {'skillbox--show-filter': this.showFilter}];
+        let metaClass = this.$route.meta.pageClass;
+        let classes = [{'skillbox--show-filter': this.showFilter}];
+        if(cls) {
+         classes.push(`layout--${cls}`);
+        }
+        if(metaClass) {
+          classes.push(`layout--${metaClass}`);
+        }
+        return classes;
       },
       enableFooter() {
         return enableFooter() && (!this.$route.meta || !this.$route.meta.hideFooter);

client/src/router/module.routes.js

@@ -1,12 +1,13 @@
 import {
+  CREATE_CONTENT_BLOCK_AFTER_PAGE,
+  CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
+  EDIT_CONTENT_BLOCK_PAGE,
   MODULE_PAGE,
   MODULE_SETTINGS_PAGE,
   SNAPSHOT_DETAIL,
   SNAPSHOT_LIST,
   SUBMISSIONS_PAGE,
   VISIBILITY_PAGE,
-  CREATE_CONTENT_BLOCK_AFTER_PAGE,
-  CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE, EDIT_CONTENT_BLOCK_PAGE,
 } from '@/router/module.names';
 import {LAYOUT_SIMPLE} from '@/router/core.constants';
 import createContentBlock from '@/pages/createContentBlock';
@@ -24,12 +25,13 @@ const contentBlockFormMeta = {
   // layout: LAYOUT_SIMPLE,
   hideFooter: true,
   hideHeader: true,
-    showSubNavigation: true
+  showSubNavigation: true,
+  pageClass: 'no-scroll',
 };
 const createContentBlockRouteFragment = {
   component: createContentBlock,
   meta: contentBlockFormMeta,
-  props: true
+  props: true,
 };
 
 export default [
@@ -93,7 +95,7 @@ export default [
         meta: contentBlockFormMeta,
         props: true,
         component: editContentBlock,
-        name: EDIT_CONTENT_BLOCK_PAGE
+        name: EDIT_CONTENT_BLOCK_PAGE,
       },
       {
         ...createContentBlockRouteFragment,
@@ -104,7 +106,7 @@ export default [
         ...createContentBlockRouteFragment,
         path: 'add-under-parent/:parent',
         name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
-      }
+      },
     ],
   },
 ];