From 3f2664cf47baa59218520d54c403bdd54c0c56aa Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 13 Oct 2020 16:57:36 +0200
Subject: [PATCH] Improve edit page on mobile

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Event/Edit.vue | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index 06e38968a..f58bed173 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -192,7 +192,7 @@
 
         <subtitle>{{ $t("Status") }}</subtitle>
 
-        <b-field>
+        <b-field class="event__status__field">
           <b-radio-button
             v-model="event.status"
             name="status"
@@ -253,7 +253,7 @@
     <nav
       role="navigation"
       aria-label="main navigation"
-      class="navbar"
+      class="navbar save__navbar"
       :class="{ 'is-fixed-bottom': showFixedNavbar }"
       v-if="isCurrentActorOrganizer"
     >
@@ -302,6 +302,19 @@ main section > .container {
   background: $white;
 }
 
+.save__navbar {
+  /deep/ .navbar-menu,
+  .navbar-end {
+    flex-wrap: wrap;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .navbar.is-fixed-bottom {
+    position: initial;
+  }
+}
+
 h2.subtitle {
   margin: 10px 0;
 
@@ -312,6 +325,14 @@ h2.subtitle {
   }
 }
 
+.event__status__field {
+  /deep/ .field.has-addons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+}
+
 section {
   & > .container {
     padding: 2rem 1.5rem;
@@ -489,7 +510,14 @@ export default class EditEvent extends Vue {
 
     this.event.beginsOn = now;
     this.event.endsOn = end;
-    this.event.organizerActor = this.event.organizerActor || this.currentActor;
+    this.event.organizerActor = this.getDefaultActor();
+  }
+
+  private getDefaultActor() {
+    if (this.event.organizerActor && this.event.organizerActor.id) {
+      return this.event.organizerActor;
+    }
+    return this.currentActor;
   }
 
   async mounted(): Promise<void> {