From f710c59eeac7ec392ee50e3fbb7c352dedaae5d7 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Thu, 4 Aug 2022 12:48:44 +0000
Subject: [PATCH] fix #900
Closes #900
Merge request studip/studip!858
---
.../assets/stylesheets/scss/courseware.scss | 9 ++++++---
.../components/courseware/CoursewareRibbon.vue | 9 +++++++++
.../courseware/CoursewareRibbonToolbar.vue | 7 ++++++-
.../courseware/CoursewareToolsBlockadder.vue | 17 +++++++++++++++--
4 files changed, 36 insertions(+), 6 deletions(-)
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 0b4f47e9194..f429b6b00f3 100755
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -391,8 +391,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;
@@ -422,6 +421,7 @@ $consum_ribbon_width: calc(100% - 58px);
.cw-ribbon-tool-content-nav {
position: sticky;
+ height: 100%;
top: 0;
background-color: $white;
margin: 0;
@@ -451,6 +451,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);
@@ -470,9 +471,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;
@@ -481,6 +483,7 @@ $consum_ribbon_width: calc(100% - 58px);
scrollbar-color: $base-color $white;
&.cw-ribbon-tool-blockadder-tab {
+ height: 100%;
overflow: hidden;
padding: 0;
}
diff --git a/resources/vue/components/courseware/CoursewareRibbon.vue b/resources/vue/components/courseware/CoursewareRibbon.vue
index 051ae436104..60e4f0150cf 100755
--- a/resources/vue/components/courseware/CoursewareRibbon.vue
+++ b/resources/vue/components/courseware/CoursewareRibbon.vue
@@ -34,7 +34,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"
/>
@@ -78,6 +80,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() {
diff --git a/resources/vue/components/courseware/CoursewareRibbonToolbar.vue b/resources/vue/components/courseware/CoursewareRibbonToolbar.vue
index b65fafdd209..2f11d59abf5 100755
--- a/resources/vue/components/courseware/CoursewareRibbonToolbar.vue
+++ b/resources/vue/components/courseware/CoursewareRibbonToolbar.vue
@@ -33,6 +33,7 @@
>
<courseware-tools-blockadder
id="cw-ribbon-tool-blockadder"
+ :stickyRibbon="stickyRibbon"
/>
</courseware-tab>
<courseware-tab
@@ -80,6 +81,10 @@ export default {
props: {
toolsActive: Boolean,
canEdit: Boolean,
+ stickyRibbon: {
+ type: Boolean,
+ default: false,
+ }
},
data() {
return {
@@ -148,7 +153,7 @@ export default {
},
scrollToCurrent() {
setTimeout(() => {
- let contents = this.$refs.contents.$el;
+ let contents = this.$refs.contents.$el;
let current = contents.querySelector('.cw-tree-item-link-current');
contents.scroll({ top: current.offsetTop - 4, behavior: 'smooth' });
}, 360);
diff --git a/resources/vue/components/courseware/CoursewareToolsBlockadder.vue b/resources/vue/components/courseware/CoursewareToolsBlockadder.vue
index 929c5a4c731..3ab0d2d223a 100755
--- a/resources/vue/components/courseware/CoursewareToolsBlockadder.vue
+++ b/resources/vue/components/courseware/CoursewareToolsBlockadder.vue
@@ -1,7 +1,7 @@
<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: {
--
GitLab