github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-29 07:27:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

update repeater options to use grid

Browse Source
This commit is contained in:
Nitwel
2020-09-07 12:56:18 +02:00
parent b88a4a4a44
commit d95b05eee7
1 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/src/interfaces/repeater/options.vue
View File

@@ -1,13 +1,23 @@
<template>
<div>
<p class="type-label half">{{ $t('template') }}</p>
<v-input class="input" v-model="template" :placeholder="`{{ field }}`" />
<p class="type-label half">{{ $t('max-amount') }}</p>
<v-input class="input" type="number" v-model="limit" />
<p class="type-label">{{ $t('edit_fields') }}</p>
<repeater v-model="repeaterValue" :template="`{{ field }} — {{ interface }}`" :fields="repeaterFields" />
<div class="grid">
<div class="grid-element">
<p class="type-label">{{ $t('template') }}</p>
<v-input class="input" v-model="template" :placeholder="`{{ field }}`" />
</div>
<div class="grid-element">
<p class="type-label">{{ $t('max-amount') }}</p>
<v-input class="input" type="number" v-model="limit" />
</div>
<div class="grid-element full">
<p class="type-label">{{ $t('edit_fields') }}</p>
<repeater
v-model="repeaterValue"
:template="`{{ field }} — {{ interface }}`"
:fields="repeaterFields"
/>
</div>
</div>
</div>
</template>
@@ -148,11 +158,19 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.grid {
display: grid;
grid-template-columns: [start] minmax(0, 1fr) [half] minmax(0, 1fr) [full];
gap: var(--form-vertical-gap) var(--form-horizontal-gap);
&-element {
&.full {
grid-column: start/full;
}
}
}
.type-label {
margin-bottom: 4px;
}
.input {
margin-bottom: 24px;
}
</style>