diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index b976584204dd53ae893406ba6044ec9b96f0fca9..69f677068dd47d77fdcbbddf3e0f37badf16c3bb 100644 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/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; } diff --git a/resources/vue/components/courseware/CoursewareRibbon.vue b/resources/vue/components/courseware/CoursewareRibbon.vue index f6797fcd9a34500df6af4437b2b50a843015d43c..8c200141b31d6e340df4ab99e6381e0defe7eab9 100644 --- a/resources/vue/components/courseware/CoursewareRibbon.vue +++ b/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() { diff --git a/resources/vue/components/courseware/CoursewareRibbonToolbar.vue b/resources/vue/components/courseware/CoursewareRibbonToolbar.vue index 6a523bf8fb6e7dffef5f72492a652f9caba6bc96..b50678faeff813308ff95be62bb33ab2cebbb404 100644 --- 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 @@ -88,6 +89,10 @@ export default { type: Boolean, default: false, }, + stickyRibbon: { + type: Boolean, + default: false, + }, }, data() { return { diff --git a/resources/vue/components/courseware/CoursewareToolsBlockadder.vue b/resources/vue/components/courseware/CoursewareToolsBlockadder.vue index 929c5a4c731ab46c16f3ee0ec16caaf74d4f3e6b..3ab0d2d223a985bae245517cd0089f44453633de 100644 --- 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: {