From 1c2d4c6adf9088c116e2d209ffe97fdfbb6d2511 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Fri, 2 Feb 2024 07:33:17 +0000
Subject: [PATCH] fixes #3392
Closes #3392
Merge request studip/studip!2471
---
resources/assets/stylesheets/scss/wizard.scss | 106 +++++++++++++++---
.../CoursewareStructuralElementDialogAdd.vue | 2 +-
.../CoursewareStructuralElementDialogLink.vue | 6 +-
.../unit/CoursewareShelfDialogCopy.vue | 28 ++---
.../unit/CoursewareShelfDialogImport.vue | 2 +-
5 files changed, 107 insertions(+), 37 deletions(-)
diff --git a/resources/assets/stylesheets/scss/wizard.scss b/resources/assets/stylesheets/scss/wizard.scss
index b1fabf4cbb2..5c73dc9dd88 100644
--- a/resources/assets/stylesheets/scss/wizard.scss
+++ b/resources/assets/stylesheets/scss/wizard.scss
@@ -1,4 +1,5 @@
@import '../mixins';
+
.wizard-wrapper {
display: flex;
@@ -11,28 +12,34 @@
margin: auto;
display: block;
}
-
+
p {
margin: 15px;
}
+
.wizard-requirements {
span {
font-weight: 700;
}
+
ul {
padding: 4px 0;
+
li {
list-style: none;
+
button {
padding: 2px 0;
background-color: transparent;
border: none;
color: var(--base-color);
cursor: pointer;
+
&:hover {
color: var(--red);
}
}
+
img {
padding-right: 4px;
display: inline-block;
@@ -42,6 +49,7 @@
}
}
}
+
.wizard-content-wrapper {
flex-grow: 2;
margin-left: 15px;
@@ -54,12 +62,13 @@
list-style: none;
padding: 0;
margin: 1.5em 0 2.5em 0;
-
+
li {
display: inline-block;
position: relative;
margin-right: 60px;
border: solid 2px var(--base-color);
+
button {
padding: 6px 0;
height: 36px;
@@ -68,15 +77,19 @@
background: no-repeat;
border: none;
}
+
&.valid {
background-color: var(--base-color);
}
+
&.invalid {
background-color: white;
}
+
&.optional {
border: dashed thin var(--base-color);
}
+
&::before {
position: absolute;
content: "";
@@ -86,6 +99,7 @@
transform: translateY(-50%);
left: 100%;
}
+
&.active::after {
position: absolute;
content: "";
@@ -96,18 +110,21 @@
left: -1px;
}
}
+
li:last-child {
margin-right: 0;
+
&::before {
display: none;
}
}
-
+
}
-
+
.wizard-list {
list-style: none;
padding: 0;
+
.wizard-item {
.wizard-content {
max-width: 555px;
@@ -136,23 +153,26 @@
form.default fieldset.radiobutton-set {
- > legend {
+ >legend {
margin: 0px;
width: 100%;
}
+
border: none;
padding: 0px;
margin-left: 0px;
margin-right: 0px;
- > input[type=radio] {
+ >input[type=radio] {
opacity: 0;
position: absolute;
- &:focus + label {
+
+ &:focus+label {
outline: auto;
}
}
- > label {
+
+ >label {
cursor: pointer;
border: 1px solid var(--content-color-40);
transition: background-color 200ms;
@@ -163,48 +183,98 @@ form.default fieldset.radiobutton-set {
padding-bottom: 2px;
margin-bottom: 0;
border-top: none;
+
:not(.undecorated) {
text-indent: 0;
}
- > .text {
+
+ >.text {
width: 100%;
margin-left: 10px;
}
- > .unchecked {
+
+ >.unchecked {
margin-right: 0;
}
- > .check {
+
+ >.check {
display: none;
}
}
- > label:first-of-type {
+
+ >label:first-of-type {
border-top: 1px solid var(--content-color-40);
}
- > label:last-child::after {
+
+ >label:last-child::after {
content: none;
}
- > div {
+
+ >div {
border: 1px solid var(--content-color-40);
border-top: none;
display: none;
padding: 10px;
}
- > input[type=radio]:checked + label {
+
+ >input[type=radio]:checked+label {
background-color: var(--content-color-20);
transition: background-color 200ms;
- > .unchecked {
+
+ >.unchecked {
display: none;
}
- > .check {
+
+ >.check {
display: inline-block;
}
}
- > input[type=radio]:checked + label + div {
+
+ >input[type=radio]:checked+label+div {
display: block;
+
.description {
animation-duration: 400ms;
animation-name: terms_of_use_fadein;
}
}
}
+
+@include media-breakpoint-small-down() {
+ .wizard-wrapper {
+
+ .wizard-meta {
+ display: none;
+ }
+
+ .wizard-content-wrapper .wizard-progress {
+ li {
+ margin-right: 30px;
+
+ &::before {
+ width: 32px;
+ }
+ }
+ }
+ }
+}
+
+@include media-breakpoint-tiny-down() {
+ .wizard-wrapper {
+ .wizard-meta {
+ display: none;
+ }
+
+ .wizard-content-wrapper .wizard-progress {
+ li {
+ margin-right: 8px;
+
+ &::before {
+ width: 10px;
+ }
+ }
+ }
+ }
+}
+
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue
index 78abfcfeeed..3d2e7e74f1a 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue
@@ -83,7 +83,7 @@
{{ $gettext('Farbe') }}
<studip-select v-model="color" :options="colors" :reduce="(color) => color.class" label="class">
<template #open-indicator="selectAttributes">
- <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10" /></span>
+ <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span>
</template>
<template #no-options>
{{ $gettext('Es steht keine Auswahl zur Verfügung.') }}
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogLink.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogLink.vue
index 1405e39c373..2029d5681f8 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogLink.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogLink.vue
@@ -22,10 +22,10 @@
:aria-description="unit.element.attributes.title"
/>
<label @click="selectedUnit = unit" :key="'label-' + unit.id" :for="'cw-element-link-unit-' + unit.id">
- <div class="icon"><studip-icon shape="courseware" size="32"/></div>
+ <div class="icon"><studip-icon shape="courseware" :size="32"/></div>
<div class="text">{{ unit.element.attributes.title }}</div>
- <studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" />
- <studip-icon shape="check-circle" size="24" class="check" />
+ <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
+ <studip-icon shape="check-circle" :size="24" class="check" />
</label>
</template>
</fieldset>
diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue
index d68ffa54f8c..a2d1dec7d2a 100644
--- a/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue
+++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue
@@ -21,10 +21,10 @@
:aria-description="text.sourceSelf"
/>
<label @click="source = 'self'" for="cw-shelf-copy-source-self">
- <div class="icon"><studip-icon shape="seminar" size="32"/></div>
+ <div class="icon"><studip-icon shape="seminar" :size="32"/></div>
<div class="text">{{ text.sourceSelf }}</div>
- <studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" />
- <studip-icon shape="check-circle" size="24" class="check" />
+ <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
+ <studip-icon shape="check-circle" :size="24" class="check" />
</label>
</template>
<input
@@ -35,10 +35,10 @@
:aria-description="text.sourceCourses"
/>
<label @click="source = 'courses'" for="cw-shelf-copy-source-courses">
- <div class="icon"><studip-icon shape="seminar" size="32"/></div>
+ <div class="icon"><studip-icon shape="seminar" :size="32"/></div>
<div class="text">{{ text.sourceCourses }}</div>
- <studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" />
- <studip-icon shape="check-circle" size="24" class="check" />
+ <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
+ <studip-icon shape="check-circle" :size="24" class="check" />
</label>
<input
id="cw-shelf-copy-source-users"
@@ -48,10 +48,10 @@
:aria-description="text.sourceUsers"
/>
<label @click="source = 'users'" for="cw-shelf-copy-source-users">
- <div class="icon"><studip-icon shape="content" size="32"/></div>
+ <div class="icon"><studip-icon shape="content" :size="32"/></div>
<div class="text">{{ text.sourceUsers }}</div>
- <studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" />
- <studip-icon shape="check-circle" size="24" class="check" />
+ <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
+ <studip-icon shape="check-circle" :size="24" class="check" />
</label>
</fieldset>
<template v-if="source === 'courses'">
@@ -76,7 +76,7 @@
>
<template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"
- ><studip-icon shape="arr_1down" size="10"
+ ><studip-icon shape="arr_1down" :size="10"
/></span>
</template>
</studip-select>
@@ -105,10 +105,10 @@
:aria-description="unit.element.attributes.title"
/>
<label @click="selectedUnit = unit" :key="'label-' + unit.id" :for="'cw-shelf-copy-unit-' + unit.id">
- <div class="icon"><studip-icon shape="courseware" size="32"/></div>
+ <div class="icon"><studip-icon shape="courseware" :size="32"/></div>
<div class="text">{{ unit.element.attributes.title }}</div>
- <studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" />
- <studip-icon shape="check-circle" size="24" class="check" />
+ <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
+ <studip-icon shape="check-circle" :size="24" class="check" />
</label>
</template>
</fieldset>
@@ -136,7 +136,7 @@
>
<template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"
- ><studip-icon shape="arr_1down" size="10"
+ ><studip-icon shape="arr_1down" :size="10"
/></span>
</template>
<template #no-options>
diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue
index b557dff6b40..bf32addb099 100644
--- a/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue
+++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue
@@ -45,7 +45,7 @@
>
<template #open-indicator="selectAttributes">
<span v-bind="selectAttributes"
- ><studip-icon shape="arr_1down" size="10"
+ ><studip-icon shape="arr_1down" :size="10"
/></span>
</template>
<template #no-options>
--
GitLab