From 305e9a52aecc37dfe6b0059b7340bc3fc15c6faf Mon Sep 17 00:00:00 2001
From: lesion <lesion@autistici.org>
Date: Wed, 9 Nov 2022 10:18:42 +0100
Subject: [PATCH] new navbar, loading component

---
 assets/style.css         |  35 ++++-
 components/Calendar.vue  |   2 +-
 components/DateInput.vue |  97 +++++---------
 components/Nav.vue       | 270 ++++++++++++++++++++++++++++++---------
 nuxt.config.js           |   5 +-
 pages/add/_edit.vue      |  29 +++--
 6 files changed, 300 insertions(+), 138 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 935e1af5..34caabf2 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -13,10 +13,25 @@ li {
   background-color: #434343;
 }
 
+.v-application {
+  font-family: sans-serif;
+}
+
 .v-application .p-description.text-body-1 {
   letter-spacing: normal !important;
 }
 
+.v-main {
+  padding-top: 176px !important;
+}
+
+.v-toolbar .v-list-item__subtitle,
+.v-toolbar h4 {
+  white-space: break-spaces;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
 #home {
   max-width: 1400px;
   padding: 0px;
@@ -27,10 +42,17 @@ li {
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
+  gap: 16px;
   justify-content: center;
 }
 
-#calh {
+@media only screen and (max-width: 600px) {
+  #events {
+    gap: 8px;
+  }
+}
+
+.calh {
   /* this is to avoid content shift layout as v-calendar does not support SSR */
   height: 268px;
 }
@@ -81,8 +103,8 @@ li {
   width: 330px;
   max-width: 500px !important;
   flex-grow: 1;
-  margin-top: .4em;
-  margin-right: .4em;
+  /* margin-top: 16px;
+  margin-right: 16px; */
   transition: all .5s;
   overflow: hidden;
 }
