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
Show 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'; @import '../mixins';
.wizard-wrapper { .wizard-wrapper {
display: flex; display: flex;
...@@ -15,24 +16,30 @@ ...@@ -15,24 +16,30 @@
p { p {
margin: 15px; margin: 15px;
} }
.wizard-requirements { .wizard-requirements {
span { span {
font-weight: 700; font-weight: 700;
} }
ul { ul {
padding: 4px 0; padding: 4px 0;
li { li {
list-style: none; list-style: none;
button { button {
padding: 2px 0; padding: 2px 0;
background-color: transparent; background-color: transparent;
border: none; border: none;
color: var(--base-color); color: var(--base-color);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: var(--red); color: var(--red);
} }
} }
img { img {
padding-right: 4px; padding-right: 4px;
display: inline-block; display: inline-block;
...@@ -42,6 +49,7 @@ ...@@ -42,6 +49,7 @@
} }
} }
} }
.wizard-content-wrapper { .wizard-content-wrapper {
flex-grow: 2; flex-grow: 2;
margin-left: 15px; margin-left: 15px;
...@@ -60,6 +68,7 @@ ...@@ -60,6 +68,7 @@
position: relative; position: relative;
margin-right: 60px; margin-right: 60px;
border: solid 2px var(--base-color); border: solid 2px var(--base-color);
button { button {
padding: 6px 0; padding: 6px 0;
height: 36px; height: 36px;
...@@ -68,15 +77,19 @@ ...@@ -68,15 +77,19 @@
background: no-repeat; background: no-repeat;
border: none; border: none;
} }
&.valid { &.valid {
background-color: var(--base-color); background-color: var(--base-color);
} }
&.invalid { &.invalid {
background-color: white; background-color: white;
} }
&.optional { &.optional {
border: dashed thin var(--base-color); border: dashed thin var(--base-color);
} }
&::before { &::before {
position: absolute; position: absolute;
content: ""; content: "";
...@@ -86,6 +99,7 @@ ...@@ -86,6 +99,7 @@
transform: translateY(-50%); transform: translateY(-50%);
left: 100%; left: 100%;
} }
&.active::after { &.active::after {
position: absolute; position: absolute;
content: ""; content: "";
...@@ -96,8 +110,10 @@ ...@@ -96,8 +110,10 @@
left: -1px; left: -1px;
} }
} }
li:last-child { li:last-child {
margin-right: 0; margin-right: 0;
&::before { &::before {
display: none; display: none;
} }
...@@ -108,6 +124,7 @@ ...@@ -108,6 +124,7 @@
.wizard-list { .wizard-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
.wizard-item { .wizard-item {
.wizard-content { .wizard-content {
max-width: 555px; max-width: 555px;
...@@ -140,6 +157,7 @@ form.default fieldset.radiobutton-set { ...@@ -140,6 +157,7 @@ form.default fieldset.radiobutton-set {
margin: 0px; margin: 0px;
width: 100%; width: 100%;
} }
border: none; border: none;
padding: 0px; padding: 0px;
margin-left: 0px; margin-left: 0px;
...@@ -148,10 +166,12 @@ form.default fieldset.radiobutton-set { ...@@ -148,10 +166,12 @@ form.default fieldset.radiobutton-set {
>input[type=radio] { >input[type=radio] {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
&:focus+label { &:focus+label {
outline: auto; outline: auto;
} }
} }
>label { >label {
cursor: pointer; cursor: pointer;
border: 1px solid var(--content-color-40); border: 1px solid var(--content-color-40);
...@@ -163,26 +183,33 @@ form.default fieldset.radiobutton-set { ...@@ -163,26 +183,33 @@ form.default fieldset.radiobutton-set {
padding-bottom: 2px; padding-bottom: 2px;
margin-bottom: 0; margin-bottom: 0;
border-top: none; border-top: none;
:not(.undecorated) { :not(.undecorated) {
text-indent: 0; text-indent: 0;
} }
>.text { >.text {
width: 100%; width: 100%;
margin-left: 10px; margin-left: 10px;
} }
>.unchecked { >.unchecked {
margin-right: 0; margin-right: 0;
} }
>.check { >.check {
display: none; display: none;
} }
} }
>label:first-of-type { >label:first-of-type {
border-top: 1px solid var(--content-color-40); border-top: 1px solid var(--content-color-40);
} }
>label:last-child::after { >label:last-child::after {
content: none; content: none;
} }
>div { >div {
border: 1px solid var(--content-color-40); border: 1px solid var(--content-color-40);
border-top: none; border-top: none;
...@@ -190,21 +217,64 @@ form.default fieldset.radiobutton-set { ...@@ -190,21 +217,64 @@ form.default fieldset.radiobutton-set {
padding: 10px; padding: 10px;
} }
>input[type=radio]:checked+label { >input[type=radio]:checked+label {
background-color: var(--content-color-20); background-color: var(--content-color-20);
transition: background-color 200ms; transition: background-color 200ms;
>.unchecked { >.unchecked {
display: none; display: none;
} }
>.check { >.check {
display: inline-block; display: inline-block;
} }
} }
>input[type=radio]:checked+label+div { >input[type=radio]:checked+label+div {
display: block; display: block;
.description { .description {
animation-duration: 400ms; animation-duration: 400ms;
animation-name: terms_of_use_fadein; 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 @@ ...@@ -83,7 +83,7 @@
{{ $gettext('Farbe') }} {{ $gettext('Farbe') }}
<studip-select v-model="color" :options="colors" :reduce="(color) => color.class" label="class"> <studip-select v-model="color" :options="colors" :reduce="(color) => color.class" label="class">
<template #open-indicator="selectAttributes"> <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>
<template #no-options> <template #no-options>
{{ $gettext('Es steht keine Auswahl zur Verfügung.') }} {{ $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 @@ ...@@ -22,10 +22,10 @@
:aria-description="unit.element.attributes.title" :aria-description="unit.element.attributes.title"
/> />
<label @click="selectedUnit = unit" :key="'label-' + unit.id" :for="'cw-element-link-unit-' + unit.id"> <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> <div class="text">{{ unit.element.attributes.title }}</div>
<studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" /> <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
<studip-icon shape="check-circle" size="24" class="check" /> <studip-icon shape="check-circle" :size="24" class="check" />
</label> </label>
</template> </template>
</fieldset> </fieldset>
......
resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue
+ 14
− 14
View file @ 1c2d4c6a
...@@ -21,10 +21,10 @@ ...@@ -21,10 +21,10 @@
:aria-description="text.sourceSelf" :aria-description="text.sourceSelf"
/> />
<label @click="source = 'self'" for="cw-shelf-copy-source-self"> <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> <div class="text">{{ text.sourceSelf }}</div>
<studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" /> <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
<studip-icon shape="check-circle" size="24" class="check" /> <studip-icon shape="check-circle" :size="24" class="check" />
</label> </label>
</template> </template>
<input <input
...@@ -35,10 +35,10 @@ ...@@ -35,10 +35,10 @@
:aria-description="text.sourceCourses" :aria-description="text.sourceCourses"
/> />
<label @click="source = 'courses'" for="cw-shelf-copy-source-courses"> <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> <div class="text">{{ text.sourceCourses }}</div>
<studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" /> <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
<studip-icon shape="check-circle" size="24" class="check" /> <studip-icon shape="check-circle" :size="24" class="check" />
</label> </label>
<input <input
id="cw-shelf-copy-source-users" id="cw-shelf-copy-source-users"
...@@ -48,10 +48,10 @@ ...@@ -48,10 +48,10 @@
:aria-description="text.sourceUsers" :aria-description="text.sourceUsers"
/> />
<label @click="source = 'users'" for="cw-shelf-copy-source-users"> <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> <div class="text">{{ text.sourceUsers }}</div>
<studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" /> <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
<studip-icon shape="check-circle" size="24" class="check" /> <studip-icon shape="check-circle" :size="24" class="check" />
</label> </label>
</fieldset> </fieldset>
<template v-if="source === 'courses'"> <template v-if="source === 'courses'">
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
> >
<template #open-indicator="selectAttributes"> <template #open-indicator="selectAttributes">
<span v-bind="selectAttributes" <span v-bind="selectAttributes"
><studip-icon shape="arr_1down" size="10" ><studip-icon shape="arr_1down" :size="10"
/></span> /></span>
</template> </template>
</studip-select> </studip-select>
...@@ -105,10 +105,10 @@ ...@@ -105,10 +105,10 @@
:aria-description="unit.element.attributes.title" :aria-description="unit.element.attributes.title"
/> />
<label @click="selectedUnit = unit" :key="'label-' + unit.id" :for="'cw-shelf-copy-unit-' + unit.id"> <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> <div class="text">{{ unit.element.attributes.title }}</div>
<studip-icon shape="radiobutton-unchecked" size="24" class="unchecked" /> <studip-icon shape="radiobutton-unchecked" :size="24" class="unchecked" />
<studip-icon shape="check-circle" size="24" class="check" /> <studip-icon shape="check-circle" :size="24" class="check" />
</label> </label>
</template> </template>
</fieldset> </fieldset>
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
> >
<template #open-indicator="selectAttributes"> <template #open-indicator="selectAttributes">
<span v-bind="selectAttributes" <span v-bind="selectAttributes"
><studip-icon shape="arr_1down" size="10" ><studip-icon shape="arr_1down" :size="10"
/></span> /></span>
</template> </template>
<template #no-options> <template #no-options>
......
resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue
+ 1
− 1
View file @ 1c2d4c6a
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
> >
<template #open-indicator="selectAttributes"> <template #open-indicator="selectAttributes">
<span v-bind="selectAttributes" <span v-bind="selectAttributes"
><studip-icon shape="arr_1down" size="10" ><studip-icon shape="arr_1down" :size="10"
/></span> /></span>
</template> </template>
<template #no-options> <template #no-options>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment