From 46966caee98dfc8757782e6551ee0caf8c1ec451 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Wed, 14 Aug 2024 13:32:40 +0000
Subject: [PATCH] admin courses: provide width hint in col group for contents
column, fixes #3078
Closes #3078
Merge request studip/studip!3248
---
resources/vue/components/AdminCourses.vue | 23 +++++++++++++++++++++++
1 file changed, 23 insertions(+)
diff --git a/resources/vue/components/AdminCourses.vue b/resources/vue/components/AdminCourses.vue
index 2571396fde8..7979d677e48 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));
--
GitLab