diff --git a/resources/vue/components/AdminCourses.vue b/resources/vue/components/AdminCourses.vue index 2571396fde8725197efae72e503fd275aa50f672..7979d677e480cc6df5a4bd586e8e91e97d718f16 100644 --- a/resources/vue/components/AdminCourses.vue +++ b/resources/vue/components/AdminCourses.vue @@ -12,6 +12,14 @@ {{ coursesCount + ' ' + $gettext('Veranstaltungen') }} </span> </caption> + <colgroup> + <col v-if="showComplete"> + <col v-for="activeField in sortedActivatedFields" + :key="`col-${activeField}`" + :style="{width: activeField === 'contents' && contentWidth !== null ? `${contentWidth}px` : null}" + > + <col> + </colgroup> <thead> <tr class="sortable"> <th v-if="showComplete" :class="sort.by === 'completion' ? 'sort' + sort.direction.toLowerCase() : ''"> @@ -129,6 +137,7 @@ export default { }, currentLine: null, open_children: [], + contentWidth: null, }; }, created() { @@ -138,6 +147,20 @@ export default { this.globalOn('AdminCourses/changeFilter', this.changeFilter.bind(this)); this.globalOn('AdminCourses/loadCourse', this.loadCourse.bind(this)); }, + updated() { + const iconNavigations = this.$el.querySelectorAll('tbody .my-courses-navigation'); + + if (iconNavigations.length === 0) { + this.contentWidth = null; + return; + } + + const iconCounts = Array.from(iconNavigations).map(node => { + return node.querySelectorAll('.my-courses-navigation-item').length; + }); + + this.contentWidth = Math.max(...iconCounts) * 26; + }, destroyed() { this.globalOff('AdminCourses/changeActionArea', this.changeActionArea.bind(this)); this.globalOff('AdminCourses/changeFilter', this.changeFilter.bind(this));