fix layout and container type change issuestic-3256

2 files changed, 21 insertions, 2 deletions

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">