diff options
3 files changed, 61 insertions, 24 deletions
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index 8143c18..d30d612 100755 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -290,11 +290,19 @@ $consum_ribbon_width: calc(100% - 58px); list-style: none; padding-left: 0; - li+li:before { - padding: 0 0.25em; - content: '/'; - background-repeat: no-repeat; - background-position: center; + &.current-only { + li:not(.cw-ribbon-breadcrumb-item-current) { + display: none; + } + } + + &:not(.current-only) { + li+li:before { + padding: 0 0.25em; + content: '/'; + background-repeat: no-repeat; + background-position: center; + } } .cw-ribbon-breadcrumb-item { @@ -304,7 +312,9 @@ $consum_ribbon_width: calc(100% - 58px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 12em; + &.short { + display: none; + } } a { diff --git a/resources/vue/components/courseware/CoursewareRibbon.vue b/resources/vue/components/courseware/CoursewareRibbon.vue index da65807..c1e3fb9 100755 --- a/resources/vue/components/courseware/CoursewareRibbon.vue +++ b/resources/vue/components/courseware/CoursewareRibbon.vue @@ -1,19 +1,18 @@ <template> <div :class="{ 'cw-ribbon-wrapper-consume': consumeMode }"> <div v-if="stickyRibbon" class="cw-ribbon-sticky-top"></div> - <header class="cw-ribbon" :class="{ 'cw-ribbon-sticky': stickyRibbon, 'cw-ribbon-consume': consumeMode }"> + <header class="cw-ribbon" ref="ribbon" :class="{ 'cw-ribbon-sticky': stickyRibbon, 'cw-ribbon-consume': consumeMode }"> <div class="cw-ribbon-wrapper-left"> - <nav class="cw-ribbon-nav"> + <nav class="cw-ribbon-nav" ref="buttons"> <slot name="buttons" /> </nav> - <nav class="cw-ribbon-breadcrumb"> + <nav class="cw-ribbon-breadcrumb" ref="breadcrumb"> <ul> - <slot v-if="breadcrumbFallback" name="breadcrumbFallback" /> - <slot v-else name="breadcrumbList" /> + <slot name="breadcrumbList" /> </ul> </nav> </div> - <div class="cw-ribbon-wrapper-right"> + <div class="cw-ribbon-wrapper-right" ref="links"> <a href="#" class="cw-ribbon-button cw-ribbon-button-menu" @@ -76,9 +75,6 @@ export default { toolsActive() { return this.$store.getters.showToolbar; }, - breadcrumbFallback() { - return window.outerWidth < 1200; - }, }, methods: { toggleConsumeMode() { @@ -103,9 +99,47 @@ export default { this.stickyRibbon = window.scrollY > 75; } }, + handleBreadcrumbSizing() { + let links = $(this.$refs.breadcrumb).find('ul > li:not(.cw-ribbon-breadcrumb-item-current) a').get(); + if (links.length == 0) { + return; + } + $(links).find('span.long').show(); + $(links).find('span.short').hide(); + + for (const link of links) { + if (this.$refs.breadcrumb.clientWidth >= this.getTotalAvailableRibbonWidth()) { + $(link).find('span.long').hide(); + $(link).find('span.short').show(); + } + } + + this.$nextTick(() => { + if (this.$refs.breadcrumb.clientHeight > parseFloat($(this.$refs.ribbon).css('min-height')) || window.outerWidth < 1200) { + $(this.$refs.breadcrumb).find('ul').addClass('current-only'); + } else { + $(this.$refs.breadcrumb).find('ul').removeClass('current-only'); + } + $(this.$refs.breadcrumb).find('ul > li.cw-ribbon-breadcrumb-item-current > span').css('max-width', (this.getTotalAvailableRibbonWidth() - 2)); + }); + }, + getTotalAvailableRibbonWidth() { + let ribbonClientWidth = this.$refs.ribbon.clientWidth; + let paddingLeft = parseFloat($(this.$refs.ribbon).css('padding-left')); + let paddingRight = parseFloat($(this.$refs.ribbon).css('padding-right')); + let buttonsWidth = this.$refs.buttons.clientWidth; + let linksWidth = this.$refs.links.clientWidth; + + return ribbonClientWidth - paddingLeft - paddingRight - buttonsWidth - linksWidth; + } }, mounted() { window.addEventListener('scroll', this.handleScroll); + this.handleBreadcrumbSizing(); + window.addEventListener('resize', this.handleBreadcrumbSizing); + }, + updated () { + this.handleBreadcrumbSizing(); }, watch: { toolsActive(newState, oldState) { diff --git a/resources/vue/components/courseware/CoursewareStructuralElement.vue b/resources/vue/components/courseware/CoursewareStructuralElement.vue index d35d7bd..4fb73c6 100755 --- a/resources/vue/components/courseware/CoursewareStructuralElement.vue +++ b/resources/vue/components/courseware/CoursewareStructuralElement.vue @@ -27,7 +27,8 @@ > <span> <router-link :to="'/structural_element/' + ancestor.id"> - {{ ancestor.attributes.title || "–" }} + <span class="long">{{ ancestor.attributes.title || "–" }}</span> + <span class="short">..</span> </router-link> </span> </li> @@ -38,14 +39,6 @@ <span>{{ structuralElement.attributes.title || "–" }}</span> </li> </template> - <template #breadcrumbFallback> - <li - class="cw-ribbon-breadcrumb-item cw-ribbon-breadcrumb-item-current" - :title="structuralElement.attributes.title" - > - <span>{{ structuralElement.attributes.title }}</span> - </li> - </template> <template #menu> <studip-action-menu v-if="!consumeMode" |