improve grid layout

components/Editor.vue

@@ -208,6 +208,7 @@ export default {
     }
 
     .menubar {
+      visibility: visible;
       opacity: 1 !important;
     }
 
@@ -220,6 +221,7 @@ export default {
   .menubar {
     transition: opacity .5s;
     opacity: 0;
+    visibility: hidden;
     // 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>

pages/add/DateInput.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.when
+v-col(cols=12)
   .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(value='normal' label="normal") {{$t('event.normal')}}

pages/add/ImportDialog.vue

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

pages/add/WhereInput.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
   v-row
-    v-combobox.col-md-6(ref='place'
+    v-col(cols=12 md=6)
+      v-combobox(ref='place'
         :rules="[$validators.required('common.where')]"
         :label="$t('common.where')"
         :hint="$t('event.where_description')"
@@ -19,7 +20,8 @@
             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)
+      v-text-field(ref='address'
         prepend-icon='mdi-map'
         :disabled='disableAddress'
         :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"

pages/add/_edit.vue

@@ -14,11 +14,12 @@
           v-container
             v-row
               //- 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')")
 
               //- Title
-              v-text-field.col-12(
+              v-col(cols=12)
+                v-text-field(
                   @change='v => event.title = v'
                   :value = 'event.title'
                   :rules="[$validators.required('common.title')]"
@@ -28,20 +29,23 @@
                   ref='title')
 
               //- Where
-              WhereInput.col-12(v-model='event.place')
+              v-col(cols=12)
+                WhereInput(v-model='event.place')
 
               //- When
-              DateInput.col-12(v-model='date')
+              DateInput(v-model='date')
 
               //- Description
-              Editor.col-12.mb-3(
+              v-col.px-0(cols='12')
+                Editor.px-3.ma-0(
                   :label="$t('event.description_description')"
                   v-model='event.description'
                   :placeholder="$t('event.description_description')"
                   max-height='400px')
 
               //- MEDIA / FLYER / POSTER
-              v-file-input.col-12.col-sm-6.mt-3(
+              v-col(cols=12 md=6)
+                v-file-input(
                   :label="$t('common.media')"
                   :hint="$t('event.media_description')"
                   prepend-icon="mdi-camera"
@@ -50,7 +54,8 @@
                   accept='image/*')
 
               //- tags
-              v-combobox.col-12.col-sm-6.mt-3(v-model='event.tags'
+              v-col(cols=12 md=6)
+                v-combobox(v-model='event.tags'
                   prepend-icon="mdi-tag-multiple"
                   chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
                   :delimiters="[',', ' ']"
@@ -118,7 +123,6 @@ export default {
     return {
       valid: false,
       openImportDialog: false,
-      openMediaDialog: false,
       event: {
         place: { name: '', address: '' },
         title: '',
@@ -163,6 +167,7 @@ export default {
         fromHour: true,
         dueHour: true
       }
+      this.openImportDialog = false
     },
     cleanFile () {
       this.event.image = {}