diff --git a/resources/assets/stylesheets/scss/courseware/blockadder.scss b/resources/assets/stylesheets/scss/courseware/blockadder.scss
index b3f48344ac877c803e376d8d580c53bb61f114b2..93325dd32a20c562ecd4f0386f73d24ca3423360 100644
--- a/resources/assets/stylesheets/scss/courseware/blockadder.scss
+++ b/resources/assets/stylesheets/scss/courseware/blockadder.scss
@@ -136,7 +136,7 @@
}
.cw-element-inserter-wrapper {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
grid-auto-rows: auto;
grid-gap: 4px;
margin-bottom: 8px;
diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss
index 0670486c91a358091291574febad6f62d87c84ba..fdabbf218027ec3dceed6181d3eaa769c9dbfbec 100644
--- a/resources/assets/stylesheets/scss/courseware/toolbar.scss
+++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss
@@ -14,7 +14,8 @@
min-height: 100%;
border: solid thin var(--content-color-40);
background-color: var(--white);
- overflow: hidden;
+ overflow-y: auto;
+ overflow-x: hidden;
position: relative;
padding: 0 4px;
top: 0;
@@ -32,11 +33,6 @@
right: 0;
}
- .cw-toolbar-tool-content {
- overflow-y: auto;
- padding-right: 8px;
- }
-
.cw-toolbar-blocks {
.input-group.files-search {
&.search {
@@ -100,12 +96,6 @@
}
}
-
- .cw-toolbar-clipboard {
- .cw-collapsible {
- margin-bottom: 4px;
- }
- }
}
.cw-toolbar-folded-wrapper {
display: flex;
@@ -134,7 +124,6 @@
&.cw-toolbar-button-toggle {
text-align: end;
- flex-grow: 1;
}
&.active {
@@ -153,7 +142,7 @@
.cw-toolbar-tools.hd {
.cw-toolbar-button-wrapper {
.cw-toolbar-button {
- min-width: 110px;
+ width: 128px;
padding: 2px 16px 0 16px;
&.cw-toolbar-button-toggle {
text-align: end;
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
index dc70348f1fe20858763f62c50283203cf8fca66c..8f82eac052c92a357b4bb42968a05a9f2faff8c9 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbar.vue
@@ -2,7 +2,7 @@
<div class="cw-toolbar-wrapper">
<div id="cw-toolbar" class="cw-toolbar" :style="toolbarStyle">
<div v-if="showTools" class="cw-toolbar-tools" :class="{ unfold: unfold, hd: isHd, wqhd: isWqhd }">
- <div id="cw-toolbar-nav" class="cw-toolbar-button-wrapper">
+ <div class="cw-toolbar-button-wrapper">
<button
class="cw-toolbar-button"
:class="{ active: activeTool === 'blockAdder' }"
@@ -35,19 +35,9 @@
<studip-icon shape="arr_2right" :size="24" />
</button>
</div>
- <div class="cw-toolbar-tool-wrapper">
- <CoursewareToolbarBlocks
- v-if="activeTool === 'blockAdder'"
- :toolbarContentHeight="toolbarContentHeight"
- />
- <CoursewareToolbarContainers
- v-if="activeTool === 'containerAdder'"
- />
- <CoursewareToolbarClipboard
- v-if="activeTool === 'clipboard'"
- :toolbarContentHeight="toolbarContentHeight"
- />
- </div>
+ <courseware-toolbar-blocks v-if="activeTool === 'blockAdder'" />
+ <courseware-toolbar-containers v-if="activeTool === 'containerAdder'" />
+ <courseware-toolbar-clipboard v-if="activeTool === 'clipboard'" />
</div>
<div v-else class="cw-toolbar-folded-wrapper">
<button
@@ -107,26 +97,20 @@ export default {
toolbarActive: 'toolbarActive',
hideEditLayout: 'hideEditLayout',
}),
- scrollTopStyles() {
- return window.getComputedStyle(document.getElementById('scroll-to-top'));
- },
- toolbarHeight() {
+ toolbarStyle() {
+ const scrollTopStyles = window.getComputedStyle(document.getElementById('scroll-to-top'));
const scrollTopHeight =
- parseInt(this.scrollTopStyles['height'], 10) +
- parseInt(this.scrollTopStyles['padding-top'], 10) +
- parseInt(this.scrollTopStyles['padding-bottom'], 10) +
- parseInt(this.scrollTopStyles['margin-bottom'], 10);
- return parseInt(
+ parseInt(scrollTopStyles['height'], 10) +
+ parseInt(scrollTopStyles['padding-top'], 10) +
+ parseInt(scrollTopStyles['padding-bottom'], 10) +
+ parseInt(scrollTopStyles['margin-bottom'], 10);
+ let height = parseInt(
Math.min(this.windowInnerHeight * 0.9, this.windowInnerHeight - this.toolbarTop - scrollTopHeight)
);
- },
- toolbarContentHeight() {
- return this.toolbarHeight - 55;
- },
- toolbarStyle() {
+
return {
- height: this.toolbarHeight + 'px',
- minHeight: this.toolbarHeight + 'px',
+ height: height + 'px',
+ minHeight: height + 'px',
top: this.toolbarTop + 'px',
};
},
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
index ceda0f0dd30f346b147f7ed170f75b24c20a7c05..2795e62db251af03b91bd5460992823d2b15174d 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue
@@ -1,88 +1,85 @@
<template>
<div class="cw-toolbar-blocks">
- <div id="cw-toolbar-blocks-header" class="cw-toolbar-tool-header">
- <form @submit.prevent="loadSearch">
- <div class="input-group files-search search cw-block-search">
- <input
- ref="searchBox"
- type="text"
- v-model="searchInput"
- @click.stop
- :label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
- />
- <span class="input-group-append" @click.stop>
- <button
- v-if="searchInput"
- type="button"
- class="button reset-search"
- id="reset-search"
- :title="$gettext('Suche zurücksetzen')"
- @click="resetSearch"
- >
- <studip-icon shape="decline" :size="20"></studip-icon>
- </button>
- <button
- type="submit"
- class="button"
- id="search-btn"
- :title="$gettext('Suche starten')"
- @click="loadSearch"
- >
- <studip-icon shape="search" :size="20"></studip-icon>
- </button>
- </span>
- </div>
- </form>
-
- <div class="filterpanel">
- <span class="sr-only">{{ $gettext('Kategorien-Filter') }}</span>
- <button
- v-for="category in blockCategories"
- :key="category.type"
- class="button"
- :class="{ 'button-active': category.type === currentFilterCategory }"
- :aria-pressed="category.type === currentFilterCategory ? 'true' : 'false'"
- @click="selectCategory(category.type)"
- >
- {{ category.title }}
- </button>
+ <form @submit.prevent="loadSearch">
+ <div class="input-group files-search search cw-block-search">
+ <input
+ ref="searchBox"
+ type="text"
+ v-model="searchInput"
+ @click.stop
+ :label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
+ />
+ <span class="input-group-append" @click.stop>
+ <button
+ v-if="searchInput"
+ type="button"
+ class="button reset-search"
+ id="reset-search"
+ :title="$gettext('Suche zurücksetzen')"
+ @click="resetSearch"
+ >
+ <studip-icon shape="decline" :size="20"></studip-icon>
+ </button>
+ <button
+ type="submit"
+ class="button"
+ id="search-btn"
+ :title="$gettext('Suche starten')"
+ @click="loadSearch"
+ >
+ <studip-icon shape="search" :size="20"></studip-icon>
+ </button>
+ </span>
</div>
+ </form>
+
+ <div class="filterpanel">
+ <span class="sr-only">{{ $gettext('Kategorien-Filter') }}</span>
+ <button
+ v-for="category in blockCategories"
+ :key="category.type"
+ class="button"
+ :class="{ 'button-active': category.type === currentFilterCategory }"
+ :aria-pressed="category.type === currentFilterCategory ? 'true' : 'false'"
+ @click="selectCategory(category.type)"
+ >
+ {{ category.title }}
+ </button>
</div>
- <div class="cw-toolbar-tool-content" :style="toolContentStyle">
- <div v-if="filteredBlockTypes.length > 0" class="cw-blockadder-item-list">
- <draggable
- v-if="filteredBlockTypes.length > 0"
- class="cw-blockadder-item-list"
- tag="div"
- role="listbox"
- v-model="filteredBlockTypes"
- handle=".cw-sortable-handle-blockadder"
- :group="{ name: 'blocks', pull: 'clone', put: 'false' }"
- :clone="cloneBlock"
- :sort="false"
- :emptyInsertThreshold="20"
- @start="dragBlockStart($event)"
- @end="dropNewBlock($event)"
- ref="sortables"
- sectionId="0"
- >
- <courseware-blockadder-item
- v-for="(block, index) in filteredBlockTypes"
- :key="index"
- :title="block.title"
- :type="block.type"
- :data-blocktype="block.type"
- :description="block.description"
- @blockAdded="$emit('blockAdded')"
- />
- </draggable>
- </div>
- <courseware-companion-box
- v-else
- :msgCompanion="$gettext('Es wurden keine passenden Blöcke gefunden.')"
- mood="pointing"
- />
+
+ <div v-if="filteredBlockTypes.length > 0" class="cw-blockadder-item-list">
+ <draggable
+ v-if="filteredBlockTypes.length > 0"
+ class="cw-blockadder-item-list"
+ tag="div"
+ role="listbox"
+ v-model="filteredBlockTypes"
+ handle=".cw-sortable-handle-blockadder"
+ :group="{ name: 'blocks', pull: 'clone', put: 'false' }"
+ :clone="cloneBlock"
+ :sort="false"
+ :emptyInsertThreshold="20"
+ @start="dragBlockStart($event)"
+ @end="dropNewBlock($event)"
+ ref="sortables"
+ sectionId="0"
+ >
+ <courseware-blockadder-item
+ v-for="(block, index) in filteredBlockTypes"
+ :key="index"
+ :title="block.title"
+ :type="block.type"
+ :data-blocktype="block.type"
+ :description="block.description"
+ @blockAdded="$emit('blockAdded')"
+ />
+ </draggable>
</div>
+ <courseware-companion-box
+ v-else
+ :msgCompanion="$gettext('Es wurden keine passenden Blöcke gefunden.')"
+ mood="pointing"
+ />
</div>
</template>
@@ -102,12 +99,6 @@ export default {
CoursewareCompanionBox,
draggable,
},
- props: {
- toolbarContentHeight: {
- type: Number,
- required: true,
- },
- },
data() {
return {
searchInput: '',
@@ -141,13 +132,6 @@ export default {
{ title: this.$gettext('Biografie'), type: 'biography' },
];
},
- toolContentStyle() {
- const height = this.toolbarContentHeight - 115;
-
- return {
- height: height + 'px',
- };
- },
},
methods: {
...mapActions({
diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue
index c6f1e920ddcea3a591777f653275c24a36cfe40d..98cd5730b408f79a23d3541cc4f76fa29c77de7f 100644
--- a/resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue
+++ b/resources/vue/components/courseware/toolbar/CoursewareToolbarClipboard.vue
@@ -1,5 +1,5 @@
<template>
- <div class="cw-toolbar-clipboard cw-toolbar-tool-content" :style="toolContentStyle">
+ <div class="cw-toolbar-clipboard">
<courseware-collapsible-box :title="$gettext('Blöcke')" :open="clipboardBlocks.length > 0">
<template v-if="clipboardBlocks.length > 0">
<div class="cw-element-inserter-wrapper">
@@ -101,12 +101,7 @@ export default {
StudipDialog,
draggable,
},
- props: {
- toolbarContentHeight: {
- type: Number,
- required: true,
- },
- },
+
data() {
return {
showDeleteClipboardDialog: false,
@@ -148,11 +143,6 @@ export default {
}
return '';
},
- toolContentStyle() {
- return {
- height: this.toolbarContentHeight + 'px',
- };
- },
},
methods: {
...mapActions({