diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 1f04e4c82bccf9c5757ee27352ed500306806eed..384f7338c86e0eaf2fb7e3443d225f361eb8befb 100755
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -977,7 +977,6 @@ form.cw-container-dialog-edit-form {
background-repeat: no-repeat;
background-color: transparent;
cursor: pointer;
- outline: none;
}
.cw-keypoint-content {
@@ -2122,7 +2121,6 @@ d i a l o g
margin-right: -10px;
margin-left: 2em;
cursor: pointer;
- outline: none;
}
.studip-dialog-content {
color: $black;
@@ -2164,7 +2162,9 @@ d i a l o g
background: $activity-color none repeat scroll 0 0;
}
.studip-dialog-close-button {
- @include background-icon(decline, info);
+ @include background-icon(decline, clickable);
+ border: none;
+ background-color: transparent;
}
.studip-dialog-content {
@include background-icon(question-circle-full, status-yellow, 32);
@@ -2916,7 +2916,6 @@ a u d i o b l o c k
height: 46px;
width: 46px;
display: inline-block;
- outline: none;
&:hover {
background-color: $base-color;
@@ -3020,28 +3019,33 @@ a u d i o b l o c k
list-style: none;
cursor: pointer;
- .cw-playlist-item {
- @include background-icon(file-audio2, clickable, 24);
- background-repeat: no-repeat;
- background-position: 1em center;
-
- margin: 1em;
- padding: 1em;
- padding-left: 4em;
- color: $base-color;
- &:hover {
- color: $active-color;
- }
- &.current-item {
- @include background-icon(play, clickable, 24);
- font-weight: 700;
- &.is-playing {
- @include background-icon(pause, clickable, 24);
- }
- }
+ li {
+ margin: 0 1em;
&:not(:last-child) {
border-bottom: solid thin $dark-gray-color-30;
}
+
+ .cw-playlist-item {
+ display: block;
+ @include background-icon(file-audio2, clickable, 24);
+ background-repeat: no-repeat;
+ background-position: 1em center;
+
+ margin: 1em 0;
+ padding: 1em;
+ padding-left: 4em;
+ color: $base-color;
+ &:hover {
+ color: $active-color;
+ }
+ &.current-item {
+ @include background-icon(play, clickable, 24);
+ font-weight: 700;
+ &.is-playing {
+ @include background-icon(pause, clickable, 24);
+ }
+ }
+ }
}
}
.cw-audio-playlist-recorder {
@@ -3380,10 +3384,6 @@ c a n v a s b l o c k
background-repeat: no-repeat;
background-size: 24px 24px;
- &:focus {
- outline: none;
- }
-
&.cw-canvasblock-color {
$colors: (
white: #ffffff,
@@ -3495,7 +3495,6 @@ d o c u m e n t b l o c k
width: 24px;
margin: 2px 12px;
cursor: pointer;
- outline: none;
}
.cw-pdf-button-prev {
@@ -3961,7 +3960,7 @@ dialog cards block
.cw-block-dialog-cards-content {
display: flex;
.cw-dialogcards {
- flex: auto;
+ flex-grow: 2;
.scene {
margin: 0 auto;
width: 440px;
@@ -4060,10 +4059,9 @@ dialog cards block
background-repeat: no-repeat;
background-color: $base-color;
border: none;
- outline: none;
display: block;
z-index: 4;
- margin: auto;
+ margin: auto 2px;
padding: 0;
cursor: pointer;
diff --git a/resources/vue/components/StudipDialog.vue b/resources/vue/components/StudipDialog.vue
index 1dabe6ecf6ca553da113a1ab7d525d18631aca2f..5bcd3034c71712237cededc1ba608bd284154558 100755
--- a/resources/vue/components/StudipDialog.vue
+++ b/resources/vue/components/StudipDialog.vue
@@ -42,13 +42,13 @@
{{ dialogTitle }}
</span>
<slot name="dialogHeader"></slot>
- <span
+ <button
:aria-label="$gettext('Diesen Dialog schließen')"
- class="studip-dialog-close-button"
:title="$gettext('Schließen')"
+ class="studip-dialog-close-button"
@click="closeDialog"
>
- </span>
+ </button>
</header>
<section
:id="dialogDescId"
diff --git a/resources/vue/components/courseware/CoursewareAudioBlock.vue b/resources/vue/components/courseware/CoursewareAudioBlock.vue
index 5adb790e87b63d5762d10e466641d419e7c567ff..6c4c733f1a55e49a73e52ed11f8e8bbfaf213d42 100755
--- a/resources/vue/components/courseware/CoursewareAudioBlock.vue
+++ b/resources/vue/components/courseware/CoursewareAudioBlock.vue
@@ -44,17 +44,20 @@
</div>
<div class="cw-audio-playlist-wrapper">
<ul v-show="hasPlaylist" class="cw-audio-playlist">
- <li
- v-for="(file, index) in files"
- :key="file.id"
- :class="{
- 'is-playing': index === currentPlaylistItem && playing,
- 'current-item': index === currentPlaylistItem,
- }"
- class="cw-playlist-item"
- @click="setCurrentPlaylistItem(index)"
- >
- {{ file.name }}
+ <li v-for="(file, index) in files" :key="file.id">
+ <a
+ :aria-current="(index === currentPlaylistItem) ? 'true' : 'false'"
+ :class="{
+ 'is-playing': index === currentPlaylistItem && playing,
+ 'current-item': index === currentPlaylistItem,
+ }"
+ :title="$gettext('Audiodatei:') + ' ' + file.name"
+ href="#"
+ class="cw-playlist-item"
+ @click.prevent="setCurrentPlaylistItem(index)"
+ >
+ {{ file.name }}
+ </a>
</li>
</ul>
<div v-if="emptyAudio" class="cw-file-empty">
diff --git a/resources/vue/components/courseware/CoursewareCanvasBlock.vue b/resources/vue/components/courseware/CoursewareCanvasBlock.vue
index 6aed6daaad0a546f22a8299ab6aabb0fe5bd0dbd..f0d495f4151d429ed81e36bc4f4da51a1a842d5e 100755
--- a/resources/vue/components/courseware/CoursewareCanvasBlock.vue
+++ b/resources/vue/components/courseware/CoursewareCanvasBlock.vue
@@ -21,11 +21,12 @@
</div>
<div class="cw-canvasblock-buttonset">
<button
- v-for="(rgba, color) in colors"
- :key="color"
+ v-for="color in colors"
+ :key="color.name"
class="cw-canvasblock-color"
- :class="[currentColor === color ? 'selected-color' : '', color]"
- @click="setColor(color)"
+ :class="[currentColor === color.name ? 'selected-color' : '', color.name]"
+ :title="color.title"
+ @click="setColor(color.name)"
/>
</div>
<div class="cw-canvasblock-buttonset">
@@ -179,18 +180,18 @@ export default {
clickY: [],
clickDrag: [],
clickColor: [],
- colors: {
- white: 'rgba(255,255,255,1)',
- blue: 'rgba(52,152,219,1)',
- green: 'rgba(46,204,113,1)',
- purple: 'rgba(155,89,182,1)',
- red: 'rgba(231,76,60,1)',
- yellow: 'rgba(254,211,48,1)',
- orange: 'rgba(243,156,18,1)',
- grey: 'rgba(149,165,166,1)',
- darkgrey: 'rgba(52,73,94,1)',
- black: 'rgba(0,0,0,1)',
- },
+ colors: [
+ {rgba: 'rgba(255,255,255,1)', title: this.$gettext('weiß'), name: 'white'},
+ {rgba: 'rgba(52,152,219,1)', title: this.$gettext('blau'), name: 'blue'},
+ {rgba: 'rgba(46,204,113,1)', title: this.$gettext('grün'), name: 'green'},
+ {rgba: 'rgba(155,89,182,1)', title: this.$gettext('lila'), name: 'purple'},
+ {rgba: 'rgba(231,76,60,1)', title: this.$gettext('rot'), name: 'red'},
+ {rgba: 'rgba(254,211,48,1)', title: this.$gettext('gelb'), name: 'yellow'},
+ {rgba: 'rgba(243,156,18,1)', title: this.$gettext('orange'), name: 'orange'},
+ {rgba: 'rgba(149,165,166,1)', title: this.$gettext('grau'), name: 'grey'},
+ {rgba: 'rgba(52,73,94,1)', title: this.$gettext('dunkel grau'), name: 'darkgrey'},
+ {rgba: 'rgba(0,0,0,1)', title: this.$gettext('schwarz'), name: 'black'},
+ ],
currentColor: '',
currentColorRGBA: '',
sizes: { small: 2, normal: 5, large: 8, huge: 12 },
@@ -303,7 +304,7 @@ export default {
return;
}
this.currentColor = color;
- this.currentColorRGBA = this.colors[color];
+ this.currentColorRGBA = this.colors.find(c => c.name === color).rgba;
},
setSize(size) {
if (this.textInput) {