From 215e2f161c23adb67c5523a05ad66fa6b99f36c9 Mon Sep 17 00:00:00 2001
From: Viktoria Wiebe <wiebe@elan-ev.de>
Date: Tue, 4 Jun 2024 20:54:10 +0200
Subject: fix layout and container type change issues

---
 .../stylesheets/scss/courseware/structural-element.scss    |  6 ++++++
 .../courseware/containers/CoursewareDefaultContainer.vue   |  9 ++++++++-
 .../structural-element/CoursewareRootContent.vue           | 14 +++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/resources/assets/stylesheets/scss/courseware/structural-element.scss b/resources/assets/stylesheets/scss/courseware/structural-element.scss
index 4188ade..8568272 100644
--- a/resources/assets/stylesheets/scss/courseware/structural-element.scss
+++ b/resources/assets/stylesheets/scss/courseware/structural-element.scss
@@ -22,6 +22,12 @@
     }
 }
 
+.cw-colspan-full-hd {
+    .cw-root-content.cw-colspan-full-hd {
+        max-width: unset;
+    }
+}
+
 .cw-structural-element .cw-container-wrapper.cw-colspan-full-hd {
     max-width: 1920px;
 
diff --git a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
index 2e45f55..a0f01ab 100644
--- a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
@@ -192,7 +192,7 @@ export default {
             currentElementisLink: 'currentElementisLink',
             containerTypes: 'containerTypes',
             consumeMode: 'consumeMode',
-            fullHDEnabled: 'fullHDEnabled'
+            fullHDEnabled: 'fullHDEnabled',
         }),
         showEditMode() {
             return this.canEdit && !this.currentElementisLink;
@@ -295,6 +295,13 @@ export default {
             container.attributes['container-type'] = this.changeType;
             container.attributes.payload.colspan = this.changeStyle;
             container.attributes.payload.cwidth = this.changeWidth;
+
+            if (this.changeType !== 'list' && this.fullHDEnabled) {
+                this.fullHD = false;
+                this.toggleFullHD();
+                container.attributes.payload.cwidth = false;
+            }
+
             await this.updateContainer({
                 container: container,
                 structuralElementId: this.container.relationships['structural-element'].data.id,
diff --git a/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue b/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue
index 1aa8802..a702454 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue
@@ -15,7 +15,7 @@
         </courseware-companion-box>
     </div>
     <div v-else class="cw-root-content-wrapper">
-        <div class="cw-root-content" :class="['cw-root-content-' + rootLayout]">
+        <div class="cw-root-content" :class="['cw-root-content-' + rootLayout, isFullHD ? 'cw-colspan-full-hd' : '']">
             <div class="cw-root-content-img" :style="bgImage">
                 <section class="cw-root-content-description" :style="bgColor">
                     <div class="cw-root-content-description-img" :src="imageURL" :style="image"></div>
@@ -98,6 +98,7 @@ export default {
         return {
             identImage: '',
             identBgImage: '',
+            isFullHD: false,
         };
     },
     computed: {
@@ -106,6 +107,8 @@ export default {
             childrenById: 'courseware-structure/children',
             structuralElementById: 'courseware-structural-elements/byId',
             context: 'context',
+            fullHDEnabled: 'fullHDEnabled',
+            hideEditLayout: 'hideEditLayout',
         }),
         imageURL() {
             return this.structuralElement.relationships?.image?.meta?.['download-url'];
@@ -175,6 +178,15 @@ export default {
             this.showElementAddDialog(true);
         },
     },
+    watch: {
+        hideEditLayout(newState) {
+            if (this.fullHDEnabled && newState) {
+                this.isFullHD = true;
+            } else {
+                this.isFullHD = false;
+            }
+        }
+    }
 };
 </script>
 <style scoped lang="scss">
-- 
cgit v1.0