Merge branch 'main' into issue-3911issue-3911

2 files changed, 114 insertions, 61 deletions

diff --git a/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue b/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue
index 1a739a6..1aa8802 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue
@@ -16,21 +16,21 @@
     </div>
     <div v-else class="cw-root-content-wrapper">
         <div class="cw-root-content" :class="['cw-root-content-' + rootLayout]">
-            <div class="cw-root-content-img" :style="image">
+            <div class="cw-root-content-img" :style="bgImage">
                 <section class="cw-root-content-description" :style="bgColor">
-                    <img v-if="imageIsSet" class="cw-root-content-description-img" :src="imageURL" />
-                    <template v-else>
+                    <div class="cw-root-content-description-img" :src="imageURL" :style="image"></div>
+                    <template v-if="!imageIsSet">
                         <studip-ident-image
                             class="cw-root-content-description-img"
-                            v-model="identImageCanvas"
-                            :showCanvas="true"
+                            v-model="identImage"
                             :baseColor="bgColorHex"
                             :pattern="structuralElement.attributes.title"
                         />
                         <studip-ident-image
-                            v-model="identImage"
-                            :width="1095"
-                            :height="withTOC ? 300 : 480"
+                            v-model="identBgImage"
+                            class="cw-root-content-description-background-img"
+                            :width="4380"
+                            :height="withTOC ? 1200 : 1920"
                             :baseColor="bgColorHex"
                             :pattern="structuralElement.attributes.title"
                         />
@@ -46,44 +46,28 @@
         </div>
         <div v-if="withTOC" class="cw-root-content-toc">
             <ul class="cw-tiles">
-                <li
-                    v-for="child in childElements"
-                    :key="child.id"
-                    class="tile"
-                    :class="[child.attributes.payload.color]"
-                >
+                <li v-for="child in childElements" :key="child.id">
                     <router-link :to="'/structural_element/' + child.id" :title="child.attributes.title">
-                        <div
-                            v-if="hasImage(child)"
-                            class="preview-image"
-                            :style="getChildStyle(child)"
-                        ></div>
-                        <studip-ident-image
-                            v-else
-                            :baseColor="getColor(child).hex"
-                            :pattern="child.attributes.title"
-                            :showCanvas="true"
-                        />
-                        <div class="description">
-                            <header
-                                :class="[
-                                    child.attributes.purpose !== ''
-                                        ? 'description-icon-' + child.attributes.purpose
-                                        : '',
-                                ]"
-                            >
-                                {{ child.attributes.title || '–' }}
-                            </header>
-                            <div class="description-text-wrapper">
-                                <p>{{ child.attributes.payload.description }}</p>
-                            </div>
-                            <footer>
-                                {{ countChildChildren(child) }}
-                                <translate :translate-n="countChildChildren(child)" translate-plural="Seiten">
-                                    Seite
-                                </translate>
-                            </footer>
-                        </div>
+                        <courseware-tile
+                            tag="div"
+                            :color="child.attributes.payload.color"
+                            :title="child.attributes.title || '–'"
+                            :imageUrl="hasImage(child) ? child.relationships?.image?.meta?.['download-url'] : ''"
+                        >
+                            <template #description>
+                                {{ child.attributes.payload.description }}
+                            </template>
+                            <template #footer>
+                                <p class="cw-root-content-toc-tile-footer">
+                                {{
+                                    $gettextInterpolate(
+                                        $ngettext('%{pages} Seite', '%{pages} Seiten', countChildChildren(child)),
+                                        { pages: countChildChildren(child) }
+                                    )
+                                }}
+                                </p>
+                            </template>
+                        </courseware-tile>
                     </router-link>
                 </li>
             </ul>
@@ -93,6 +77,7 @@
 
 <script>
 import CoursewareCompanionBox from './../layouts/CoursewareCompanionBox.vue';
+import CoursewareTile from './../layouts/CoursewareTile.vue';
 import StudipIdentImage from './../../StudipIdentImage.vue';
 import colorMixin from '@/vue/mixins/courseware/colors.js';
 import { mapActions, mapGetters } from 'vuex';
