diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss index 28d37c98eb5717fe823135e33f0460fca6db21ee..eda8513c6042d79aadb6dea7d43e1c8953d4f318 100755 --- a/resources/assets/stylesheets/scss/courseware.scss +++ b/resources/assets/stylesheets/scss/courseware.scss @@ -2645,12 +2645,16 @@ m a n a g e r .cw-manager-container-title { font-weight: 700; + display: flex; + gap: 5px; + justify-content: space-between; padding: 4px 4px 4px 8px; color: $base-color; background-color: $content-color-20; &.cw-manager-container-clickable-title { cursor: pointer; + justify-content: start; } img { @@ -2662,12 +2666,17 @@ m a n a g e r } .cw-manager-block { border: solid thin $content-color-40; + display: flex; + gap: 5px; + justify-content: space-between; padding: 1em; margin-bottom: 4px; background-color: $white; &.cw-manager-block-clickable { cursor: pointer; + justify-content: start; + &:hover { background-color: $base-color; color: $white; @@ -2771,21 +2780,14 @@ m a n a g e r .cw-manager-block-buttons, .cw-manager-container-buttons, .cw-manager-element-item-buttons { - display: flex; - justify-content: end; - min-width: 38px; - - a { - flex: unset; - } - - img { + button { + background: transparent; + border: none; cursor: pointer; - transition: opacity 0.4s ease-in-out; + padding: 0; - &.cw-manager-icon-disabled { - opacity: 0; - cursor: unset; + &[disabled] { + visibility: hidden; } } } diff --git a/resources/vue/components/courseware/CoursewareManagerBlock.vue b/resources/vue/components/courseware/CoursewareManagerBlock.vue index 27d834ba780a18bdc3d79783f2ffd32393e25082..b28c085e8dafeb4eaae7cf2f374076ecabd8bbb7 100755 --- a/resources/vue/components/courseware/CoursewareManagerBlock.vue +++ b/resources/vue/components/courseware/CoursewareManagerBlock.vue @@ -1,12 +1,16 @@ <template> <div :class="{ 'cw-manager-block-clickable': inserter }" class="cw-manager-block" @click="clickItem"> <span v-if="inserter"> - <studip-icon shape="arr_2left" size="16" role="sort" /> + <studip-icon shape="arr_2left" role="sort" /> </span> {{ block.attributes.title }} <div v-if="sortBlocks" class="cw-manager-block-buttons"> - <studip-icon :class="{'cw-manager-icon-disabled' : !canMoveUp}" shape="arr_2up" size="16" role="sort" @click="moveUp" /> - <studip-icon :class="{'cw-manager-icon-disabled' : !canMoveDown}" shape="arr_2down" size="16" role="sort" @click="moveDown" /> + <button :disabled="!canMoveUp" @click="moveUp" :title="$gettext('Element nach oben verschieben')"> + <studip-icon shape="arr_2up" role="sort" /> + </button> + <button :disabled="!canMoveDown" @click="moveDown" :title="$gettext('Element nach unten verschieben')"> + <studip-icon shape="arr_2down" role="sort" /> + </button> </div> </div> </template> diff --git a/resources/vue/components/courseware/CoursewareManagerContainer.vue b/resources/vue/components/courseware/CoursewareManagerContainer.vue index ddb2bbb5f186562332cf99f93182baf5a4569e53..9849c17ad0e894bee1029988d47ea600611d45f2 100755 --- a/resources/vue/components/courseware/CoursewareManagerContainer.vue +++ b/resources/vue/components/courseware/CoursewareManagerContainer.vue @@ -6,12 +6,16 @@ @click="clickItem" > <span v-if="inserter"> - <studip-icon shape="arr_2left" size="16" role="sort" /> + <studip-icon shape="arr_2left" role="sort" /> </span> {{ container.attributes.title }} ({{container.attributes.width}}) <div v-if="sortContainers" class="cw-manager-container-buttons"> - <studip-icon :class="{'cw-manager-icon-disabled' : !canMoveUp}" shape="arr_2up" role="sort" @click="moveUp" /> - <studip-icon :class="{'cw-manager-icon-disabled' : !canMoveDown}" shape="arr_2down" role="sort" @click="moveDown" /> + <button :disabled="!canMoveUp" @click="moveUp" :title="$gettext('Element nach oben verschieben')"> + <studip-icon shape="arr_2up" role="sort" /> + </button> + <button :disabled="!canMoveDown" @click="moveDown" :title="$gettext('Element nach unten verschieben')"> + <studip-icon shape="arr_2down" role="sort" /> + </button> </div> </div> <courseware-collapsible-box :open="false" :title="$gettext('Blöcke')" class="cw-manager-container-blocks">