diff --git a/resources/assets/stylesheets/scss/courseware/blockadder.scss b/resources/assets/stylesheets/scss/courseware/blockadder.scss index 3006ae7f57f74012db101e429c76325351ff16bf..93325dd32a20c562ecd4f0386f73d24ca3423360 100644 --- a/resources/assets/stylesheets/scss/courseware/blockadder.scss +++ b/resources/assets/stylesheets/scss/courseware/blockadder.scss @@ -1,94 +1,3 @@ -.cw-tools-element-adder-tabs { - .cw-tabs-nav { - margin-top: 4px; - border: none; - border-bottom: solid thin var(--content-color-40); - - button { - max-width: unset; - padding: 1em 1.5em 4px 1.5em; - margin: 0px 2em; - } - } - .cw-tabs-content { - border: none; - overflow-x: hidden; - overflow-y: auto; - scrollbar-width: thin; - scrollbar-color: var(--base-color) var(--dark-gray-color-5); - - .input-group.files-search { - &.search { - border: thin solid var(--dark-gray-color-30); - margin-bottom: 0px; - input { - border: none; - } - } - - .input-group-append { - .button { - border: none; - border-left: thin solid var(--dark-gray-color-30); - &.active { - background-color: var(--base-color); - } - } - .reset-search { - border: none; - background-color: var(--white); - } - } - - .active-filter { - display: flex; - align-items: center; - justify-content: space-between; - border: solid thin var(--black); - background-color: var(--content-color-10); - margin: 3px; - padding: 2px 3px; - - .removefilter { - border: none; - background-color: transparent; - } - } - } - - .cw-block-search { - width: inherit; - } - - .filterpanel { - margin-bottom: 5px; - padding: 2px; - border: thin solid var(--dark-gray-color-30); - border-top: none; - background-color: var(--white); - - .button { - min-width: inherit; - margin: 4px 2px; - - &.button-active { - background-color: var(--base-color); - color: var(--white); - } - } - } - } - - .cw-collapsible { - .cw-collapsible-content { - display: none; - &.cw-collapsible-content-open { - display: block; - } - } - } -} - .cw-blockadder-item-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); @@ -144,56 +53,9 @@ } } -.cw-block-adder-area { - background-color: var(--white); - border: solid thin var(--content-color-40); - padding: 1em 0; - color: var(--base-color); - text-align: center; - width: 100%; - font-weight: 600; - cursor: pointer; - - &:hover { - border-color: var(--base-color); - } - - &.cw-block-adder-active { - border: solid thin var(--base-color); - background-color: var(--base-color); - color: var(--white); - } - - img { - vertical-align: text-bottom; - } -} -.cw-block-helper-buttons { - display: inline-block; - width: 100%; - - .cw-block-helper-reset { - float: right; - } - - .button.cw-block-helper-reset::before { - content: ''; - @include background-icon(refresh); - background-repeat: no-repeat; - float: left; - height: 16px; - width: 16px; - margin: 1px 5px 0 -8px; - } -} - -.cw-block-helper-results { - margin-top: 5px; -} - .cw-containeradder-item-wrapper { border: solid thin var(--content-color-40); - margin-bottom: 5px; + margin-bottom: 4px; .cw-sortable-handle { opacity: 0; } diff --git a/resources/assets/stylesheets/scss/courseware/containers/accordion.scss b/resources/assets/stylesheets/scss/courseware/containers/accordion.scss index 44cb56151f0078d3f4ffe0f852175998cf8b5d44..e8c45905ba07d9086a9c119b63f82e562b4febe0 100644 --- a/resources/assets/stylesheets/scss/courseware/containers/accordion.scss +++ b/resources/assets/stylesheets/scss/courseware/containers/accordion.scss @@ -1,3 +1,4 @@ +@import '../layouts/collapsible.scss'; .cw-container-accordion { .cw-block-wrapper-active { @@ -20,4 +21,4 @@ padding: 8px 0 0 0; } } -} \ No newline at end of file +} diff --git a/resources/vue/components/courseware/blocks/CoursewareEmbedBlock.vue b/resources/vue/components/courseware/blocks/CoursewareEmbedBlock.vue index 75ed4eec3d40cd3f3c6a691f1e89bdf1b1f75a31..9ace7bf4774857c575d5ea5f6abbb71e873739a9 100644 --- a/resources/vue/components/courseware/blocks/CoursewareEmbedBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareEmbedBlock.vue @@ -247,6 +247,6 @@ export default { }, }; </script> -<style scoped lang="scss"> +<style lang="scss"> @import '../../../../assets/stylesheets/scss/courseware/blocks/embed.scss'; </style> diff --git a/resources/vue/components/courseware/blocks/CoursewareTableOfContentsBlock.vue b/resources/vue/components/courseware/blocks/CoursewareTableOfContentsBlock.vue index 99d42647df1c77f0d63edd662671d49103cda175..2f09edeadb2fc0c8acfef0c787bcf9bfc21e5029 100644 --- a/resources/vue/components/courseware/blocks/CoursewareTableOfContentsBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareTableOfContentsBlock.vue @@ -28,7 +28,11 @@ : child.attributes.title "> <courseware-tile tag="div" :color="child.attributes.payload.color" - :title="child.attributes.title" :imageUrl="getChildImageUrl(child)"> + :title="child.attributes.title" :imageUrl="getChildImageUrl(child)" + > + <template v-if="child.attributes.purpose === 'task'" #image-overlay> + {{ child.solverName }} + </template> <template #description> {{ child.attributes.payload.description }} </template> @@ -121,7 +125,7 @@ export default { let children = []; this.childElements.forEach((element) => { if (element.relationships.task.data) { - let solverName = this.getSolverName(element.relationships.task.data.id); + const solverName = this.getSolverName(element.relationships.task.data.id); if (solverName) { element.solverName = solverName; children.push(element); diff --git a/resources/vue/components/courseware/containers/CoursewareBlockAdderArea.vue b/resources/vue/components/courseware/containers/CoursewareBlockAdderArea.vue deleted file mode 100644 index de7ca38c32586cf0485ff54e20aac01f9e0e7e24..0000000000000000000000000000000000000000 --- a/resources/vue/components/courseware/containers/CoursewareBlockAdderArea.vue +++ /dev/null @@ -1,68 +0,0 @@ -<template> - <button - class="cw-block-adder-area" - :class="{ 'cw-block-adder-active': adderActive }" - :aria-pressed="adderActive" - @click="selectBlockAdder" - > - <studip-icon v-show="!adderActive" shape="add" /> - <studip-icon v-show="adderActive" shape="add" role="info_alt"/> - <span v-show="!adderActive"><translate>Block zu diesem Abschnitt hinzufügen</translate></span> - <span v-show="adderActive"><translate>Abschnitt aktiv - Blöcke werden hier eingefügt</translate></span> - </button> -</template> - -<script> -import StudipIcon from '../../StudipIcon.vue'; -import { mapActions, mapGetters } from 'vuex'; - -export default { - components: { StudipIcon }, - name: 'courseware-block-adder-area', - props: { - container: Object, - section: Number, - }, - data() { - return { - adderActive: false, - }; - }, - computed: { - ...mapGetters({ - adderStorage: 'blockAdder', - }), - adderDisable() { - return Object.keys(this.adderStorage).length !== 0 && !this.adderActive; - }, - }, - methods: { - ...mapActions({ - coursewareBlockAdder: 'coursewareBlockAdder', - }), - selectBlockAdder() { - if (this.adderActive) { - this.adderActive = false; - this.coursewareBlockAdder({}); - } else { - this.adderActive = true; - this.coursewareBlockAdder({ container: this.container, section: this.section }); - } - }, - }, - watch: { - adderStorage(newValue, oldValue) { - if (Object.keys(newValue).length === 0) { - this.adderActive = false; - this.$emit('updateContainerContent', oldValue); - } else { - if (newValue.container && newValue.container.id === this.container.id && newValue.section === this.section) { - this.adderActive = true; - } else { - this.adderActive = false; - } - } - }, - }, -}; -</script> diff --git a/resources/vue/components/courseware/containers/container-components.js b/resources/vue/components/courseware/containers/container-components.js index 3bb48dc926f0ff40b5509b087c5e574d447ed504..ce0b7e958c12422eca501192bf37f15b70227580 100644 --- a/resources/vue/components/courseware/containers/container-components.js +++ b/resources/vue/components/courseware/containers/container-components.js @@ -1,6 +1,5 @@ import CoursewareDefaultBlock from '../blocks/CoursewareDefaultBlock.vue'; import CoursewareDefaultContainer from './CoursewareDefaultContainer.vue'; -import CoursewareBlockAdderArea from './CoursewareBlockAdderArea.vue'; // blocks import CoursewareAudioBlock from '../blocks/CoursewareAudioBlock.vue'; import CoursewareBeforeAfterBlock from '../blocks/CoursewareBeforeAfterBlock.vue'; @@ -39,7 +38,6 @@ import StudipProgressIndicator from '../../StudipProgressIndicator.vue'; const ContainerComponents = { CoursewareDefaultBlock, CoursewareDefaultContainer, - CoursewareBlockAdderArea, // blocks CoursewareAudioBlock, CoursewareBeforeAfterBlock, diff --git a/resources/vue/components/courseware/plugin-components.js b/resources/vue/components/courseware/plugin-components.js index b0e371b95aefb10cfd8af2b50761a1fe928d86e8..f1198b416eb930dca3303e178056d43dfc93930a 100644 --- a/resources/vue/components/courseware/plugin-components.js +++ b/resources/vue/components/courseware/plugin-components.js @@ -1,4 +1,3 @@ -import CoursewareBlockAdderArea from './containers/CoursewareBlockAdderArea.vue'; import CoursewareCollapsibleBox from './layouts/CoursewareCollapsibleBox.vue'; import CoursewareCompanionBox from './layouts/CoursewareCompanionBox.vue'; import CoursewareDefaultBlock from './blocks/CoursewareDefaultBlock.vue'; @@ -8,7 +7,6 @@ import CoursewareTabs from './layouts/CoursewareTabs.vue'; import CoursewareTab from './layouts/CoursewareTab.vue'; const CoursewarePluginComponents = { - CoursewareBlockAdderArea, CoursewareCollapsibleBox, CoursewareCompanionBox, CoursewareDefaultBlock, @@ -18,4 +16,4 @@ const CoursewarePluginComponents = { CoursewareTab, } -export default CoursewarePluginComponents; \ No newline at end of file +export default CoursewarePluginComponents;