90 lines
2.0 KiB
Vue
90 lines
2.0 KiB
Vue
<template>
|
|
<div class="create-content-block">
|
|
<div class="create-content-block__content">
|
|
|
|
<h1 class="heading-1 create-content-block__heading">Inhaltsblock erfassen</h1>
|
|
|
|
<toggle
|
|
:bordered="false"
|
|
:checked="true"
|
|
label="Inhaltsblock als Auftrag formatieren"/>
|
|
<content-form-section title="Titel">
|
|
<input-with-label
|
|
:value="val"
|
|
label="Name"
|
|
placeholder="z.B. Auftrag 3"
|
|
@input="val=$event"/>
|
|
</content-form-section>
|
|
<div>
|
|
<add-content-link/>
|
|
</div>
|
|
<ol class="content-list">
|
|
<li class="content-list__item">
|
|
asdas
|
|
</li>
|
|
<li class="content-list__item">
|
|
asdas
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
<footer class="create-content-block__footer">
|
|
<a class="button button--primary">Speichern</a>
|
|
<a class="button">Abbrechen</a>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Toggle from '@/components/ui/Toggle';
|
|
import ContentFormSection from '@/components/content-block-form/ContentFormSection';
|
|
import TextForm from '@/components/content-forms/TextForm';
|
|
import InputWithLabel from '@/components/ui/InputWithLabel';
|
|
import AddContentLink from '@/components/content-block-form/AddContentLink';
|
|
|
|
export default {
|
|
components: {
|
|
AddContentLink,
|
|
InputWithLabel,
|
|
TextForm,
|
|
ContentFormSection,
|
|
Toggle
|
|
},
|
|
|
|
data: () => ({
|
|
val: ''
|
|
})
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~styles/helpers';
|
|
|
|
.create-content-block {
|
|
width: 800px;
|
|
max-width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 800px;
|
|
grid-template-rows: 1fr auto;
|
|
grid-template-areas:
|
|
'content'
|
|
'footer';
|
|
|
|
&__heading {
|
|
@include heading-1;
|
|
}
|
|
|
|
&__content {
|
|
grid-area: content;
|
|
overflow-x: visible;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
&__footer {
|
|
margin-top: auto;
|
|
grid-area: footer;
|
|
}
|
|
}
|
|
|
|
</style>
|