diff options
11 files changed, 109 insertions, 112 deletions
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); }, |