From 3474ea5022e9bb4d7fc861472d35be3bcb7ca735 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Wed, 8 May 2024 14:38:45 +0000
Subject: [PATCH] fix #4122
Closes #4122
Merge request studip/studip!2976
---
.../CoursewareRootContent.vue | 77 +++++++++++++++----
1 file changed, 63 insertions(+), 14 deletions(-)
diff --git a/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue b/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue
index 15056e446b1..1aa88028ac2 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareRootContent.vue
@@ -116,12 +116,7 @@ export default {
image() {
let style = {};
const backgroundURL = this.imageIsSet ? this.imageURL : this.identImage;
-
style.backgroundImage = 'url(' + backgroundURL + ')';
- if (!this.imageIsSet) {
- style.backgroundSize = '100% auto';
- style.height = '180px';
- }
return style;
},
@@ -194,17 +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: 270px;
- 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);
@@ -232,8 +230,7 @@ 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);
}
@@ -245,4 +242,56 @@ export default {
.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>
--
GitLab