115 lines
2.1 KiB
Vue
115 lines
2.1 KiB
Vue
<template>
|
|
<!-- eslint-disable vue/no-v-html -->
|
|
<div
|
|
class="solution"
|
|
data-cy="solution"
|
|
>
|
|
<a
|
|
class="solution__toggle"
|
|
data-cy="show-solution"
|
|
@click="toggle"
|
|
>Lösung
|
|
<template v-if="!visible">anzeigen</template>
|
|
<template v-else>ausblenden</template>
|
|
</a>
|
|
<transition name="fade">
|
|
<div
|
|
class="solution__hidden fade"
|
|
v-if="visible"
|
|
>
|
|
<p
|
|
class="solution__text solution-text"
|
|
data-cy="solution-text"
|
|
|
|
v-html="sanitizedText"
|
|
/>
|
|
<cms-document-block
|
|
:solution="true"
|
|
class="solution__document"
|
|
:value="value.document"
|
|
v-if="value.document"
|
|
/>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {sanitizeAsHtml} from '@/helpers/text';
|
|
import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock';
|
|
|
|
export default {
|
|
props: ['value'],
|
|
components: {CmsDocumentBlock},
|
|
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
sanitizedText() {
|
|
return sanitizeAsHtml(this.value.text);
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
toggle() {
|
|
this.visible = !this.visible;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~styles/helpers";
|
|
|
|
.solution {
|
|
display: grid;
|
|
grid-auto-rows: auto;
|
|
grid-row-gap: 15px;
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
&__toggle {
|
|
font-family: $sans-serif-font-family;
|
|
color: $color-silver-dark;
|
|
font-size: toRem(15px);
|
|
/*margin-bottom: 15px;*/
|
|
display: block;
|
|
cursor: pointer;
|
|
font-weight: $font-weight-regular;
|
|
}
|
|
|
|
&__text {
|
|
font-size: toRem(18px);
|
|
color: $color-silver-dark;
|
|
|
|
/deep/ p {
|
|
font-size: toRem(18px);
|
|
color: $color-silver-dark;
|
|
}
|
|
|
|
/deep/ ul {
|
|
padding-left: $medium-spacing;
|
|
|
|
> li {
|
|
list-style: disc outside none;
|
|
color: $color-silver-dark;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity .3s;
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-active {
|
|
opacity: 0;
|
|
}
|
|
</style>
|