Fixes to navbar and edit page

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-    <img svg-inline src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{invert: invert}" height="60px">
+    <img svg-inline src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{invert: invert}" height="40px">
 </template>
 
 <script lang="ts">

js/src/components/NavBar.vue

@@ -1,11 +1,14 @@
 <template>
   <b-navbar type="is-secondary" shadow wrapper-class="container">
     <template slot="brand">
-      <b-navbar-item tag="router-link" :to="{ name: 'Home' }"><logo /></b-navbar-item>
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }"><logo /></b-navbar-item>
     </template>
     <template slot="start">
       <b-navbar-item tag="router-link" :to="{ name: EventRouteName.EXPLORE }">{{ $t('Explore') }}</b-navbar-item>
       <b-navbar-item tag="router-link" :to="{ name: EventRouteName.MY_EVENTS }">{{ $t('Events') }}</b-navbar-item>
+      <b-navbar-item tag="span">
+        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{ $t('Create') }}</b-button>
+      </b-navbar-item>
     </template>
     <template slot="end">
       <b-navbar-item tag="div">
@@ -56,11 +59,11 @@
 
       <b-navbar-item v-else tag="div">
         <div class="buttons">
-          <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }">
+          <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: RouteName.REGISTER }">
             <strong>{{ $t('Sign up') }}</strong>
           </router-link>
 
-          <router-link class="button is-light" :to="{ name: 'Login' }">{{ $t('Log in') }}</router-link>
+          <router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{ $t('Log in') }}</router-link>
         </div>
       </b-navbar-item>
     </template>
@@ -114,7 +117,7 @@ export default class NavBar extends Vue {
   currentUser!: ICurrentUser;
   ICurrentUserRole = ICurrentUserRole;
   identities: IPerson[] = [];
-  showNavbar: boolean = false;
+  RouteName = RouteName;
 
   ActorRouteName = ActorRouteName;
   AdminRouteName = AdminRouteName;

js/src/variables.scss

@@ -16,7 +16,7 @@ $colors: map-merge(
 // Navbar
 $navbar-background-color: $secondary;
 $navbar-item-color: $primary;
-$navbar-height: 7rem;
+$navbar-height: 4rem;
 
 
 // Footer

js/src/views/Event/Edit.vue

@@ -162,7 +162,7 @@
       <div class="container">
         <div class="navbar-menu">
           <div class="navbar-start">
-            <span class="navbar-item" v-if="isUpdate === true && isEventModified">{{ $t('Unsaved changes') }}</span>
+            <span class="navbar-item" v-if="isEventModified">{{ $t('Unsaved changes') }}</span>
           </div>
           <div class="navbar-end">
             <span class="navbar-item">
@@ -293,7 +293,7 @@ export default class EditEvent extends Vue {
 
     if (this.eventId) {
       this.event = await this.getEvent();
-      this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event));
+      this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event.toEditJSON()));
 
       this.pictureFile = await buildFileFromIPicture(this.event.picture);
       this.limitedPlaces = this.event.options.maximumAttendeeCapacity != null;
@@ -301,8 +301,16 @@ export default class EditEvent extends Vue {
   }
 
   created() {
-    const now = new Date();
-    const end = new Date();
+    this.initializeEvent();
+    this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event.toEditJSON()));
+  }
+
+  private initializeEvent() {
+    const roundUpTo = roundTo => x => new Date(Math.ceil(x / roundTo) * roundTo);
+    const roundUpTo15Minutes = roundUpTo(1000 * 60 * 15);
+
+    const now = roundUpTo15Minutes(new Date());
+    const end = roundUpTo15Minutes(new Date());
     end.setUTCHours(now.getUTCHours() + 3);
 
     this.event.beginsOn = now;
@@ -311,7 +319,7 @@ export default class EditEvent extends Vue {
   }
 
   mounted() {
-    this.observer = new IntersectionObserver((entries, observer) => {
+    this.observer = new IntersectionObserver((entries) => {
       for (const entry of entries) {
         if (entry) {
           this.showFixedNavbar = !entry.isIntersecting;
@@ -454,7 +462,7 @@ export default class EditEvent extends Vue {
   }
 
   get isEventModified(): boolean {
-    return JSON.stringify(this.event) !== JSON.stringify(this.unmodifiedEvent);
+    return JSON.stringify(this.event.toEditJSON()) !== JSON.stringify(this.unmodifiedEvent);
   }
 
   // getAddressData(addressData) {

js/src/views/Home.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="container" v-if="config">
-    <section class="hero is-link" v-if="!currentUser.id || !currentActor">
+    <section class="hero is-info" v-if="!currentUser.id || !currentActor">
       <div class="hero-body">
         <div>
           <h1 class="title">{{ config.name }}</h1>
           <h2 class="subtitle">{{ config.description }}</h2>
           <router-link class="button" :to="{ name: 'Register' }" v-if="config.registrationsOpen">
-            {{ $t('Register') }}
+            {{ $t('Sign up') }}
           </router-link>
           <p v-else>
             {{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
@@ -14,24 +14,12 @@
         </div>
       </div>
     </section>
-    <section v-else>
-      <h1>
-        {{ $t('Welcome back {username}', {username: `@${currentActor.preferredUsername}`}) }}
-      </h1>
+    <section v-else-if="currentActor">
+      <b-message type="is-info">
+        {{ $t('Welcome back {username}', { username: currentActor.displayName() }) }}
+      </b-message>
     </section>
-    <b-dropdown aria-role="list">
-      <button class="button is-primary" slot="trigger">
-        <span>{{ $t('Create') }}</span>
-        <b-icon icon="menu-down"></b-icon>
-      </button>
-      <b-dropdown-item aria-role="listitem">
-        <router-link :to="{ name: RouteName.CREATE_EVENT }">{{ $t('Event') }}</router-link>
-      </b-dropdown-item>
-      <b-dropdown-item aria-role="listitem">
-        <router-link :to="{ name: RouteName.CREATE_GROUP }">{{ $t('Group') }}</router-link>
-      </b-dropdown-item>
-    </b-dropdown>
-    <section v-if="currentActor && goingToEvents.size > 0" class="container">
+    <section v-else-if="currentActor && goingToEvents.size > 0" class="container">
       <h3 class="title">
         {{ $t("Upcoming") }}
       </h3>
@@ -121,6 +109,7 @@ import { EventRouteName } from '@/router/event';
     },
     currentActor: {
       query: CURRENT_ACTOR_CLIENT,
+      update: data => new Person(data.currentActor),
     },
     currentUser: {
       query: CURRENT_USER_CLIENT,