From 72c195103f6c050ef928aa9ecd2c0a6f8e581148 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Mon, 9 Sep 2024 16:17:27 +0200
Subject: update page layout

---
 resources/assets/stylesheets/scss/courseware.scss  | 13 +---
 .../stylesheets/scss/courseware/editbar.scss       | 14 +++++
 .../scss/courseware/layouts/ribbon.scss            | 28 +++------
 .../stylesheets/scss/courseware/layouts/tree.scss  |  6 +-
 .../scss/courseware/structural-element.scss        |  8 ++-
 .../stylesheets/scss/courseware/toolbar.scss       | 44 +++++++-------
 resources/vue/components/courseware/IndexApp.vue   | 16 ++---
 .../structural-element/CoursewareEditBar.vue       | 13 ++++
 .../structural-element/CoursewareRibbon.vue        |  6 +-
 .../CoursewareStructuralElement.vue                |  2 +-
 .../courseware/toolbar/CoursewareToolbar.vue       | 71 ++++++++--------------
 11 files changed, 109 insertions(+), 112 deletions(-)
 create mode 100644 resources/assets/stylesheets/scss/courseware/editbar.scss
 create mode 100644 resources/vue/components/courseware/structural-element/CoursewareEditBar.vue

diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 2526893..e099c93 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -8,6 +8,7 @@
 @import './courseware/content-courses.scss';
 @import './courseware/dashboard.scss';
 @import './courseware/sortable.scss';
+@import './courseware/editbar.scss';
 @import './courseware/toolbar.scss';
 @import './courseware/widgets.scss';
 @import './courseware/wizards.scss';
@@ -32,14 +33,4 @@
 @import './courseware/layouts/tabs.scss';
 @import './courseware/layouts/talk-bubble.scss';
 @import './courseware/layouts/tile.scss';
-@import './courseware/layouts/tree.scss';
-
-
-// #course-courseware-index {
-//     #sidebar {
-//         display: none;
-//     }
-//     #content-wrapper {
-//         grid-column: 1/3;
-//     }
-// }
\ No newline at end of file
+@import './courseware/layouts/tree.scss';
\ No newline at end of file
diff --git a/resources/assets/stylesheets/scss/courseware/editbar.scss b/resources/assets/stylesheets/scss/courseware/editbar.scss
new file mode 100644
index 0000000..0a394ef
--- /dev/null
+++ b/resources/assets/stylesheets/scss/courseware/editbar.scss
@@ -0,0 +1,14 @@
+.cw-editbar-wrapper {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    top: 75px;
+    right: 0;
+
+    .cw-editbar {
+        background-color: #fbfbfc;
+        border: solid thin #ededed;
+        width: 50px;
+    }
+
+}
\ No newline at end of file
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
index 1f62e1c..9609d7f 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
@@ -33,20 +33,11 @@ $consum_ribbon_width: calc(100% - 58px);
     z-index: 40;
 }
 
-.cw-ribbon-sticky-top {
-    position: fixed;
-    top: 40px;
-    height: 20px;
-    width: calc(100% - 314px);
-    background-color: var(--white);
-    z-index: 39;
-}
-
 .cw-ribbon-sticky-bottom {
     position: fixed;
-    top: 110px;
+    top: 85px;
     height: 16px;
-    width: calc(100% - 314px);
+    width: calc(100% - 30px);
     background-color: var(--white);
     z-index: 39;
 }
@@ -60,16 +51,16 @@ $consum_ribbon_width: calc(100% - 58px);
     flex-wrap: wrap;
     height: auto;
     min-height: 30px;
-    border: solid thin var(--dark-gray-color-30);
-    margin-bottom: 15px;
+    margin: -15px -15px 15px -15px;
     padding: 1em;
     justify-content: space-between;
-    background-color: var(--dark-gray-color-5);
+    background-color: #ededed;
 
     &.cw-ribbon-sticky {
         position: fixed;
-        top: 50px;
-        width: calc(100% - 346px);
+        top: 40px;
+        width: calc(100% - 30px);
+        margin: 0 -15px;
         z-index: 40;
     }
 