@@ -100,18 +85,19 @@ import { mapActions, mapGetters } from 'vuex';
 export default {
     name: 'courseware-root-content',
     mixins: [colorMixin],
-    props: {
-        structuralElement: Object,
-        canEdit: Boolean,
-    },
     components: {
         CoursewareCompanionBox,
+        CoursewareTile,
         StudipIdentImage,
     },
+    props: {
+        structuralElement: Object,
+        canEdit: Boolean,
+    },
     data() {
         return {
             identImage: '',
-            identImageCanvas: '',
+            identBgImage: '',
         };
     },
     computed: {
@@ -130,6 +116,13 @@ export default {
         image() {
             let style = {};
             const backgroundURL = this.imageIsSet ? this.imageURL : this.identImage;
+            style.backgroundImage = 'url(' + backgroundURL + ')';
+
+            return style;
+        },
+        bgImage() {
+            let style = {};
+            const backgroundURL = this.imageIsSet ? this.imageURL : this.identBgImage;
 
             style.backgroundImage = 'url(' + backgroundURL + ')';
             style.height = this.withTOC ? '300px' : '480px';
@@ -180,7 +173,7 @@ export default {
         },
         addPage() {
             this.showElementAddDialog(true);
-        }
+        },
     },
 };
 </script>
@@ -196,16 +189,20 @@ export default {
     }
     .cw-root-content-description {
         display: flex;
-        flex-direction: row;
-        margin: 0 8em;
-        padding: 2em 4px 2em 2em;
         position: relative;
-        top: 8em;
+        flex-direction: column;
+        margin: 0 1em;
+        padding: 1em 4px 1em 1em;
+        top: 1em;
+        gap: 10px;
 
         .cw-root-content-description-img {
-            width: 240px;
-            height: fit-content;
-            margin-right: 2em;
+            min-width: 135px;
+            height: 90px;
+            background-color: #fff;
+            background-size: cover;
+            background-position: center;
+            margin-right: 1em;
         }
         .cw-root-content-description-text {
             max-height: calc(480px - 18em);
@@ -233,14 +230,68 @@ export default {
     max-width: 1095px;
     margin-bottom: 1em;
     .cw-root-content-description {
-        margin: 0 8em;
-        top: 1.5em;
+        height: calc(100% - 4em);
         .cw-root-content-description-text {
             max-height: calc(300px - 6em);
         }
     }
+    .cw-root-content-toc-tile-footer {
+        line-height: 4em;
+    }
 }
 .cw-root-content-hint {
     max-width: 1095px;
 }
+
+.size-small {
+    .cw-root-content-description {
+        flex-direction: row;
+        padding: 1em 4px 1em 1em;
+
+        .cw-root-content-description-img {
+            min-width: 135px;
+            height: 90px;
+        }
+    }
+
+    .cw-root-content-default {
+        .cw-root-content-description {
+            margin: 0 4em;
+            top: 8em;
+        }
+    }
+    .cw-root-content-toc {
+        .cw-root-content-description {
+            height: calc(100% - 6em);
+            margin: 0 4em;
+            top: 1.5em;
+        }
+    }
+}
+
+.size-large {
+    .cw-root-content-description {
+        flex-direction: row;
+        padding: 2em 4px 2em 2em;
+
+        .cw-root-content-description-img {
+            min-width: 270px;
+            height: 180px;
+        }
+    }
+
+    .cw-root-content-default {
+        .cw-root-content-description {
+            margin: 0 8em;
+            top: 8em;
+        }
+    }
+    .cw-root-content-toc {
+        .cw-root-content-description {
+            height: calc(100% - 7em);
+            margin: 0 8em;
+            top: 1.5em;
+        }
+    }
+}
 </style>
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogImport.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogImport.vue
index 60b404e..019bbf2 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogImport.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogImport.vue
@@ -130,7 +130,6 @@ export default {
             this.importZipFile = event.target.files[0];
             this.setImportFilesProgress(0);
             this.setImportStructuresProgress(0);
-            this.setImportErrors([]);
         },
         async importCoursewareArchiv() {
             this.importAborted = false;
@@ -199,6 +198,9 @@ export default {
 
             await this.importCourseware(courseware, this.currentElement, files, this.importBehavior, null);
         }
+    },
+    mounted() {
+        this.setImportErrors([]);
     }
 }
 </script>