@@ -96,7 +118,7 @@ li {
   -webkit-box-orient: vertical;
   font-size: 1.1em !important;
   line-height: 1.2em !important;
-  text-decoration: none;
+  /* text-decoration: none; */
 }
 
 .event .body {
@@ -113,6 +135,11 @@ li {
   text-decoration: none;
 }
 
+.event a:hover,
+.event a:focus {
+  text-decoration: underline;
+}
+
 .vc-past {
   opacity: 0.4;
 }
diff --git a/components/Calendar.vue b/components/Calendar.vue
index 1f7a42a2..ffd7ce43 100644
--- a/components/Calendar.vue
+++ b/components/Calendar.vue
@@ -4,7 +4,7 @@
     v-model='selectedDate'
     title-position='left'
     :is-dark="settings['theme.is_dark']"
-    :columns="$screens({ sm: 2 }, 1)"
+    :columns="!$vuetify.breakpoint.smAndDown ? 2 : 1"
     @input='click'
     @update:from-page='updatePage'
     :locale='$i18n.locale'
diff --git a/components/DateInput.vue b/components/DateInput.vue
index 4439a866..b4097c49 100644
--- a/components/DateInput.vue
+++ b/components/DateInput.vue
@@ -15,16 +15,17 @@ v-col(cols=12)
       .datePicker.mt-3
         v-input(:value='fromDate' :rules="[$validators.required('common.when')]")
           vc-date-picker(
-            v-model='fromDate'
+            :value='fromDate'
             :is-range='type === "multidate"'
             @input="date => change('date', date)"
-            :timezone='settings.instance_timezone'
             :attributes='attributes'
             :locale='$i18n.locale'
             :is-dark="settings['theme.is_dark']"
             is-inline
             is-expanded
             :min-date='type !== "recurrent" && new Date()')
+      template(#placeholder)
+        span.calc Loading
 
   div.text-center.mb-2(v-if='type === "recurrent"')
     span(v-if='value.recurrent.frequency !== "1m" && value.recurrent.frequency !== "2m"') {{ whenPatterns }}
@@ -37,7 +38,7 @@ v-col(cols=12)
         v-model="menuFromHour"
         :close-on-content-click="false"
         offset-y
-        :value="fromHour"
+        :value="value.fromHour"
         transition="scale-transition")
         template(v-slot:activator="{ on, attrs }")
           v-text-field(
@@ -45,7 +46,7 @@ v-col(cols=12)
             :clear-icon='mdiClose'
             @click:clear='() => change("fromHour")'
             :label="$t('event.from')"
-            :value="fromHour"
+            :value="value.fromHour"
             :disabled='!value.from'
             readonly
             :prepend-icon="mdiClockTimeFourOutline"
@@ -54,7 +55,7 @@ v-col(cols=12)
             v-on="on")
         v-time-picker(
           v-if="menuFromHour"
-          v-model="fromHour"
+          :value="value.fromHour"
           :allowedMinutes='allowedMinutes'
           format='24hr'
           @click:minute='menuFromHour = false'
@@ -66,7 +67,7 @@ v-col(cols=12)
         v-model="menuDueHour"
         :close-on-content-click="false"
         offset-y
-        :value="dueHour"
+        :value="value.dueHour"
         transition="scale-transition")
         template(v-slot:activator="{ on, attrs }")
           v-text-field(
@@ -74,15 +75,15 @@ v-col(cols=12)
             :clear-icon='mdiClose'
             @click:clear='() => change("dueHour")'
             :label="$t('event.due')"
-            :value="dueHour"
-            :disabled='!fromHour'
+            :value="value.dueHour"
+            :disabled='!value.fromHour'
             readonly
             :prepend-icon="mdiClockTimeEightOutline"
             v-bind="attrs"
             v-on="on")
         v-time-picker(
           v-if="menuDueHour"
-          v-model="dueHour"
+          :value="value.dueHour"
           :allowedMinutes='allowedMinutes'
           format='24hr'
           @click:minute='menuDueHour = false'
@@ -102,7 +103,7 @@ export default {
   name: 'DateInput',
   components: { List },
   props: {
-    value: { type: Object, default: () => ({ from: null, due: null, recurrent: null }) },
+    value: { type: Object, default: () => ({ from: null, due: null, recurrent: null, fromHour: null, dueHour: null }) },
     event: { type: Object, default: () => null }
   },
   data() {
@@ -122,26 +123,15 @@ export default {
   },
   computed: {
     ...mapState(['settings']),
-    fromDate: {
-      set: () => {},
-      get: function () {
-        if (this.value.from) {
-          if (this.value.multidate) {
-            return ({ start: dayjs(this.value.from).toDate(), end: dayjs(this.value.due).toDate() })
-          } else {
-            return new Date(this.value.from)
-          }
+    fromDate () {
+      if (this.value.from) {
+        if (this.value.multidate) {
+          return ({ start: dayjs(this.value.from).toDate(), end: dayjs(this.value.due).toDate() })
+        } else {
+          return new Date(this.value.from)
         }
       }
     },
-    fromHour: {
-      set: () => {},
-      get () { return this.value.from && dayjs.tz(this.value.from).format('HH:mm') || '' }
-    },
-    dueHour: {
-      set: () => {},
-      get () { return this.value.due && dayjs.tz(this.value.due).format('HH:mm') || '' }
-    },
     todayEvents() {
       const start = dayjs.tz(this.value.from).startOf('day').unix()
       const end = dayjs.tz(this.value.from).endOf('day').unix()
@@ -236,56 +226,39 @@ export default {
       } else if (what === 'recurrentType') {
         this.$emit('input', { ...this.value, recurrent: { ...this.value.recurrent, type: value } })
       } else if (what === 'fromHour') {
-        const [hour, minute] = value ? value.split(':') : [0, 0]
-        let from = dayjs.tz(this.value.from).hour(hour).minute(minute).second(0).toDate()
-        this.$emit('input', { ...this.value, from })
-        if (!value) {
-          this.fromHour = null
+        if (value) {
+          this.$emit('input', { ...this.value, fromHour: value })
+        } else {
+          this.$emit('input', { ...this.value, fromHour: null, dueHour: null })
         }
       } else if (what === 'dueHour') {
-        if (value) {
-          const [hour, minute] = value.split(':')
-          let due = dayjs.tz(this.value.due || this.value.from).hour(Number(hour)).minute(Number(minute)).second(0)
+        this.$emit('input', { ...this.value, dueHour: value })
 
-          // add a day
-          if (dayjs(this.value.from).hour() > Number(hour) && !this.value.multidate) {
-            due = due.add(1, 'day')
-          }
-          due = due.hour(hour).minute(minute).second(0)
-          this.$emit('input', { ...this.value, due: due.toDate() })
-        } else {
-          this.$emit('input', { ...this.value, due: null })
-          this.dueHour = null
-        }
+        // if (value) {
+        //   // const [hour, minute] = value.split(':')
+        //   // let due = dayjs.tz(this.value.due || this.value.from).hour(Number(hour)).minute(Number(minute)).second(0)
+
+        //   // add a day
+        //   // if (dayjs(this.value.from).hour() > Number(hour) && !this.value.multidate) {
+        //   //   due = due.add(1, 'day')
+        //   // }
+        //   // due = due.hour(hour).minute(minute).second(0)
+        // } else {
+        //   this.$emit('input', { ...this.value, dueHour: null })
+        // }
         // change date in calendar (could be a range or a recurrent event...)
       } else if (what === 'date') {
         if (value === null) {
-          this.$emit('input', { ...this.value, from: null, due: null })
+          this.$emit('input', { ...this.value, from: null, due: null, fromHour: null, dueHour: null })
           return
         }
         if (this.value.multidate) {
           let from = value.start
           let due = value.end
-          if (this.fromHour) {
-            const [hour, minute] = this.fromHour.split(':')
-            from = dayjs.tz(from).hour(hour).minute(minute).second(0).toDate()
-          }
-          if (this.dueHour) {
-            const [hour, minute] = this.dueHour.split(':')
-            due = dayjs.tz(due).hour(hour).minute(minute).second(0).toDate()
-          }
           this.$emit('input', { ...this.value, from, due })
         } else {
           let from = value
           let due = this.value.due
-          if (this.fromHour) {
-            const [hour, minute] = this.fromHour.split(':')
-            from = dayjs.tz(value).hour(hour).minute(minute).second(0).toDate()
-          }
-          if (this.dueHour) {
-            const [hour, minute] = this.dueHour.split(':')
-            due = dayjs.tz(value).hour(hour).minute(minute).second(0).toDate()
-          }
           this.$emit('input', { ...this.value, from, due })
         }
       }
diff --git a/components/Nav.vue b/components/Nav.vue
index 63765c0e..5bd83eef 100644
--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -1,87 +1,241 @@
-<template lang="pug">
-v-app-bar(app aria-label='Menu' height=64)
+<template>
+  <v-app-bar prominent fade-img-on-scroll app hide-on-scroll
+      src="/headerimage.png">
+      <template v-slot:img="{ props }">
+        <v-img
+          v-bind="props"
+          :gradient="gradient"
+        ></v-img>
+      </template>
+      <v-app-bar-nav-icon to='/'>
+        <img src='/logo.png' height='40' />
+      </v-app-bar-nav-icon>
+      <v-list-item class='align-self-end' two-line>
+        <v-list-item-content>
+          <h4 v-text='settings.title'></h4>
+          <v-list-item-subtitle v-text='settings.description'></v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
 
-  //- logo, title and description
-  v-list-item(:to='$route.name==="index"?"/about":"/"')
-    v-list-item-avatar.ma-xs-1(tile)
-      img(src='/logo.png' height='40')
-    v-list-item-content
-      v-list-item-title.d-flex
-        h2 {{settings.title}}
-      v-list-item-subtitle.d-none.d-sm-flex {{settings.description}}
 
-  v-spacer
-  v-btn(v-if='loggedIn || settings.allow_anon_event' icon nuxt to='/add' :aria-label='$t("common.add_event")' :title='$t("common.add_event")')
-    v-icon(large color='primary' v-text='mdiPlus')
+      <client-only>
+        <v-menu offset-y transition="slide-y-transition">
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn icon v-bind='attrs' v-on='on' aria-label='Language' v-text="$i18n.locale" />
+          </template>
+          <v-list>
+            <v-list-item v-for='locale in $i18n.locales' @click.prevent.stop="$i18n.setLocale(locale.code)" :key='locale.code'>
+              <v-list-item-content>
+                <v-list-item-title v-text='locale.name' />
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item nuxt target='_blank' href='https://hosted.weblate.org/engage/gancio/'>
+              <v-list-item-content>
+                  <v-list-item-subtitle v-text='$t("common.help_translate")' />
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+        <v-btn slot='placeholder' icon arial-label='Language'>{{$i18n.locale}}</v-btn>
+      </client-only> 
 
-  v-btn(icon nuxt to='/export' :title='$t("common.share")' :aria-label='$t("common.share")')
-    v-icon(v-text='mdiShareVariant')
+      <client-only>
+        <v-menu v-if='loggedIn' offset-y transition="slide-y-transition">
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn class='mr-0' icon v-bind='attrs' v-on='on' title='Menu' aria-label='Menu'>
+              <v-icon v-text='mdiDotsVertical' />
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item nuxt to='/settings'>
+              <v-list-item-icon><v-icon v-text='mdiCog'></v-icon></v-list-item-icon>
+              <v-list-item-content>
+                <v-list-item-title v-text="$t('common.settings')"/>
+              </v-list-item-content>
+            </v-list-item>
 
-  v-btn(v-if='!loggedIn' icon nuxt to='/login' :title='$t("common.login")' :aria-label='$t("common.login")')
-    v-icon(v-text='mdiLogin')
+            <v-list-item v-if='$auth.user.is_admin' nuxt to='/admin'>
+              <v-list-item-icon>
+                <v-icon v-text='mdiAccount' />
+              </v-list-item-icon>
+              <v-list-item-content>
+                <v-list-item-title v-text="$t('common.admin')" />
+              </v-list-item-content>
+            </v-list-item>
 
-  client-only
-    v-menu(v-if='loggedIn' offset-y transition="slide-y-transition")
-      template(v-slot:activator="{ on, attrs }")
-        v-btn(icon v-bind='attrs' v-on='on' title='Menu' aria-label='Menu')
-          v-icon(v-text='mdiDotsVertical')
-      v-list
-        v-list-item(nuxt to='/settings')
-          v-list-item-icon
-            v-icon(v-text='mdiCog')
-          v-list-item-content
-            v-list-item-title {{$t('common.settings')}}
+            <v-list-item @click='logout'>
+              <v-list-item-icon>
+                <v-icon v-text='mdiLogout' />
+              </v-list-item-icon>
 
-        v-list-item(v-if='$auth.user.is_admin' nuxt to='/admin')
-          v-list-item-icon
-            v-icon(v-text='mdiAccount')
-          v-list-item-content
-            v-list-item-title {{$t('common.admin')}}
+              <v-list-item-content>
+                <v-list-item-title v-text="$t('common.logout')" />
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+        <template #placeholder>
+          <v-btn v-if='loggedIn' icon aria-label='Menu' title='Menu'>
+            <v-icon v-text='mdiDotsVertical' />
+          </v-btn>
+        </template>
+      </client-only>
 
-        v-list-item(@click='logout')
-          v-list-item-icon
-            v-icon(v-text='mdiLogout')
-          v-list-item-content
-            v-list-item-title {{$t('common.logout')}}
-    template(#placeholder)
-      v-btn(v-if='loggedIn' icon aria-label='Menu' title='Menu')
-        v-icon(v-text='mdiDotsVertical')
+      <!-- login button -->
+      <v-btn class='mr-0' v-if='!loggedIn' icon nuxt  to='/login' :title='$t("common.login")' :aria-label='$t("common.login")'>
+        <v-icon v-text='mdiLogin' />
+      </v-btn>
 
-  client-only
-    v-menu(offset-y transition="slide-y-transition" min-width='200px' max-height='400px')
-      template(v-slot:activator="{ on, attrs }")
-        v-btn(icon v-bind='attrs' v-on='on' aria-label='Language') {{$i18n.locale}}
-      v-list
-        v-list-item(v-for='locale in $i18n.locales' @click.prevent.stop="$i18n.setLocale(locale.code)" :key='locale.code')
-          v-list-item-content
-            v-list-item-title {{locale.name}}
-        v-list-item(nuxt target='_blank' href='https://hosted.weblate.org/engage/gancio/')
-          v-list-item-content
-            v-list-item-subtitle(v-text='$t("common.help_translate")')
-    template(#placeholder)
-      v-btn(icon aria-label='Language') {{$i18n.locale}}
+      <!-- <nuxt-link v-if='loggedIn || settings.allow_anon_event' link text nuxt to='/add' :aria-label='$t("common.add_event")' :title='$t("common.add_event")'>
+        <v-icon large  v-text='mdiPlus' />
+        <small v-text="$t('common.add_event')" />
+      </nuxt-link> -->
 
-  v-btn(icon target='_blank' :href='`${settings.baseurl}/feed/rss`' title='RSS' aria-label='RSS')
-    v-icon(color='orange' v-text='mdiRss')
+<!-- //-   v-btn(icon nuxt to='/export' :title='$t("common.share")' :aria-label='$t("common.share")')
+//-     v-icon(v-text='mdiShareVariant')
+
+//-   v-btn(v-if='!loggedIn' icon nuxt to='/login' :title='$t("common.login")' :aria-label='$t("common.login")')
+//-     v-icon(v-text='mdiLogin')
+
+
+
+//-   client-only
+//-     v-menu(offset-y transition="slide-y-transition" min-width='200px' max-height='400px')
+//-       template(v-slot:activator="{ on, attrs }")
+//-         v-btn(icon v-bind='attrs' v-on='on' aria-label='Language') {{$i18n.locale}}
+//-       v-list
+//-         v-list-item(v-for='locale in $i18n.locales' @click.prevent.stop="$i18n.setLocale(locale.code)" :key='locale.code')
+//-           v-list-item-content
+//-             v-list-item-title {{locale.name}}
+//-         v-list-item(nuxt target='_blank' href='https://hosted.weblate.org/engage/gancio/')
+//-           v-list-item-content
+//-             v-list-item-subtitle(v-text='$t("common.help_translate")')
+//-     template(#placeholder)
+//-       v-btn(icon aria-label='Language') {{$i18n.locale}}
+
+//-   v-btn(icon target='_blank' :href='`${settings.baseurl}/feed/rss`' title='RSS' aria-label='RSS')
+//-     v-icon(color='orange' v-text='mdiRss')       -->
+<!-- 
+      <v-menu left bottom>
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn icon v-bind="attrs" v-on="on">
+            <v-icon>mdi-dots-vertical</v-icon>
+          </v-btn>
+        </template>
+      </v-menu> -->
+<!-- .v-application--is-ltr .v-tabs--align-with-title > .v-tabs-bar:not(.v-tabs-bar--show-arrows):not(.v-slide-group--is-overflowing) > .v-slide-group__wrapper > .v-tabs-bar__content > .v-tab:first-child,
+     .v-application--is-ltr .v-tabs--align-with-title > .v-tabs-bar:not(.v-tabs-bar--show-arrows):not(.v-slide-group--is-overflowing) > .v-slide-group__wrapper > .v-tabs-bar__content > .v-tabs-slider-wrapper + .v-tab -->
+      <template v-slot:extension>
+        <v-tabs dense icons-and-text :align-with-title='$vuetify.breakpoint.smAndUp' optional>
+          <v-tab to='/'>
+            <span class='d-none d-sm-flex'>Home</span>
+            <v-icon v-text='mdiHome' />
+          </v-tab>
+          <v-tab v-if='loggedIn || settings.allow_anon_event' to='/add'>
+            <span class='d-none d-sm-flex'>{{$t('common.add_event')}}</span>
+            <v-icon color='primary' v-text='mdiPlus' />
+          </v-tab>
+          <v-tab to='/export' >
+            <span class='d-none d-sm-flex'>{{$t('common.share')}}</span>
+            <v-icon v-text='mdiShareVariant' />
+          </v-tab>
+          <v-tab to='/about'>
+            <span class='d-none d-sm-flex'>About</span>
+            <v-icon v-text='mdiInformation' />
+          </v-tab>
+        </v-tabs>
+      </template>
+    </v-app-bar>
+
+<!-- //- v-app-bar(app aria-label='Menu' height=64)
+//-   //- logo, title and description
+//-   v-list-item(:to='$route.name==="index"?"/about":"/"')
+//-     v-list-item-avatar.ma-xs-1(tile)
+//-       img(src='/logo.png' height='40')
+//-     v-list-item-content
+//-       v-list-item-title.d-flex
+//-         h2 {{settings.title}}
+//-       v-list-item-subtitle.d-none.d-sm-flex {{settings.description}}
+
+//-   v-spacer
+//-   v-btn(v-if='loggedIn || settings.allow_anon_event' icon nuxt to='/add' :aria-label='$t("common.add_event")' :title='$t("common.add_event")')
+//-     v-icon(large color='primary' v-text='mdiPlus')
+
+//-   v-btn(icon nuxt to='/export' :title='$t("common.share")' :aria-label='$t("common.share")')
+//-     v-icon(v-text='mdiShareVariant')
+
+//-   v-btn(v-if='!loggedIn' icon nuxt to='/login' :title='$t("common.login")' :aria-label='$t("common.login")')
+//-     v-icon(v-text='mdiLogin')
+
+//-   client-only
+//-     v-menu(v-if='loggedIn' offset-y transition="slide-y-transition")
+//-       template(v-slot:activator="{ on, attrs }")
+//-         v-btn(icon v-bind='attrs' v-on='on' title='Menu' aria-label='Menu')
+//-           v-icon(v-text='mdiDotsVertical')
+//-       v-list
+//-         v-list-item(nuxt to='/settings')
+//-           v-list-item-icon
+//-             v-icon(v-text='mdiCog')
+//-           v-list-item-content
+//-             v-list-item-title {{$t('common.settings')}}
+
+//-         v-list-item(v-if='$auth.user.is_admin' nuxt to='/admin')
+//-           v-list-item-icon
+//-             v-icon(v-text='mdiAccount')
+//-           v-list-item-content
+//-             v-list-item-title {{$t('common.admin')}}
+
+//-         v-list-item(@click='logout')
+//-           v-list-item-icon
+//-             v-icon(v-text='mdiLogout')
+//-           v-list-item-content
+//-             v-list-item-title {{$t('common.logout')}}
+//-     template(#placeholder)
+//-       v-btn(v-if='loggedIn' icon aria-label='Menu' title='Menu')
+//-         v-icon(v-text='mdiDotsVertical')
+
+//-   client-only
+//-     v-menu(offset-y transition="slide-y-transition" min-width='200px' max-height='400px')
+//-       template(v-slot:activator="{ on, attrs }")
+//-         v-btn(icon v-bind='attrs' v-on='on' aria-label='Language') {{$i18n.locale}}
+//-       v-list
+//-         v-list-item(v-for='locale in $i18n.locales' @click.prevent.stop="$i18n.setLocale(locale.code)" :key='locale.code')
+//-           v-list-item-content
+//-             v-list-item-title {{locale.name}}
+//-         v-list-item(nuxt target='_blank' href='https://hosted.weblate.org/engage/gancio/')
+//-           v-list-item-content
+//-             v-list-item-subtitle(v-text='$t("common.help_translate")')
+//-     template(#placeholder)
+//-       v-btn(icon aria-label='Language') {{$i18n.locale}}
+
+//-   v-btn(icon target='_blank' :href='`${settings.baseurl}/feed/rss`' title='RSS' aria-label='RSS')
+//-     v-icon(color='orange' v-text='mdiRss') -->
 
 </template>
 <script>
 const locales = require('../locales/index')
 import { mapState } from 'vuex'
 import clipboard from '../assets/clipboard'
-import { mdiPlus, mdiShareVariant, mdiLogin, mdiDotsVertical, mdiLogout, mdiAccount, mdiCog, mdiRss } from '@mdi/js'
+import { mdiPlus, mdiShareVariant, mdiLogin, mdiDotsVertical, mdiLogout, mdiAccount, mdiCog, mdiRss, mdiHome, mdiInformation } from '@mdi/js'
 
 
 export default {
   name: 'Nav',
   data () {
-    return { mdiPlus, mdiShareVariant, mdiLogout, mdiLogin, mdiDotsVertical, mdiAccount, mdiCog, mdiRss, locales }
+    return { mdiPlus, mdiShareVariant, mdiLogout, mdiLogin, mdiDotsVertical, mdiAccount, mdiCog, mdiRss, mdiHome, mdiInformation, locales }
   },
   mixins: [clipboard],
   computed: {
     loggedIn () {
       return this.$auth.loggedIn
     },
+    gradient () {
+      if (this.$vuetify.theme.dark) {
+        return 'to bottom, rgba(59,0,0,.9), rgba(0,0,0,.9)'
+      } else {
+        return 'to bottom, rgba(255,230,230,.95), rgba(250,250,250,.95)'
+      }
+    },
     ...mapState(['settings']),
   },
   methods: {
diff --git a/nuxt.config.js b/nuxt.config.js
index 5663babc..ca906ce0 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -31,7 +31,10 @@ module.exports = {
   /*
    ** Customize the progress-bar component
    */
-  loading: '~/components/Loading.vue',
+  loading: {
+    color: 'orangered',
+    height: '3px'
+  }, //'~/components/Loading.vue',
   /*
    ** Plugins to load before mounting the App
    */
diff --git a/pages/add/_edit.vue b/pages/add/_edit.vue
index 598612c1..545f29cb 100644
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -109,13 +109,15 @@ export default {
 
       data.event.place.name = event.place.name
       data.event.place.address = event.place.address || ''
+      const from = dayjs.unix(event.start_datetime)
+      const due = event.end_datetime && dayjs.unix(event.end_datetime)
       data.date = {
         recurrent: event.recurrent,
-        from: dayjs.unix(event.start_datetime).toDate(),
-        due: event.end_datetime && dayjs.unix(event.end_datetime).toDate(),
+        from: from.toDate(),
+        due: due && due.toDate(),
         multidate: event.multidate,
-        fromHour: true,
-        dueHour: true
+        fromHour: from.format('HH:mm'),
+        dueHour: due && due.format('HH:mm')
       }
 
       data.event.title = event.title
@@ -174,14 +176,15 @@ export default {
       this.event = Object.assign(this.event, event)
 
       this.$refs.where.selectPlace({ name: event.place.name || event.place, address: event.place.address })
-
+      const from = dayjs.unix(this.event.start_datetime)
+      const due = this.event.end_datetime && dayjs.unix(this.event.end_datetime)
       this.date = {
         recurrent: this.event.recurrent || null,
-        from: dayjs.unix(this.event.start_datetime).toDate(),
-        due: this.event.end_datetime && dayjs.unix(this.event.end_datetime).toDate(),
+        from: from.toDate(),
+        due: due && due.toDate(),
         multidate: event.multidate,
-        fromHour: true,
-        dueHour: true
+        fromHour: from.format('HH:mm'),
+        dueHour: due && due.format('HH:mm')
       }
       this.openImportDialog = false
     },
@@ -218,9 +221,11 @@ export default {
       formData.append('place_address', this.event.place.address)
       formData.append('description', this.event.description)
       formData.append('multidate', !!this.date.multidate)
-      formData.append('start_datetime', dayjs(this.date.from).unix())
-      if (this.date.due) {
-        formData.append('end_datetime', dayjs(this.date.due).unix())
+      let [hour, minute] = this.date.fromHour.split(':')
+      formData.append('start_datetime', dayjs(this.date.from).hour(Number(hour)).minute(Number(minute)).second(0).unix())
+      if (this.date.dueHour) {
+        [hour, minute] = this.date.dueHour.split(':')
+        formData.append('end_datetime', dayjs(this.date.due).hour(Number(hour)).minute(Number(minute)).second(0).unix())
       }
 
       if (this.edit) {