Skip to content
Snippets Groups Projects
Commit 1c2d4c6a authored by Ron Lucke's avatar Ron Lucke
Browse files

fixes #3392 

Closes #3392

Merge request studip/studip!2471
parent 9b70c496
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 107 additions and 37 deletions
resources/assets/stylesheets/scss/wizard.scss
+ 88
− 18
View file @ 1c2d4c6a
@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;
}
}
}
}
}
resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue
+ 1
− 1
View file @ 1c2d4c6a
......@@ -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.') }}
......
resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogLink.vue
+ 3
− 3
View file @ 1c2d4c6a
......@@ -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>
......
resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue
+ 14
− 14
View file @ 1c2d4c6a
......@@ -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>
......
resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue
+ 1
− 1
View file @ 1c2d4c6a
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment