From 4ca88e3b7411fcf127a997effd3c1ad318ae38e9 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Fri, 5 Jul 2024 13:16:25 +0000
Subject: [PATCH] fix #4355
Closes #4355
Merge request studip/studip!3170
---
.../scss/courseware/blockadder.scss | 25 ++++++++++++++++++
.../toolbar/CoursewareBlockadderItem.vue | 5 ++--
.../toolbar/CoursewareContainerAdderItem.vue | 26 ++++++-------------
3 files changed, 35 insertions(+), 21 deletions(-)
diff --git a/resources/assets/stylesheets/scss/courseware/blockadder.scss b/resources/assets/stylesheets/scss/courseware/blockadder.scss
index f0e993a9b7b..632ca88ddee 100644
--- a/resources/assets/stylesheets/scss/courseware/blockadder.scss
+++ b/resources/assets/stylesheets/scss/courseware/blockadder.scss
@@ -9,6 +9,7 @@
display: flex;
position: relative;
border: solid thin var(--content-color-40);
+ background-color: var(--white);
max-width: 268px;
.cw-sortable-handle {
@@ -23,6 +24,13 @@
}
}
.cw-blockadder-item {
+ display: inline-flex;
+ align-items: flex-start;
+ flex-direction: column;
+ text-align: left;
+ color: var(--base-color);
+ border: none;
+ background-color: var(--white);
padding: 64px 10px 4px 10px;
@include background-icon(unit-test, clickable, 48);
background-position: 16px 10px;
@@ -43,6 +51,10 @@
display: inline-block;
margin: 0 0 4px;
}
+
+ &:hover {
+ color: var(--active-color);
+ }
}
.cw-blockadder-item-fav {
height: 32px;
@@ -71,11 +83,15 @@
}
.cw-containeradder-item {
+ border: none;
+ background-color: var(--white);
min-height: 5em;
padding: 1em 1em 1em 6em;
@include background-icon(unit-test, clickable, 48);
background-position: 16px center;
background-repeat: no-repeat;
+ text-align: left;
+ color: var(--base-color);
cursor: pointer;
@each $item, $icon in $containeradder-items {
@@ -87,6 +103,10 @@
.cw-containeradder-item-title {
font-weight: 600;
}
+
+ &:hover {
+ color: var(--active-color);
+ }
}
}
@@ -135,6 +155,10 @@
outline-width: 1px;
}
}
+
+ &.sortable-ghost {
+ background-color: var(--active-color);
+ }
}
.cw-element-inserter-wrapper {
display: grid;
@@ -144,6 +168,7 @@
margin-bottom: 8px;
.cw-clipboard-item-wrapper {
+ background-color: var(--white);
display: flex;
border: solid thin var(--content-color-40);
max-width: 248px;
diff --git a/resources/vue/components/courseware/toolbar/CoursewareBlockadderItem.vue b/resources/vue/components/courseware/toolbar/CoursewareBlockadderItem.vue
index 47b66b19f31..b798d7f155a 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareBlockadderItem.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareBlockadderItem.vue
@@ -1,14 +1,14 @@
<template>
<div class="cw-blockadder-item-wrapper">
<span class="cw-sortable-handle cw-sortable-handle-blockadder"></span>
- <a href="#" class="cw-blockadder-item" :class="['cw-blockadder-item-' + type]" @click.prevent="addBlock">
+ <button class="cw-blockadder-item" :class="['cw-blockadder-item-' + type]" @click.prevent="addBlock">
<header class="cw-blockadder-item-title">
{{ title }}
</header>
<p class="cw-blockadder-item-description">
{{ description }}
</p>
- </a>
+ </button>
<button
class="cw-blockadder-item-fav"
:title="favButtonTitle"
@@ -17,7 +17,6 @@
<studip-icon :shape="blockTypeIsFav ? 'star' : 'star-empty'" :size="20" />
</button>
</div>
-
</template>
<script>
diff --git a/resources/vue/components/courseware/toolbar/CoursewareContainerAdderItem.vue b/resources/vue/components/courseware/toolbar/CoursewareContainerAdderItem.vue
index 539d8718758..950c42f4842 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareContainerAdderItem.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareContainerAdderItem.vue
@@ -1,24 +1,14 @@
<template>
<div class="cw-containeradder-item-wrapper">
<span class="cw-sortable-handle cw-sortable-handle-containeradder"></span>
- <a href="#" @click.prevent="addNewContainer">
- <div class="cw-containeradder-item" :class="['cw-containeradder-item-' + type]">
- <header class="cw-containeradder-item-title">
- {{ title }}
- </header>
- <p class="cw-containeradder-item-description">
- {{ description }}
- </p>
- </div>
- </a>
- <li class="cw-container-dragitem cw-container-item-sortable" ref="container-drag-item">
- <div class="cw-container cw-container-list cw-container-item" :class="['cw-container-colspan-' + colspan]">
- <div class="cw-container-content">
- <header class="cw-container-header">{{ title }}</header>
- <div class="cw-block-wrapper">{{ description }}</div>
- </div>
- </div>
- </li>
+ <button class="cw-containeradder-item" :class="['cw-containeradder-item-' + type]" @click.prevent="addNewContainer">
+ <header class="cw-containeradder-item-title">
+ {{ title }}
+ </header>
+ <p class="cw-containeradder-item-description">
+ {{ description }}
+ </p>
+ </button>
</div>
</template>
<script>
--
GitLab