From 9ba5fa0f00f450921755776cdccca52de23f1929 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 d24a9004281..ac4d3179239 100644
--- a/resources/vue/components/AdminCourses.vue
+++ b/resources/vue/components/AdminCourses.vue
@@ -9,6 +9,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() : ''">
@@ -126,11 +134,26 @@ export default {
},
currentLine: null,
open_children: [],
+ contentWidth: null,
};
},
created() {
this.loadCourses();
},
+ 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;
+ },
computed: {
...mapState('admincourses', [
'activatedFields',
--
GitLab