@@ -203,10 +194,11 @@ $consum_ribbon_width: calc(100% - 58px);
 .cw-ribbon-tools {
     background-color: var(--white);
     border: solid thin var(--content-color-40);
+    border-top: none;
     box-shadow: 2px 2px var(--dark-gray-color-30);
     position: absolute;
     right: -570px;
-    top: 15px;
+    top: 0;
     height: 100%;
     max-width: calc(100% - 28px);
     display: flex;
@@ -216,7 +208,7 @@ $consum_ribbon_width: calc(100% - 58px);
 
     &.unfold {
         right: 0px;
-        margin-right: 15px;
+        margin-right: 0;
     }
 
     &.cw-ribbon-tools-consume {
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
index 77219bc..10469a3 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss
@@ -6,7 +6,11 @@
         &.cw-tree-root-list {
             padding-left: 0;
 
-            > li.cw-tree-item {
+            > li.cw-tree-item.cw-tree-item-adder {
+                margin-top: 28px;
+            }
+
+            > li.cw-tree-item:not(.cw-tree-item-adder) {
                 > .cw-tree-item-wrapper {
                     display: none;
                 }
diff --git a/resources/assets/stylesheets/scss/courseware/structural-element.scss b/resources/assets/stylesheets/scss/courseware/structural-element.scss
index 9bf9dec..4ab4906 100644
--- a/resources/assets/stylesheets/scss/courseware/structural-element.scss
+++ b/resources/assets/stylesheets/scss/courseware/structural-element.scss
@@ -49,6 +49,12 @@
         }
     }
 
+    .cw-page-content {
+        margin: 0 auto;
+        max-width: $max-content-width;
+        width: calc(100% - 120px);
+    }
+
     .cw-structural-element-feedback-wrapper,
     .cw-structural-element-comments-wrapper {
         max-width: calc(1095px - 2px);
@@ -57,7 +63,7 @@
     }
 
     .cw-container-wrapper {
-        max-width: $max-content-width;
+        width: 100%;
         margin: 0;
         padding: 0;
         display: flex;
diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss
index 0670486..52fd15c 100644
--- a/resources/assets/stylesheets/scss/courseware/toolbar.scss
+++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss
@@ -1,15 +1,23 @@
+.cw-toolbar-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
 .cw-toolbar {
     z-index: 30;
     display: flex;
-    position: fixed;
-    top: 0;
-    flex-direction: row;
+    position: absolute;
+    top: 75px;
+    flex-direction: row-reverse;
     justify-content: flex-end;
-    right: 0;
-    margin-left: 4px;
-    height: 600px;
+    left: 0;
+
+    &.cw-toolbar-sticky {
+        position: fixed;
+    }
 
     .cw-toolbar-tools {
+        z-index: 31;
         width: 270px;
         min-height: 100%;
         border: solid thin var(--content-color-40);
@@ -18,18 +26,18 @@
         position: relative;
         padding: 0 4px;
         top: 0;
-        right: -270px;
-        transition: right 0.6s;
+        left: -270px;
+        transition: left 0.6s;
         &.hd {
             width: 480px;
-            right: -480px;
+            left: -480px;
         }
         &.wqhd {
             width: 558px;
-            right: -558px;
+            left: -558px;
         }
         &.unfold {
-            right: 0;
+            left: 0;
         }
 
         .cw-toolbar-tool-content {
@@ -108,8 +116,11 @@
         }
     }
     .cw-toolbar-folded-wrapper {
+        z-index: 32;
         display: flex;
         flex-direction: column;
+        background-color: #fbfbfc;
+        border: solid thin #ededed;
     }
     .cw-toolbar-button-wrapper {
         position: sticky;
@@ -126,7 +137,7 @@
         margin: 0 4px 0 4px;
         padding: 2px 8px 0 8px;
         border: none;
-        background-color: var(--white);
+        background-color: transparent;
         background-repeat: no-repeat;
         background-position: center center;
         cursor: pointer;
@@ -141,15 +152,6 @@
             border-bottom: solid 2px var(--base-color);
         }
     }
-    .cw-toolbar-spacer-right {
-        z-index: 39;
-        flex-shrink: 0;
-        position: relative;
-        background-color: var(--white);
-        width: 15px;
-        height: calc(100% + 2px);
-    }
-
     .cw-toolbar-tools.hd {
         .cw-toolbar-button-wrapper {
             .cw-toolbar-button {
diff --git a/resources/vue/components/courseware/IndexApp.vue b/resources/vue/components/courseware/IndexApp.vue
index 53238b4..7cf17ec 100644
--- a/resources/vue/components/courseware/IndexApp.vue
+++ b/resources/vue/components/courseware/IndexApp.vue
@@ -2,6 +2,7 @@
     <div>
         <div v-if="structureLoadingState === 'done'">
             <courseware-search-results v-show="showSearchResults" />
+            <CoursewareToolbar v-if="canEditSelected && canVisit" />
             <courseware-structural-element
                 v-show="!showSearchResults"
                 :canVisit="canVisit"
@@ -9,12 +10,7 @@
                 :ordered-structural-elements="orderedStructuralElements"
                 @select="selectStructuralElement"
             ></courseware-structural-element>
-            <MountingPortal mountTo="#courseware-action-widget" name="sidebar-actions">
-                <courseware-action-widget v-if="!showSearchResults && canEditSelected" :structural-element="selected"></courseware-action-widget>
-            </MountingPortal>
-            <MountingPortal mountTo="#courseware-search-widget" name="sidebar-search">
-                <courseware-search-widget v-if="selected !== null"></courseware-search-widget>
-            </MountingPortal>
+            <CoursewareEditBar v-if="canEditSelected && canVisit"/>
         </div>
         <studip-progress-indicator
             v-if="structureLoadingState === 'loading'"
@@ -35,8 +31,8 @@ import CoursewareStructuralElement from './structural-element/CoursewareStructur
 import CoursewareSearchResults from './structural-element/CoursewareSearchResults.vue';
 import CoursewareCompanionBox from './layouts/CoursewareCompanionBox.vue';
 import CoursewareCompanionOverlay from './layouts/CoursewareCompanionOverlay.vue';
-import CoursewareActionWidget from './widgets/CoursewareActionWidget.vue';
-import CoursewareSearchWidget from './widgets/CoursewareSearchWidget.vue';
+import CoursewareToolbar from './toolbar/CoursewareToolbar.vue';
+import CoursewareEditBar from './structural-element/CoursewareEditBar.vue';
 
 import StudipProgressIndicator from '../StudipProgressIndicator.vue';
 
@@ -46,11 +42,11 @@ export default {
     components: {
         CoursewareStructuralElement,
         CoursewareSearchResults,
-        CoursewareActionWidget,
         CoursewareCompanionBox,
         StudipProgressIndicator,
-        CoursewareSearchWidget,
         CoursewareCompanionOverlay,
+        CoursewareToolbar,
+        CoursewareEditBar
     },
     data: () => ({
         canVisit: null,
diff --git a/resources/vue/components/courseware/structural-element/CoursewareEditBar.vue b/resources/vue/components/courseware/structural-element/CoursewareEditBar.vue
new file mode 100644
index 0000000..0d0d834
--- /dev/null
+++ b/resources/vue/components/courseware/structural-element/CoursewareEditBar.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="cw-editbar-wrapper">
+        <div class="cw-editbar"></div>
+        <div class="cw-editbar-content"></div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'CoursewareEditBar',
+}
+</script>
\ No newline at end of file
diff --git a/resources/vue/components/courseware/structural-element/CoursewareRibbon.vue b/resources/vue/components/courseware/structural-element/CoursewareRibbon.vue
index f7cfff0..2180f42 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareRibbon.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareRibbon.vue
@@ -1,6 +1,5 @@
 <template>
     <div :class="{ 'cw-ribbon-wrapper-consume': consumeMode }" :id="isContentBar ? 'contentbar' : null" >
-        <div v-show="stickyRibbon" class="cw-ribbon-sticky-top"></div>
         <header :id="isContentBar ? 'cw-ribbon' : null" class="cw-ribbon" :class="{ 'cw-ribbon-sticky': stickyRibbon, 'cw-ribbon-consume': consumeMode }">
             <div class="cw-ribbon-wrapper-left">
                 <nav class="cw-ribbon-nav" :class="buttonsClass">
@@ -88,9 +87,10 @@ export default {
         },
         toolbarHeight() {
             if (this.stickyRibbon) {
-                return parseInt(window.innerHeight * 0.75);
+                return parseInt(window.innerHeight - 130);
             } else {
-                return parseInt(Math.min(window.innerHeight * 0.75, window.innerHeight - 197));
+                return parseInt(window.innerHeight - 230);
+                // parseInt(Math.min(window.innerHeight * 0.75, window.innerHeight - 197));
             }
         }
     },
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
index 26e2627..69a12a7 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
@@ -236,7 +236,7 @@
                                 <studip-progress-indicator v-if="processing" :description="$gettext('Vorgang wird bearbeitet...')" />
                             </div>
                         </div>
-                        <courseware-toolbar v-if="canVisit && canEdit && !isLink" />
+                        <!-- <courseware-toolbar v-if="canVisit && canEdit && !isLink" /> -->
                     </div>
                     <courseware-call-to-action-box
                         v-if="commentable"
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
index dc70348..58ec121 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="cw-toolbar-wrapper">
-        <div id="cw-toolbar" class="cw-toolbar" :style="toolbarStyle">
+        <div id="cw-toolbar" class="cw-toolbar" :class="{ 'cw-toolbar-sticky': stickyToolbar}" :style="stickyStyle">
             <div v-if="showTools" class="cw-toolbar-tools" :class="{ unfold: unfold, hd: isHd, wqhd: isWqhd }">
                 <div id="cw-toolbar-nav" class="cw-toolbar-button-wrapper">
                     <button
@@ -32,7 +32,7 @@
                         :title="$gettext('Werkzeugleiste einklappen')"
                         @click="toggleToolbarActive"
                     >
-                        <studip-icon shape="arr_2right" :size="24" />
+                        <studip-icon shape="arr_2left" :size="24" />
                     </button>
                 </div>
                 <div class="cw-toolbar-tool-wrapper">
@@ -49,13 +49,13 @@
                     />
                 </div>
             </div>
-            <div v-else class="cw-toolbar-folded-wrapper">
+            <div class="cw-toolbar-folded-wrapper" :style="foldedToolbarStyle">
                 <button
                     class="cw-toolbar-button"
                     :title="$gettext('Werkzeugleiste ausklappen')"
                     @click="toggleToolbarActive"
                 >
-                    <studip-icon shape="arr_2left" :size="24" />
+                    <studip-icon shape="arr_2right" :size="24" />
                 </button>
                 <button
                     class="cw-toolbar-button"
@@ -69,7 +69,6 @@
                     <studip-icon :shape="hideEditLayout ? 'visibility-checked' : 'visibility-invisible'" :size="24" />
                 </button>
             </div>
-            <div class="cw-toolbar-spacer-right"></div>
         </div>
     </div>
 </template>
@@ -93,9 +92,8 @@ export default {
         return {
             unfold: true,
             showTools: true,
-            toolbarTop: 0,
             activeTool: 'blockAdder',
-
+            stickyToolbar: false,
             windowWidth: window.outerWidth,
             windowInnerHeight: window.innerHeight,
         };
@@ -106,30 +104,11 @@ export default {
             structuralElementById: 'courseware-structural-elements/byId',
             toolbarActive: 'toolbarActive',
             hideEditLayout: 'hideEditLayout',
+            consumeMode: 'consumeMode',
         }),
         scrollTopStyles() {
             return window.getComputedStyle(document.getElementById('scroll-to-top'));
         },
-        toolbarHeight() {
-            const scrollTopHeight =
-                parseInt(this.scrollTopStyles['height'], 10) +
-                parseInt(this.scrollTopStyles['padding-top'], 10) +
-                parseInt(this.scrollTopStyles['padding-bottom'], 10) +
-                parseInt(this.scrollTopStyles['margin-bottom'], 10);
-            return parseInt(
-                Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight)
-            );
-        },
-        toolbarContentHeight() {
-            return this.toolbarHeight - 55;
-        },
-        toolbarStyle() {
-            return {
-                height: this.toolbarHeight + 'px',
-                minHeight: this.toolbarHeight + 'px',
-                top: this.toolbarTop + 'px',
-            };
-        },
         containers() {
             return this.relatedContainers({
                 parent: this.structuralElementById({ id: this.$route.params.id }),
@@ -153,6 +132,19 @@ export default {
         isWqhd() {
             return this.windowWidth >= 2560;
         },
+
+        foldedToolbarStyle() {
+            const top = this.stickyToolbar ? 150 : 302;
+            return { height: (this.windowInnerHeight - top) + 'px' };
+        },
+
+        toolbarContentHeight() {
+            const top = this.stickyToolbar ? 210 : 360;
+            return this.windowInnerHeight - top;
+        },
+        stickyStyle() {
+            return this.stickyToolbar ? { top: '116px'} : {};
+        }
     },
     methods: {
         ...mapActions({
@@ -162,22 +154,11 @@ export default {
         activateTool(tool) {
             this.activeTool = tool;
         },
-        updateToolbarTop() {
-            const responsiveContentbar = document.getElementById('responsive-contentbar');
-            if (responsiveContentbar) {
-                const contentbarRect = responsiveContentbar.getBoundingClientRect();
-                this.toolbarTop = contentbarRect.bottom + 25;
-                return;
-            }
-
-            const ribbon = document.getElementById('cw-ribbon') ?? document.getElementById('contentbar');
-            if (ribbon) {
-                const contentbarRect = ribbon.getBoundingClientRect();
-                if (ribbon.classList.contains('cw-ribbon-sticky')) {
-                    this.toolbarTop = contentbarRect.bottom + 16;
-                } else {
-                    this.toolbarTop = contentbarRect.bottom + 15;
-                }
+        handleScroll() {
+            if (this.windowWidth > 767) {
+                this.stickyToolbar = window.scrollY > 128 && !this.consumeMode;
+            } else {
+                this.stickyToolbar = window.scrollY > 75 && !this.consumeMode;
             }
         },
         onResize() {
@@ -186,15 +167,13 @@ export default {
         },
     },
     mounted() {
-        this.updateToolbarTop();
+        window.addEventListener('scroll', this.handleScroll);
         this.$nextTick(() => {
-            window.addEventListener('scroll', this.updateToolbarTop);
             window.addEventListener('resize', this.onResize);
         });
         this.resetAdderStorage();
     },
     beforeDestroy() {
-        window.removeEventListener('scroll', this.updateToolbarTop);
         window.removeEventListener('resize', this.onResize);
     },
 
-- 
cgit v1.0