diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 827c30864789c21665cbf48349c280cece136437..ce2a2096bfd921972a46eed7e694469baabaf278 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -78,15 +78,18 @@ $blockadder-items: (
timeline: date-cycle,
typewriter: block-typewriter,
video: video2,
- accordion: block-accordion,
- list: view-list,
- tabs: block-tabs,
biography-achievements: medal,
biography-career: ranking,
biography-personal-information: own-license,
biography-goals: radar
);
+$containeradder-items: (
+ accordion: block-accordion,
+ list: view-list,
+ tabs: block-tabs,
+);
+
$achievement-types: (
certificate: file-text,
accreditation: vcard,
@@ -1864,30 +1867,60 @@ b l o c k a d d e r
}
}
-.cw-blockadder-item {
- margin-bottom: 4px;
- padding: 1em 1em 1em 6em;
- @include background-icon(unit-test, clickable, 48);
- background-position: 12px center;
- background-repeat: no-repeat;
- border: solid thin $content-color-40;
- cursor: pointer;
+.cw-element-adder-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+.cw-blockadder-item-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+ grid-auto-rows: auto;
+ grid-gap: 4px;
- &:hover {
- border-color: $base-color;
- }
+ .cw-blockadder-item-wrapper {
+ display: flex;
+ border: solid thin var(--content-color-40);
+ max-width: 254px;
- @each $item, $icon in $blockadder-items {
- &.cw-blockadder-item-#{$item} {
- @include background-icon($icon, clickable, 48);
+ &:hover {
+ border-color: var(--base-color);
}
- }
- .cw-blockadder-item-title {
- font-weight: 600;
+ .cw-blockadder-item {
+ padding: 64px 10px 4px 10px;
+ @include background-icon(unit-test, clickable, 48);
+ background-position: 10px 10px;
+ background-repeat: no-repeat;
+ cursor: pointer;
+
+ @each $item, $icon in $blockadder-items {
+ &.cw-blockadder-item-#{$item} {
+ @include background-icon($icon, clickable, 48);
+ }
+ }
+
+ .cw-blockadder-item-title {
+ display: inline-block;
+ font-weight: 600;
+ margin-bottom: 2px;
+ }
+ .cw-blockadder-item-description {
+ display: inline-block;
+ margin: 0 0 4px;
+ }
+ }
+ .cw-blockadder-item-fav {
+ height: 32px;
+ padding: 8px;
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ }
}
}
+
.cw-block-adder-area {
background-color: $white;
border: solid thin $content-color-40;
@@ -1935,38 +1968,28 @@ b l o c k a d d e r
margin-top: 5px;
}
-.cw-element-adder-favs-wrapper {
- display: flex;
- .cw-element-adder-all-blocks {
- &.fav-edit-active {
- .cw-blockadder-item {
- height: 5em;
- }
- }
+.cw-containeradder-item {
+ margin-bottom: 4px;
+ padding: 1em 1em 1em 6em;
+ @include background-icon(unit-test, clickable, 48);
+ background-position: 12px center;
+ background-repeat: no-repeat;
+ border: solid thin $content-color-40;
+ cursor: pointer;
+ &:hover {
+ border-color: $base-color;
}
- .cw-element-adder-favs {
-
- .cw-block-fav-item {
- @include background-icon(star-empty, clickable, 48);
- background-position: center;
- background-repeat: no-repeat;
- height: 5em;
- width: 5em;
- padding: 1em;
- margin: 0 0 4px 4px;
- border: solid thin $content-color-40;
- cursor: pointer;
- &:hover {
- border-color: $base-color;
- }
-
- &.cw-block-fav-item-active {
- @include background-icon(star, clickable, 48);
- }
+ @each $item, $icon in $containeradder-items {
+ &.cw-containeradder-item-#{$item} {
+ @include background-icon($icon, clickable, 48);
}
}
+
+ .cw-containeradder-item-title {
+ font-weight: 600;
+ }
}
diff --git a/resources/vue/components/courseware/CoursewareBlockHelper.vue b/resources/vue/components/courseware/CoursewareBlockHelper.vue
index 2d7acbce6c66ac4b7f8d8e4eb21e7c6b45a7bb03..1a709f8e100e8138aaa60dfc909f90b8e047e8d9 100644
--- a/resources/vue/components/courseware/CoursewareBlockHelper.vue
+++ b/resources/vue/components/courseware/CoursewareBlockHelper.vue
@@ -1,7 +1,7 @@
<template>
<div class="block-helper">
<courseware-companion-box :msgCompanion="currentQuestion.text" :mood="companionMood"/>
- <div v-if="showBlocks" class="cw-block-helper-results">
+ <div v-if="showBlocks" class="cw-block-helper-results cw-element-adder-wrapper ">
<courseware-blockadder-item
v-for="(block, index) in selectedBlockTypes"
:key="index"
diff --git a/resources/vue/components/courseware/CoursewareBlockadderItem.vue b/resources/vue/components/courseware/CoursewareBlockadderItem.vue
index 93c31f424debd7161784dbc8358d891b04072e0e..5e4b850971958ed555fa29359fe54ebdd2d4bcd3 100644
--- a/resources/vue/components/courseware/CoursewareBlockadderItem.vue
+++ b/resources/vue/components/courseware/CoursewareBlockadderItem.vue
@@ -1,14 +1,22 @@
<template>
- <a href="#" @click.prevent="addBlock">
- <div class="cw-blockadder-item" :class="['cw-blockadder-item-' + type]">
+ <div class="cw-blockadder-item-wrapper">
+ <a href="#" @click.prevent="addBlock" class="cw-blockadder-item" :class="['cw-blockadder-item-' + type]">
<header class="cw-blockadder-item-title">
{{ title }}
</header>
<p class="cw-blockadder-item-description">
{{ description }}
</p>
- </div>
- </a>
+ </a>
+ <button
+ class="cw-blockadder-item-fav"
+ :title="favButtonTitle"
+ @click="toggleFavItem()"
+ >
+ <studip-icon :shape="blockTypeIsFav ? 'star' : 'star-empty'" :size="20" />
+ </button>
+ </div>
+
</template>
<script>
@@ -32,7 +40,24 @@ export default {
blockAdder: 'blockAdder',
blockById: 'courseware-blocks/byId',
lastCreatedBlock: 'courseware-blocks/lastCreated',
+ favoriteBlockTypes: 'favoriteBlockTypes',
}),
+ blockTypeIsFav() {
+ return this.favoriteBlockTypes.some((type) => type.type === this.type);
+ },
+ favButtonTitle() {
+ if (this.blockTypeIsFav) {
+ return this.$gettextInterpolate(
+ this.$gettext('%{ blockName } Block aus den Favoriten entfernen'),
+ { blockName: this.title }
+ );
+ }
+
+ return this.$gettextInterpolate(
+ this.$gettext('%{ blockName } Block zu Favoriten hinzufügen'),
+ { blockName: this.title }
+ );
+ }
},
methods: {
...mapActions({
@@ -44,6 +69,8 @@ export default {
unlockObject: 'unlockObject',
loadBlock: 'courseware-blocks/loadById',
updateContainer: 'updateContainer',
+ removeFavoriteBlockType: 'removeFavoriteBlockType',
+ addFavoriteBlockType: 'addFavoriteBlockType',
}),
async addBlock() {
if (Object.keys(this.blockAdder).length !== 0) {
@@ -76,6 +103,13 @@ export default {
});
}
},
+ toggleFavItem() {
+ if (this.blockTypeIsFav) {
+ this.removeFavoriteBlockType(this.type);
+ } else {
+ this.addFavoriteBlockType(this.type);
+ }
+ },
},
};
</script>
diff --git a/resources/vue/components/courseware/CoursewareContainerAdderItem.vue b/resources/vue/components/courseware/CoursewareContainerAdderItem.vue
index 5cc82cd43d0a67d7dbda8112bfd64769c37f79e6..78cc4eda3bc714b7717b9763e07916f98c1ec235 100644
--- a/resources/vue/components/courseware/CoursewareContainerAdderItem.vue
+++ b/resources/vue/components/courseware/CoursewareContainerAdderItem.vue
@@ -1,10 +1,10 @@
<template>
<a href="#" @click.prevent="addContainer">
- <div class="cw-blockadder-item" :class="['cw-blockadder-item-' + type]">
- <header class="cw-blockadder-item-title">
+ <div class="cw-containeradder-item" :class="['cw-containeradder-item-' + type]">
+ <header class="cw-containeradder-item-title">
{{ title }}
</header>
- <p class="cw-blockadder-item-description">
+ <p class="cw-containeradder-item-description">
{{ description }}
</p>
</div>
diff --git a/resources/vue/components/courseware/CoursewareToolsBlockadder.vue b/resources/vue/components/courseware/CoursewareToolsBlockadder.vue
index 5f6ffd42991afac53eb719fe7b072ba189b68bf4..efdeb4ef50e57cbe02b0034d9aa7e1aebc537419 100644
--- a/resources/vue/components/courseware/CoursewareToolsBlockadder.vue
+++ b/resources/vue/components/courseware/CoursewareToolsBlockadder.vue
@@ -48,7 +48,7 @@
</button>
</div>
- <div v-if="filteredBlockTypes.length > 0">
+ <div v-if="filteredBlockTypes.length > 0" class="cw-blockadder-item-list">
<courseware-blockadder-item
v-for="(block, index) in filteredBlockTypes"
:key="index"
@@ -58,12 +58,11 @@
@blockAdded="$emit('blockAdded')"
/>
</div>
- <div v-else>
- <courseware-companion-box
- :msgCompanion="$gettext('Es wurden keine passenden Blöcke gefunden.')"
- mood="pointing"
- />
- </div>
+ <courseware-companion-box
+ v-else
+ :msgCompanion="$gettext('Es wurden keine passenden Blöcke gefunden.')"
+ mood="pointing"
+ />
</courseware-tab>
<courseware-tab :name="$gettext('Abschnitte')" :selected="showContaineradder" :index="1" :style="{ maxHeight: maxHeight + 'px' }">
<courseware-collapsible-box