mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
remove emacs backup
This commit is contained in:
Moriz Wahl
parent
130a3de45c
commit
a669f799ae
@ -1,623 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ds-form
|
|
||||||
class="contribution-form"
|
|
||||||
ref="contributionForm"
|
|
||||||
v-model="formData"
|
|
||||||
:schema="formSchema"
|
|
||||||
@submit="submit"
|
|
||||||
>
|
|
||||||
<template #default="{ errors }">
|
|
||||||
<base-card>
|
|
||||||
<template #heroImage>
|
|
||||||
<img
|
|
||||||
v-if="formData.image"
|
|
||||||
:src="formData.image | proxyApiUrl"
|
|
||||||
:class="['image', formData.imageBlurred && '--blur-image']"
|
|
||||||
/>
|
|
||||||
<image-uploader
|
|
||||||
:hasImage="!!formData.image"
|
|
||||||
:class="[formData.imageBlurred && '--blur-image']"
|
|
||||||
@addHeroImage="addHeroImage"
|
|
||||||
@addImageAspectRatio="addImageAspectRatio"
|
|
||||||
@addImageType="addImageType"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<div v-if="formData.image" class="blur-toggle">
|
|
||||||
<label for="blur-img">{{ $t('contribution.inappropriatePicture') }}</label>
|
|
||||||
<input type="checkbox" id="blur-img" v-model="formData.imageBlurred" />
|
|
||||||
<page-params-link class="link" :pageParams="links.FAQ">
|
|
||||||
{{ $t('contribution.inappropriatePicture') }}
|
|
||||||
<base-icon name="question-circle" />
|
|
||||||
</page-params-link>
|
|
||||||
</div>
|
|
||||||
<ds-space margin-top="base" />
|
|
||||||
<ds-input
|
|
||||||
model="title"
|
|
||||||
:placeholder="$t('contribution.title')"
|
|
||||||
name="title"
|
|
||||||
autofocus
|
|
||||||
size="large"
|
|
||||||
/>
|
|
||||||
<ds-chip size="base" :color="errors && errors.title && 'danger'">
|
|
||||||
{{ formData.title.length }}/{{ formSchema.title.max }}
|
|
||||||
<base-icon v-if="errors && errors.title" name="warning" />
|
|
||||||
</ds-chip>
|
|
||||||
<editor
|
|
||||||
:users="users"
|
|
||||||
:value="formData.content"
|
|
||||||
:hashtags="hashtags"
|
|
||||||
@input="updateEditorContent"
|
|
||||||
/>
|
|
||||||
<ds-chip size="base" :color="errors && errors.content && 'danger'">
|
|
||||||
{{ contentLength }}
|
|
||||||
<base-icon v-if="errors && errors.content" name="warning" />
|
|
||||||
</ds-chip>
|
|
||||||
|
|
||||||
<!-- Eventdata -->
|
|
||||||
<div v-if="createEvent" class="eventDatas">
|
|
||||||
<hr />
|
|
||||||
<ds-space margin-top="x-small" />
|
|
||||||
<ds-grid>
|
|
||||||
<ds-grid-item class="event-grid-item">
|
|
||||||
<!-- <label>Beginn</label> -->
|
|
||||||
<div class="event-grid-item-z-helper">
|
|
||||||
<date-picker
|
|
||||||
name="eventStart"
|
|
||||||
v-model="formData.eventStart"
|
|
||||||
type="datetime"
|
|
||||||
value-type="format"
|
|
||||||
:minute-step="15"
|
|
||||||
Xformat="DD-MM-YYYY HH:mm"
|
|
||||||
class="event-grid-item-z-helper"
|
|
||||||
:placeholder="$t('post.viewEvent.eventStart')"
|
|
||||||
:disabled-date="notBeforeToday"
|
|
||||||
:disabled-time="notBeforeNow"
|
|
||||||
:show-second="false"
|
|
||||||
@change="changeEventStart($event)"
|
|
||||||
></date-picker>
|
|
||||||
</div>
|
|
||||||
<div class="chipbox event-grid-item-margin-helper">
|
|
||||||
<ds-chip size="base" :color="errors && errors.eventStart && 'danger'">
|
|
||||||
<base-icon v-if="errors && errors.eventStart" name="warning" />
|
|
||||||
</ds-chip>
|
|
||||||
</div>
|
|
||||||
</ds-grid-item>
|
|
||||||
<ds-grid-item class="event-grid-item">
|
|
||||||
<!-- <label>Ende (optional)</label> -->
|
|
||||||
|
|
||||||
<date-picker
|
|
||||||
v-model="formData.eventEnd"
|
|
||||||
name="eventEnd"
|
|
||||||
type="datetime"
|
|
||||||
value-type="format"
|
|
||||||
:minute-step="15"
|
|
||||||
:seconds-step="0"
|
|
||||||
Xformat="DD-MM-YYYY HH:mm"
|
|
||||||
:placeholder="$t('post.viewEvent.eventEnd')"
|
|
||||||
class="event-grid-item-font-helper"
|
|
||||||
:disabled-date="notBeforeEventDay"
|
|
||||||
:disabled-time="notBeforeEvent"
|
|
||||||
:show-second="false"
|
|
||||||
@change="changeEventEnd($event)"
|
|
||||||
></date-picker>
|
|
||||||
</ds-grid-item>
|
|
||||||
</ds-grid>
|
|
||||||
<ds-grid class="event-location-grid">
|
|
||||||
<ds-grid-item class="event-grid-item">
|
|
||||||
<ds-input
|
|
||||||
model="eventVenue"
|
|
||||||
name="eventVenue"
|
|
||||||
:placeholder="$t('post.viewEvent.eventVenue')"
|
|
||||||
/>
|
|
||||||
<div class="chipbox">
|
|
||||||
<ds-chip size="base" :color="errors && errors.eventVenue && 'danger'">
|
|
||||||
{{ formData.eventVenue.length }}/{{ formSchema.eventVenue.max }}
|
|
||||||
<base-icon v-if="errors && errors.eventVenue" name="warning" />
|
|
||||||
</ds-chip>
|
|
||||||
</div>
|
|
||||||
</ds-grid-item>
|
|
||||||
<ds-grid-item v-if="showEventLocationName" class="event-grid-item">
|
|
||||||
<ds-input
|
|
||||||
model="eventLocationName"
|
|
||||||
name="eventLocationName"
|
|
||||||
:placeholder="$t('post.viewEvent.eventLocationName')"
|
|
||||||
/>
|
|
||||||
<div class="chipbox">
|
|
||||||
<ds-chip size="base" :color="errors && errors.eventLocationName && 'danger'">
|
|
||||||
{{ formData.eventLocationName.length }}/{{ formSchema.eventLocationName.max }}
|
|
||||||
<base-icon v-if="errors && errors.eventLocationName" name="warning" />
|
|
||||||
</ds-chip>
|
|
||||||
</div>
|
|
||||||
</ds-grid-item>
|
|
||||||
</ds-grid>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
v-model="formData.eventIsOnline"
|
|
||||||
model="eventIsOnline"
|
|
||||||
name="eventIsOnline"
|
|
||||||
class="event-grid-item-font-helper"
|
|
||||||
@change="changeEventIsOnline($event)"
|
|
||||||
/>
|
|
||||||
{{ $t('post.viewEvent.eventIsOnline') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ds-space margin-top="x-small" />
|
|
||||||
<categories-select
|
|
||||||
v-if="categoriesActive"
|
|
||||||
model="categoryIds"
|
|
||||||
:existingCategoryIds="formData.categoryIds"
|
|
||||||
/>
|
|
||||||
<ds-chip
|
|
||||||
v-if="categoriesActive"
|
|
||||||
size="base"
|
|
||||||
:color="errors && errors.categoryIds && 'danger'"
|
|
||||||
>
|
|
||||||
{{ formData.categoryIds.length }} / 3
|
|
||||||
<base-icon v-if="errors && errors.categoryIds" name="warning" />
|
|
||||||
</ds-chip>
|
|
||||||
<ds-flex class="buttons-footer" gutter="xxx-small">
|
|
||||||
<ds-flex-item width="3.5" class="buttons-footer-helper">
|
|
||||||
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
|
|
||||||
<!-- TODO => remove v-html! only text ! no html! security first! -->
|
|
||||||
<ds-text
|
|
||||||
v-if="showGroupHint"
|
|
||||||
v-html="$t('contribution.visibleOnlyForMembersOfGroup', { name: groupName })"
|
|
||||||
/>
|
|
||||||
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
|
|
||||||
</ds-flex-item>
|
|
||||||
<ds-flex-item width="0.15" />
|
|
||||||
<ds-flex-item class="action-buttons-group" width="2">
|
|
||||||
<base-button
|
|
||||||
data-test="cancel-button"
|
|
||||||
:disabled="loading"
|
|
||||||
@click="$router.back()"
|
|
||||||
danger
|
|
||||||
>
|
|
||||||
{{ $t('actions.cancel') }}
|
|
||||||
</base-button>
|
|
||||||
<base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
|
|
||||||
{{ $t('actions.save') }}
|
|
||||||
</base-button>
|
|
||||||
</ds-flex-item>
|
|
||||||
</ds-flex>
|
|
||||||
</base-card>
|
|
||||||
</template>
|
|
||||||
</ds-form>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import gql from 'graphql-tag'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import Editor from '~/components/Editor/Editor'
|
|
||||||
import PostMutations from '~/graphql/PostMutations.js'
|
|
||||||
import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
|
|
||||||
import ImageUploader from '~/components/Uploader/ImageUploader'
|
|
||||||
import links from '~/constants/links.js'
|
|
||||||
import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
|
|
||||||
import DatePicker from 'vue2-datepicker'
|
|
||||||
import 'vue2-datepicker/scss/index.scss'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Editor,
|
|
||||||
ImageUploader,
|
|
||||||
PageParamsLink,
|
|
||||||
CategoriesSelect,
|
|
||||||
DatePicker,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
contribution: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
group: {
|
|
||||||
type: Object,
|
|
||||||
default: () => null,
|
|
||||||
},
|
|
||||||
createEvent: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
const {
|
|
||||||
title,
|
|
||||||
content,
|
|
||||||
image,
|
|
||||||
categories,
|
|
||||||
eventStart,
|
|
||||||
eventEnd,
|
|
||||||
eventLocationName,
|
|
||||||
eventVenue,
|
|
||||||
eventIsOnline,
|
|
||||||
eventLocation,
|
|
||||||
} = this.contribution
|
|
||||||
const {
|
|
||||||
sensitive: imageBlurred = false,
|
|
||||||
aspectRatio: imageAspectRatio = null,
|
|
||||||
type: imageType = null,
|
|
||||||
} = image || {}
|
|
||||||
return {
|
|
||||||
categoriesActive: this.$env.CATEGORIES_ACTIVE,
|
|
||||||
links,
|
|
||||||
formData: {
|
|
||||||
title: title || '',
|
|
||||||
content: content || '',
|
|
||||||
image: image || null,
|
|
||||||
imageAspectRatio,
|
|
||||||
imageType,
|
|
||||||
imageBlurred,
|
|
||||||
categoryIds: categories ? categories.map((category) => category.id) : [],
|
|
||||||
eventStart: eventStart || null,
|
|
||||||
eventEnd: eventEnd || null,
|
|
||||||
eventLocation: eventLocation || '',
|
|
||||||
eventLocationName: eventLocationName || '',
|
|
||||||
eventVenue: eventVenue || '',
|
|
||||||
eventIsOnline: eventIsOnline || false,
|
|
||||||
},
|
|
||||||
loading: false,
|
|
||||||
users: [],
|
|
||||||
hashtags: [],
|
|
||||||
imageUpload: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async mounted() {
|
|
||||||
await import(`vue2-datepicker/locale/${this.currentUser.locale}`)
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters({
|
|
||||||
currentUser: 'auth/user',
|
|
||||||
}),
|
|
||||||
formSchema() {
|
|
||||||
return {
|
|
||||||
title: { required: true, min: 3, max: 100 },
|
|
||||||
content: { required: true },
|
|
||||||
imageBlurred: { required: false },
|
|
||||||
categoryIds: {
|
|
||||||
type: 'array',
|
|
||||||
required: this.categoriesActive,
|
|
||||||
validator: (_, value = []) => {
|
|
||||||
if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
|
|
||||||
return [new Error(this.$t('common.validations.categories'))]
|
|
||||||
}
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
},
|
|
||||||
eventStart: { required: !!this.createEvent },
|
|
||||||
eventVenue: {
|
|
||||||
required: !!this.createEvent,
|
|
||||||
min: 3,
|
|
||||||
max: 100,
|
|
||||||
validator: (_, value = '') => {
|
|
||||||
if (!this.createEvent) return []
|
|
||||||
if (!value.trim()) {
|
|
||||||
return [new Error(this.$t('common.validations.eventVenueNotEmpty'))]
|
|
||||||
}
|
|
||||||
if (value.length < 3 || value.length > 100) {
|
|
||||||
return [new Error(this.$t('common.validations.eventVenueLength', { min: 3, max: 100 }))]
|
|
||||||
}
|
|
||||||
return []
|
|
||||||
}, },
|
|
||||||
eventLocationName: {
|
|
||||||
required: !!this.createEvent && !this.formData.eventIsOnline,
|
|
||||||
min: 3,
|
|
||||||
max: 100,
|
|
||||||
validator: (_, value = '') => {
|
|
||||||
if (!this.createEvent) return []
|
|
||||||
if (this.formData.eventIsOnline) return []
|
|
||||||
if (!value.trim()) {
|
|
||||||
return [new Error(this.$t('common.validations.eventLocationNameNotEmpty'))]
|
|
||||||
}
|
|
||||||
if (value.length < 3 || value.length > 100) {
|
|
||||||
return [new Error(this.$t('common.validations.eventLocationNameLength', { min: 3, max: 100 }))]
|
|
||||||
}
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
eventInput() {
|
|
||||||
if (this.createEvent) {
|
|
||||||
return {
|
|
||||||
eventStart: this.formData.eventStart,
|
|
||||||
eventVenue: this.formData.eventVenue,
|
|
||||||
eventEnd: this.formData.eventEnd,
|
|
||||||
eventIsOnline: this.formData.eventIsOnline,
|
|
||||||
eventLocationName: !this.formData.eventIsOnline ? this.formData.eventLocationName : null,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return undefined
|
|
||||||
},
|
|
||||||
contentLength() {
|
|
||||||
return this.$filters.removeHtml(this.formData.content).length
|
|
||||||
},
|
|
||||||
groupId() {
|
|
||||||
return this.group && this.group.id
|
|
||||||
},
|
|
||||||
showGroupHint() {
|
|
||||||
return this.groupId && ['closed', 'hidden'].includes(this.group.groupType)
|
|
||||||
},
|
|
||||||
groupName() {
|
|
||||||
return this.group && this.group.name
|
|
||||||
},
|
|
||||||
groupCategories() {
|
|
||||||
return this.group && this.group.categories
|
|
||||||
},
|
|
||||||
showEventLocationName() {
|
|
||||||
return !this.formData.eventIsOnline
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
groupCategories() {
|
|
||||||
if (!this.formData.categoryIds.length && this.groupCategories)
|
|
||||||
this.formData.categoryIds = this.groupCategories.map((cat) => cat.id)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
notBeforeToday(date) {
|
|
||||||
return date < new Date().setHours(0, 0, 0, 0)
|
|
||||||
},
|
|
||||||
notBeforeNow(date) {
|
|
||||||
return date < new Date()
|
|
||||||
},
|
|
||||||
notBeforeEventDay(date) {
|
|
||||||
return date < new Date(this.formData.eventStart).setHours(0, 0, 0, 0)
|
|
||||||
},
|
|
||||||
notBeforeEvent(date) {
|
|
||||||
return date <= new Date(this.formData.eventStart)
|
|
||||||
},
|
|
||||||
submit() {
|
|
||||||
let image = null
|
|
||||||
|
|
||||||
const { title, content, categoryIds } = this.formData
|
|
||||||
if (this.formData.image) {
|
|
||||||
image = {
|
|
||||||
sensitive: this.formData.imageBlurred,
|
|
||||||
}
|
|
||||||
if (this.imageUpload) {
|
|
||||||
image.upload = this.imageUpload
|
|
||||||
image.aspectRatio = this.formData.imageAspectRatio
|
|
||||||
image.type = this.formData.imageType
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.loading = true
|
|
||||||
|
|
||||||
this.$apollo
|
|
||||||
.mutate({
|
|
||||||
mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
|
|
||||||
variables: {
|
|
||||||
title,
|
|
||||||
content,
|
|
||||||
categoryIds,
|
|
||||||
id: this.contribution.id || null,
|
|
||||||
image,
|
|
||||||
groupId: this.groupId,
|
|
||||||
postType: !this.createEvent ? 'Article' : 'Event',
|
|
||||||
eventInput: this.eventInput,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.then(({ data }) => {
|
|
||||||
this.loading = false
|
|
||||||
this.$toast.success(this.$t('contribution.success'))
|
|
||||||
const result = data[this.contribution.id ? 'UpdatePost' : 'CreatePost']
|
|
||||||
|
|
||||||
this.$router.push({
|
|
||||||
name: 'post-id-slug',
|
|
||||||
params: { id: result.id, slug: result.slug },
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
this.$toast.error(err.message)
|
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
updateEditorContent(value) {
|
|
||||||
this.$refs.contributionForm.update('content', value)
|
|
||||||
},
|
|
||||||
changeEventIsOnline(event) {
|
|
||||||
this.$refs.contributionForm.update('eventIsOnline', this.formData.eventIsOnline)
|
|
||||||
},
|
|
||||||
changeEventEnd(event) {
|
|
||||||
this.$refs.contributionForm.update('eventEnd', event)
|
|
||||||
},
|
|
||||||
changeEventStart(event) {
|
|
||||||
this.$refs.contributionForm.update('eventStart', event)
|
|
||||||
},
|
|
||||||
addHeroImage(file) {
|
|
||||||
this.formData.image = null
|
|
||||||
if (file) {
|
|
||||||
const reader = new FileReader()
|
|
||||||
reader.onload = ({ target }) => {
|
|
||||||
this.formData.image = {
|
|
||||||
...this.formData.image,
|
|
||||||
url: target.result,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
reader.readAsDataURL(file)
|
|
||||||
this.imageUpload = file
|
|
||||||
}
|
|
||||||
},
|
|
||||||
addImageAspectRatio(aspectRatio) {
|
|
||||||
this.formData.imageAspectRatio = aspectRatio
|
|
||||||
},
|
|
||||||
addImageType(imageType) {
|
|
||||||
this.formData.imageType = imageType
|
|
||||||
},
|
|
||||||
},
|
|
||||||
apollo: {
|
|
||||||
User: {
|
|
||||||
query() {
|
|
||||||
return gql`
|
|
||||||
query {
|
|
||||||
User(orderBy: slug_asc) {
|
|
||||||
id
|
|
||||||
slug
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
},
|
|
||||||
result({ data: { User } }) {
|
|
||||||
this.users = User
|
|
||||||
},
|
|
||||||
},
|
|
||||||
Tag: {
|
|
||||||
query() {
|
|
||||||
return gql`
|
|
||||||
query {
|
|
||||||
Tag(orderBy: id_asc) {
|
|
||||||
id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
},
|
|
||||||
result({ data: { Tag } }) {
|
|
||||||
this.hashtags = Tag
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.eventDatas {
|
|
||||||
.chipbox {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
> .ds-chip {
|
|
||||||
margin-top: -10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// style override to handle dynamic inputs
|
|
||||||
.event-location-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-grid-item {
|
|
||||||
// important needed because of component inline style
|
|
||||||
grid-row-end: span 3 !important;
|
|
||||||
}
|
|
||||||
.event-grid-item-z-helper {
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
.event-grid-item-margin-helper {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.event-grid-item-font-helper {
|
|
||||||
font-size: larger;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.contribution-form > .base-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
> .hero-image {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
> .image {
|
|
||||||
max-height: $size-image-max-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image.--blur-image {
|
|
||||||
filter: blur($blur-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
> .ds-form-item {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .ds-chip {
|
|
||||||
align-self: flex-end;
|
|
||||||
margin: $space-xx-small 0 $space-base;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .select-field {
|
|
||||||
align-self: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .buttons-footer {
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-self: flex-end;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: $space-base;
|
|
||||||
|
|
||||||
> .action-buttons-group {
|
|
||||||
margin-left: auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
> button {
|
|
||||||
margin-left: 1em;
|
|
||||||
min-width: fit-content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .buttons-footer-helper {
|
|
||||||
margin-right: 16px;
|
|
||||||
// important needed because of component inline style
|
|
||||||
margin-bottom: 6px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.blur-toggle {
|
|
||||||
text-align: right;
|
|
||||||
margin-bottom: $space-base;
|
|
||||||
|
|
||||||
> .link {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 656px) {
|
|
||||||
> .buttons-footer {
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 5px;
|
|
||||||
|
|
||||||
> .action-buttons-group {
|
|
||||||
> button {
|
|
||||||
margin-left: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 280px) {
|
|
||||||
> .buttons-footer {
|
|
||||||
> .action-buttons-group {
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
> button {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-datepicker {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.mx-datepicker input {
|
|
||||||
font-size: 1rem;
|
|
||||||
height: calc(1.625rem + 18px);
|
|
||||||
padding: 8px 8px;
|
|
||||||
background-color: #faf9fa;
|
|
||||||
border-color: #c8c8c8;
|
|
||||||
color: #4b4554;
|
|
||||||
}
|
|
||||||
.mx-datepicker input:hover {
|
|
||||||
border-color: #c8c8c8;
|
|
||||||
}
|
|
||||||
.mx-datepicker input:focus {
|
|
||||||
border-color: #17b53f;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.mx-datepicker-error {
|
|
||||||
border-color: #cf2619;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user