encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve grid layout

Browse Source
This commit is contained in:
les
2021-04-27 11:10:18 +02:00
parent 8b6c26843c
commit a448999ad8
5 changed files with 66 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
components/Editor.vue
View File

@@ -208,6 +208,7 @@ export default {
} }
.menubar { .menubar {
visibility: visible;
opacity: 1 !important; opacity: 1 !important;
} }
@@ -220,6 +221,7 @@ export default {
.menubar { .menubar {
transition: opacity .5s; transition: opacity .5s;
opacity: 0; opacity: 0;
visibility: hidden;
// position: absolute; // position: absolute;
} }
@@ -257,63 +259,5 @@ export default {
} }
} }
} }
// position: relative;
// overflow-y: auto;
// padding-top: 1.7em;
// &.with-border {
// border: 1px solid #ddd;
// border-radius: 5px;
// }
// .content {
// padding: 0px 5px 0px 5px;
// flex: 1;
// scrollbar-width: thin;
// overflow-y: auto;
// }
// .menububble {
// position: absolute;
// display: flex;
// overflow: hidden;
// opacity: 0;
// z-index: 1;
// background: #dddddd;
// transform: translateX(-50%);
// border-radius: 3px;
// padding: 0.07rem;
// transition: opacity 0.2s, visibility 0.2s, left .2s, bottom .2s;
// visibility: hidden;
// &.is-active {
// opacity: 1;
// visibility: visible;
// }
// input {
// padding: 0;
// margin: 1px;
// display: block;
// border: 0;
// color: #444;
// font-size: .8em;
// border-radius: 3px;
// line-height: 100%;
// transition: width .2s;
// padding-left: 5px;
// flex-grow: 1;
// }
// .fa-icon {
// width: auto;
// font-size: 10px;
// height: 1.4em; /* or any other relative font sizes */
// /* You would have to include the following two lines to make this work in Safari */
// // max-width: 100%;
// max-height: 100%;
// }
// }
// }
</style> </style>

2
pages/add/DateInput.vue
View File

@@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
.when v-col(cols=12)
.text-center .text-center
v-btn-toggle.v-col-6.flex-column.flex-sm-row(v-model='type' color='primary' @change='type => change("type", type)') v-btn-toggle.v-col-6.flex-column.flex-sm-row(v-model='type' color='primary' @change='type => change("type", type)')
v-btn(value='normal' label="normal") {{$t('event.normal')}} v-btn(value='normal' label="normal") {{$t('event.normal')}}

1
pages/add/ImportDialog.vue
View File

@@ -90,7 +90,6 @@ export default {
// check if contain an h-event // check if contain an h-event
this.$emit('imported', ret[0]) this.$emit('imported', ret[0])
} catch (e) { } catch (e) {
console.error(e)
this.error = true this.error = true
this.errorMessage = String(e) this.errorMessage = String(e)
} }

52
pages/add/WhereInput.vue
View File

@@ -1,31 +1,33 @@
<template lang="pug"> <template lang="pug">
v-row v-row
v-combobox.col-md-6(ref='place' v-col(cols=12 md=6)
:rules="[$validators.required('common.where')]" v-combobox(ref='place'
:label="$t('common.where')" :rules="[$validators.required('common.where')]"
:hint="$t('event.where_description')" :label="$t('common.where')"
:search-input.sync="placeName" :hint="$t('event.where_description')"
prepend-icon='mdi-map-marker' :search-input.sync="placeName"
persistent-hint prepend-icon='mdi-map-marker'
:value="value.name" persistent-hint
:items="filteredPlaces" :value="value.name"
no-filter :items="filteredPlaces"
item-text='name' no-filter
@change='selectPlace') item-text='name'
template(v-slot:item="{ item }") @change='selectPlace')
v-list-item-content(two-line v-if='item.create') template(v-slot:item="{ item }")
v-list-item-title <v-icon color='primary'>mdi-plus</v-icon> {{item.name}} v-list-item-content(two-line v-if='item.create')
v-list-item-content(two-line v-else) v-list-item-title <v-icon color='primary'>mdi-plus</v-icon> {{item.name}}
v-list-item-title {{item.name}} v-list-item-content(two-line v-else)
v-list-item-subtitle {{item.address}} v-list-item-title {{item.name}}
v-list-item-subtitle {{item.address}}
v-text-field.col-md-6(ref='address' v-col(cols=12 md=6)
prepend-icon='mdi-map' v-text-field(ref='address'
:disabled='disableAddress' prepend-icon='mdi-map'
:rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]" :disabled='disableAddress'
:label="$t('common.address')" :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
@change="changeAddress" :label="$t('common.address')"
:value="value.address") @change="changeAddress"
:value="value.address")
</template> </template>
<script> <script>

