fix #900

Closes #900

Merge request studip/studip!858

resources/assets/stylesheets/scss/courseware.scss

@@ -404,8 +404,7 @@ $consum_ribbon_width: calc(100% - 58px);
     position: absolute;
     right: -570px;
     top: 15px;
-    height: calc(100% - 32px);
-    max-height: 760px;
+    height: 100%;
     max-width: calc(100% - 28px);
     display: flex;
     flex-flow: row;
@@ -435,6 +434,7 @@ $consum_ribbon_width: calc(100% - 58px);
 
         .cw-ribbon-tool-content-nav {
             position: sticky;
+            height: 100%;
             top: 0;
             background-color: $white;
             margin: 0;
@@ -464,6 +464,7 @@ $consum_ribbon_width: calc(100% - 58px);
 
             >.cw-ribbon-tool-content-tablist {
                 width: 100%;
+                height: 100%;
                 >.cw-tabs-nav {
                     border: none;
                     width: calc(100% - 48px);
@@ -483,9 +484,10 @@ $consum_ribbon_width: calc(100% - 58px);
                     border: none;
                     border-top: solid thin $content-color-40;
                     padding: 0;
+                    height: calc(100% - 58px);
 
                     >.cw-tab {
-                        max-height: 700px;
+                        height: calc(100% - 22px);
                         padding: 14px 8px 8px 8px;
                         position: relative;
                         overflow-y: auto;
@@ -494,6 +496,7 @@ $consum_ribbon_width: calc(100% - 58px);
                         scrollbar-color: $base-color $white;
 
                         &.cw-ribbon-tool-blockadder-tab {
+                            height: 100%;
                             overflow: hidden;
                             padding: 0;
                         }

resources/vue/components/courseware/CoursewareRibbon.vue

@@ -36,7 +36,9 @@
             <courseware-ribbon-toolbar
                 v-if="showTools"
                 :toolsActive="unfold"
+                :stickyRibbon="stickyRibbon"
                 :class="{ 'cw-ribbon-tools-sticky': stickyRibbon }"
+                :style="{ maxHeight: maxHeight + 'px' }"
                 :canEdit="canEdit"
                 @deactivate="deactivateToolbar"
             />
@@ -89,6 +91,13 @@ export default {
         breadcrumbFallback() {
             return window.outerWidth < 1200;
         },
+        maxHeight() {
+            if (this.stickyRibbon) {
+                return parseInt(window.innerHeight * 0.75);
+            } else {
+                return parseInt(Math.min(window.innerHeight * 0.75, window.innerHeight - 197));
+            }
+        }
     },
     methods: {
         toggleConsumeMode() {

resources/vue/components/courseware/CoursewareRibbonToolbar.vue

@@ -33,6 +33,7 @@
                         >
                             <courseware-tools-blockadder
                                 id="cw-ribbon-tool-blockadder"
+                                :stickyRibbon="stickyRibbon"
                             />
                         </courseware-tab>
                         <courseware-tab
@@ -88,6 +89,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        stickyRibbon: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {

resources/vue/components/courseware/CoursewareToolsBlockadder.vue

 <template>
     <div class="cw-tools-element-adder">
         <courseware-tabs class="cw-tools-element-adder-tabs">
-            <courseware-tab :name="$gettext('Blöcke')" :selected="showBlockadder" :index="0">
+            <courseware-tab :name="$gettext('Blöcke')" :selected="showBlockadder" :index="0" :style="{ maxHeight: maxHeight + 'px' }">
                 <courseware-collapsible-box :title="textBlockHelper">
                     <courseware-block-helper :blockTypes="blockTypes" />
                 </courseware-collapsible-box>
@@ -76,7 +76,7 @@
                     </div>
                 </courseware-collapsible-box>
             </courseware-tab>
-            <courseware-tab :name="$gettext('Abschnitte')" :selected="showContaineradder" :index="1">
+            <courseware-tab :name="$gettext('Abschnitte')" :selected="showContaineradder" :index="1" :style="{ maxHeight: maxHeight + 'px' }">
                 <courseware-collapsible-box
                     v-for="(style, index) in containerStyles"
                     :key="index"
@@ -120,6 +120,12 @@ export default {
         CoursewareBlockHelper,
         CoursewareCompanionBox,
     },
+    props: {
+        stickyRibbon: {
+            type: Boolean,
+            default: false,
+        },
+    },
     data() {
         return {
             showBlockadder: true,
@@ -164,6 +170,13 @@ export default {
                 { title: this.$gettext('Dateien'), type: 'files' },
                 { title: this.$gettext('Externe Inhalte'), type: 'external' },
             ];
+        },
+        maxHeight() {
+            if (this.stickyRibbon) {
+                return parseInt(window.innerHeight * 0.75) - 120;
+            } else {
+                return parseInt(Math.min(window.innerHeight * 0.75, window.innerHeight - 197)) - 120;
+            }
         }
     },
     methods: {