Resolve "Wiki/Courseware: Inhaltsverzeichnis hängt falsch"

Closes #2138, #2139, and #2130

Merge request studip/studip!1383

2 files changed, 48 insertions, 9 deletions

diff --git a/resources/assets/javascripts/bootstrap/fullscreen.js b/resources/assets/javascripts/bootstrap/fullscreen.js
index 990eae7..e83e827 100644
--- a/resources/assets/javascripts/bootstrap/fullscreen.js
+++ b/resources/assets/javascripts/bootstrap/fullscreen.js
@@ -1,22 +1,28 @@
 STUDIP.ready(() => {
-    $('#fullscreen-on').on('click', event => {
+    document.getElementById('fullscreen-on').addEventListener('click', event => {
         event.preventDefault();
         STUDIP.Vue.emit('toggle-compact-navigation', true);
     });
-    $('#fullscreen-off').on('click', event => {
+
+    document.getElementById('fullscreen-off').addEventListener('click', event => {
         event.preventDefault();
         STUDIP.Vue.emit('toggle-compact-navigation', false);
-    });
-    $('#focusmode-on, .fullscreen-trigger').on('click', event => {
-        event.preventDefault();
-        STUDIP.Fullscreen.activate();
-    });
+    })
+
+    for (const elem of document.querySelectorAll('#focusmode-on, .fullscreen-trigger')) {
+        elem.addEventListener('click', event => {
+            event.preventDefault();
+            STUDIP.Fullscreen.activate();
+        });
+    }
+
     // Listen for fullscreen exit, ending focus mode with it.
     document.addEventListener('fullscreenchange', event => {
         if (!document.fullscreenElement) {
             STUDIP.Fullscreen.deactivate();
         }
     });
+
     // Fullscreen exit on Safari
     document.addEventListener('webkitfullscreenchange', event => {
         if (!document.webkitFullscreenElement) {
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index a1e09d4..9267c8d 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -405,6 +405,7 @@ $sidebarOut: -330px;
 
         .contentbar-wrapper-left {
             flex: 1;
+            max-width: calc(100% - 70px);
             min-width: 0;
 
             & > .contentbar-icon {
@@ -445,7 +446,17 @@ $sidebarOut: -330px;
 
             .cw-ribbon-tools {
                 right: 0;
-                top: 96px;
+                top: 4px;
+
+                .cw-tabs-nav {
+                    height: 52px;
+
+                    button {
+                        &.is-active::after {
+                            margin-top: 10px;
+                        }
+                    }
+                }
             }
         }
     }
@@ -453,7 +464,7 @@ $sidebarOut: -330px;
     #toc {
         position: absolute;
         right: -8px;
-        top: 82px;
+        top: -21px;
     }
 
     #toc_header {
@@ -626,6 +637,28 @@ $sidebarOut: -330px;
         .cw-companion-box-wrapper {
             padding-top: 120px;
         }
+
+        .cw-structural-element-consumemode {
+            position: unset;
+
+            .cw-ribbon-wrapper-consume {
+                position: unset;
+
+                .cw-ribbon-consume {
+                    position: unset;
+
+                    .cw-ribbon-consume-bottom {
+                        height: unset;
+                    }
+                }
+            }
+        }
+    }
+
+    #toc {
+        position: absolute;
+        right: -29px;
+        top: -25px;
     }
 
 }