intel. breadcrumbs, fixes #727

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 {

resources/vue/components/courseware/CoursewareRibbon.vue

 <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) {

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"