67
pages/add/_edit.vue
View File

@@ -14,49 +14,54 @@
v-container v-container
v-row v-row
//- Not logged event //- Not logged event
v-col.col-12(v-if='!$auth.loggedIn') v-col(v-if='!$auth.loggedIn' cols=12)
p(v-html="$t('event.anon_description')") p(v-html="$t('event.anon_description')")
//- Title //- Title
v-text-field.col-12( v-col(cols=12)
@change='v => event.title = v' v-text-field(
:value = 'event.title' @change='v => event.title = v'
:rules="[$validators.required('common.title')]" :value = 'event.title'
prepend-icon='mdi-format-title' :rules="[$validators.required('common.title')]"
:label="$t('common.title')" prepend-icon='mdi-format-title'
autofocus :label="$t('common.title')"
ref='title') autofocus
ref='title')
//- Where //- Where
WhereInput.col-12(v-model='event.place') v-col(cols=12)
WhereInput(v-model='event.place')
//- When //- When
DateInput.col-12(v-model='date') DateInput(v-model='date')
//- Description //- Description
Editor.col-12.mb-3( v-col.px-0(cols='12')
:label="$t('event.description_description')" Editor.px-3.ma-0(
v-model='event.description' :label="$t('event.description_description')"
:placeholder="$t('event.description_description')" v-model='event.description'
max-height='400px') :placeholder="$t('event.description_description')"
max-height='400px')
//- MEDIA / FLYER / POSTER //- MEDIA / FLYER / POSTER
v-file-input.col-12.col-sm-6.mt-3( v-col(cols=12 md=6)
:label="$t('common.media')" v-file-input(
:hint="$t('event.media_description')" :label="$t('common.media')"
prepend-icon="mdi-camera" :hint="$t('event.media_description')"
v-model='event.image' prepend-icon="mdi-camera"
persistent-hint v-model='event.image'
accept='image/*') persistent-hint
accept='image/*')
//- tags //- tags
v-combobox.col-12.col-sm-6.mt-3(v-model='event.tags' v-col(cols=12 md=6)
prepend-icon="mdi-tag-multiple" v-combobox(v-model='event.tags'
chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint prepend-icon="mdi-tag-multiple"
:delimiters="[',', ' ']" chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:items="tags.map(t => t.tag)" :delimiters="[',', ' ']"
:label="$t('common.tags')") :items="tags.map(t => t.tag)"
v-img.col-12.col-sm-2.ml-3(v-if='mediaPreview' :src='mediaPreview') :label="$t('common.tags')")
v-img.col-12.col-sm-2.ml-3(v-if='mediaPreview' :src='mediaPreview')
v-card-actions v-card-actions
v-spacer v-spacer
@@ -118,7 +123,6 @@ export default {
return { return {
valid: false, valid: false,
openImportDialog: false, openImportDialog: false,
openMediaDialog: false,
event: { event: {
place: { name: '', address: '' }, place: { name: '', address: '' },
title: '', title: '',
@@ -163,6 +167,7 @@ export default {
fromHour: true, fromHour: true,
dueHour: true dueHour: true
} }
this.openImportDialog = false
}, },
cleanFile () { cleanFile () {
this.event.image = {} this.event.image = {}