github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add form grid mixin

Browse Source
This commit is contained in:
rijkvanzanten
2020-09-11 12:50:49 -04:00
parent bd40729cdc
commit 97f9554b9a
3 changed files with 69 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/src/components/v-form/v-form.vue
View File

@@ -188,49 +188,9 @@ body {
</style>
<style lang="scss" scoped>
@import '@/styles/mixins/breakpoint';
@import '@/styles/mixins/form-grid';
.v-form {
&.grid {
display: grid;
grid-template-columns: [start] minmax(0, 1fr) [half] minmax(0, 1fr) [full];
gap: var(--v-form-vertical-gap) var(--v-form-horizontal-gap);
&.with-fill {
grid-template-columns:
[start] minmax(0, var(--v-form-column-max-width)) [half] minmax(0, var(--v-form-column-max-width))
[full] 1fr [fill];
}
}
& > .half,
& > .half-left,
& > .half-space {
grid-column: start / fill;
@include breakpoint(medium) {
grid-column: start / half;
}
}
& > .half-right {
grid-column: start / fill;
@include breakpoint(medium) {
grid-column: half / full;
}
}
& > .full {
grid-column: start / fill;
@include breakpoint(medium) {
grid-column: start / full;
}
}
& > .fill {
grid-column: start / fill;
}
@include form-grid;
}
</style>

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

@@ -1,24 +1,22 @@
<template>
<div>
<div class="grid">
<div class="grid-element full">
<p class="type-label">{{ $t('template') }}</p>
<v-input class="input" v-model="template" :placeholder="`{{ field }}`" />
</div>
<div class="grid">
<div class="grid-element half">
<p class="type-label">{{ $t('template') }}</p>
<v-input class="input" v-model="template" :placeholder="`{{ field }}`" />
</div>
<div class="grid-element full">
<p class="type-label">{{ $t('interfaces.repeater.edit_fields') }}</p>
<repeater
v-model="repeaterValue"
:template="`{{ field }} — {{ interface }}`"
:fields="repeaterFields"
/>
</div>
<div class="grid-element half">
<p class="type-label">{{ $t('interfaces.repeater.edit_fields') }}</p>
<repeater
v-model="repeaterValue"
:template="`{{ field }} — {{ interface }}`"
:fields="repeaterFields"
/>
</div>
<div class="grid-element full">
<p class="type-label">{{ $t('interfaces.repeater.add_label') }}</p>
<v-input class="input" v-model="addLabel" :placeholder="$t('add_a_new_item')" />
</div>
<div class="grid-element full">
<p class="type-label">{{ $t('interfaces.repeater.add_label') }}</p>
<v-input class="input" v-model="addLabel" :placeholder="$t('add_a_new_item')" />
</div>
</div>
</template>
@@ -160,10 +158,10 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '@/styles/mixins/form-grid';
.grid {
display: grid;
grid-template-columns: [start] minmax(0, 1fr) [half] minmax(0, 1fr) [full];
gap: var(--form-vertical-gap) var(--form-horizontal-gap);
@include form-grid;
&-element {
&.full {
@@ -171,8 +169,4 @@ export default defineComponent({
}
}
}
.type-label {
margin-bottom: 4px;
}
</style>

48
app/src/styles/mixins/form-grid.scss Normal file
View File

@@ -0,0 +1,48 @@
@import './breakpoint.scss';
@mixin form-grid {
display: grid;
grid-template-columns: [start] minmax(0, 1fr) [half] minmax(0, 1fr) [full];
gap: var(--v-form-vertical-gap) var(--v-form-horizontal-gap);
&.with-fill {
grid-template-columns:
[start] minmax(0, var(--v-form-column-max-width)) [half] minmax(0, var(--v-form-column-max-width))
[full] 1fr [fill];
}
.type-label {
margin-bottom: 4px;
}
& > .half,
& > .half-left,
& > .half-space {
grid-column: start / fill;
@include breakpoint(medium) {
grid-column: start / half;
}
}
& > .half + .half,
& > .half-right {
grid-column: start / fill;
@include breakpoint(medium) {
grid-column: half / full;
}
}
& > .full {
grid-column: start / fill;
@include breakpoint(medium) {
grid-column: start / full;
}
}
& > .fill {
grid-column: start / fill;
}
}