fix #1988

Closes #1988

Merge request studip/studip!1297

resources/assets/stylesheets/scss/courseware.scss

@@ -260,7 +260,7 @@ $consum_ribbon_width: calc(100% - 58px);
 
 .cw-ribbon-wrapper-consume {
     position: fixed;
-    padding: 1em;
+    padding: 15px;
     background-color: $white;
     width: $consum_ribbon_width;
     height: 46px;
@@ -268,8 +268,8 @@ $consum_ribbon_width: calc(100% - 58px);
 }
 .cw-ribbon-consume-bottom {
     position: fixed;
-    top: 74px;
-    height: 8px;
+    top: 75px;
+    height: 15px;
     left: 0;
     width: calc(100% - 1em);
     background-color: $white;
@@ -309,7 +309,7 @@ $consum_ribbon_width: calc(100% - 58px);
     &.cw-ribbon-sticky {
         position: fixed;
         top: 56px;
-        width: calc(100% - 344px);
+        width: calc(100% - 346px);
         z-index: 40;
     }
 
@@ -455,16 +455,19 @@ $consum_ribbon_width: calc(100% - 58px);
     z-index: 42;
 
     &.unfold {
-        right: 12px;
+        right: 0px;
     }
 
     &.cw-ribbon-tools-consume {
         position: fixed;
+        &.unfold {
+            right: 15px;
+        }
     }
 
     &.cw-ribbon-tools-sticky {
-        position: fixed;
-        top: 56px;
+        position: absolute;
+        top: -1px;
     }
 
     .cw-ribbon-tool-content {
@@ -661,7 +664,7 @@ ribbon end
 
         &.cw-container-wrapper-consume {
             margin: 0 auto;
-            padding: 6em 1em 1em 1em;
+            padding: 91px 15px 15px 15px;
         }
 
         &.cw-container-wrapper-discuss {

resources/vue/components/courseware/CoursewareRibbon.vue

@@ -38,7 +38,7 @@
                 :toolsActive="unfold"
                 :stickyRibbon="stickyRibbon"
                 :class="{ 'cw-ribbon-tools-sticky': stickyRibbon }"
-                :style="{ maxHeight: maxHeight + 'px' }"
+                :style="{ height: toolbarHeight + 'px' }"
                 :canEdit="canEdit"
                 @deactivate="deactivateToolbar"
                 @blockAdded="$emit('blockAdded')"
@@ -95,7 +95,7 @@ export default {
         breadcrumbFallback() {
             return window.outerWidth < 1200;
         },
-        maxHeight() {
+        toolbarHeight() {
             if (this.stickyRibbon) {
                 return parseInt(window.innerHeight * 0.75);
             } else {
@@ -129,7 +129,7 @@ export default {
         },
         handleScroll() {
             if (window.outerWidth > 767) {
-                this.stickyRibbon = window.scrollY > 130 && !this.consumeMode;
+                this.stickyRibbon = window.scrollY > 128 && !this.consumeMode;
             } else {
                 this.stickyRibbon = window.scrollY > 75 && !this.consumeMode;
             }