re #3256 - add new full hd list container width

4 files changed, 43 insertions, 1 deletions

diff --git a/lib/models/Courseware/ContainerTypes/ContainerType.php b/lib/models/Courseware/ContainerTypes/ContainerType.php
index 4e816be..7487260 100644
--- a/lib/models/Courseware/ContainerTypes/ContainerType.php
+++ b/lib/models/Courseware/ContainerTypes/ContainerType.php
@@ -231,6 +231,7 @@ abstract class ContainerType
     public function getContainerWidth(): string
     {
         $width = [
+            'full-hd' => _('Bildschirmbreite'),
             'full' => _('volle Breite'),
             'half' => _('halbe Breite'),
             'half-center' => _('halbe Breite (zentriert)'),
diff --git a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
index baed503..2d33395 100644
--- a/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
+++ b/resources/assets/stylesheets/scss/courseware/containers/default-container.scss
@@ -16,6 +16,10 @@
             margin: auto;
         }
     }
+    &.cw-container-colspan-full-hd {
+        max-width: 1920px;
+        width: 100%;
+    }
 
     .cw-container-header {
         background-color: var(--content-color-20);
diff --git a/resources/assets/stylesheets/scss/courseware/structural-element.scss b/resources/assets/stylesheets/scss/courseware/structural-element.scss
index 9bf9dec..b10f2d9 100644
--- a/resources/assets/stylesheets/scss/courseware/structural-element.scss
+++ b/resources/assets/stylesheets/scss/courseware/structural-element.scss
@@ -10,6 +10,18 @@
     }
 }
 
+#content-wrapper.cw-colspan-full-hd {
+    max-width: 1920px;
+
+    .cw-structural-element .cw-container-wrapper {
+        max-width: 1920px;
+
+        &.cw-container-wrapper-edit {
+            max-width: $max-content-width;
+        }
+    }
+}
+
 .cw-structural-element {
     &.cw-structural-element-consumemode {
         position: fixed;
diff --git a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
index 64b74e7..015ec19 100644
--- a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
@@ -210,11 +210,17 @@ export default {
             return this.blockingUser ? this.blockingUser.attributes['formatted-name'] : '';
         },
         containerStyles() {
-            return [
+            let styles = [
                 { title: this.$gettext('Volle Breite'), colspan: 'full'},
                 { title: this.$gettext('Halbe Breite'), colspan: 'half' },
                 { title: this.$gettext('Halbe Breite (zentriert)'), colspan: 'half-center' },
             ];
+
+            if (this.type === 'list') {
+                styles.unshift({ title: this.$gettext('Bildschirmbreite'), colspan: 'full-hd' });
+            }
+
+            return styles;
         },
         type() {
             return this.container.attributes['container-type'];
@@ -387,6 +393,16 @@ export default {
 
             await this.createClipboard(clipboard, { root: true });
             this.companionSuccess({ info: this.$gettext('Abschnitt wurde in Merkliste abgelegt.') });
+        },
+
+        enableFullHDListMode() {
+            document.querySelector('#content-wrapper').classList.add('cw-colspan-full-hd');
+            document.querySelector('.cw-container-wrapper').classList.add('cw-colspan-full-hd');
+        },
+
+        disableFullHDListMode() {
+            document.querySelector('#content-wrapper').classList.remove('cw-colspan-full-hd');
+            document.querySelector('.cw-container-wrapper').classList.remove('cw-colspan-full-hd');
         }
 
     },
@@ -395,6 +411,15 @@ export default {
         showEditDialog(state) {
             this.$emit('showEdit', state);
         }
+    },
+
+    mounted() {
+        this.globalOn('consuming-mode-enabled', () => {
+            this.enableFullHDListMode();
+        });
+        this.globalOn('consuming-mode-disabled', () => {
+            this.disableFullHDListMode();
+        });
     }
 
 };