Merge branch 'master' into 6636-search-trigger-after-3-chars

webapp/components/ContributionForm/ContributionForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <ds-form
       class="contribution-form"
       ref="contributionForm"
@@ -76,7 +77,10 @@
                     @change="changeEventStart($event)"
                   ></date-picker>
                 </div>
-              <div v-if="errors && errors.eventStart" class="chipbox event-grid-item-margin-helper">
+                <div
+                  v-if="errors && errors.eventStart"
+                  class="chipbox event-grid-item-margin-helper"
+                >
                   <ds-chip size="base" :color="errors && errors.eventStart && 'danger'">
                     <base-icon name="warning" />
                   </ds-chip>
@@ -180,6 +184,7 @@
         </base-card>
       </template>
     </ds-form>
+  </div>
 </template>
 <script>
 import gql from 'graphql-tag'

webapp/locales/de.json

@@ -749,13 +749,13 @@
       "forGroup": {
         "title": "Für die Gruppe „{name}“"
       },
-      "title": "Erstelle ein neues Event"
+      "title": "Erstelle eine Veranstaltung"
     },
     "createNewPost": {
       "forGroup": {
         "title": "Für die Gruppe „{name}“"
       },
-      "title": "Erstelle einen neuen Beitrag"
+      "title": "Erstelle einen Beitrag"
     },
     "edited": "bearbeitet",
     "editPost": {

webapp/locales/en.json

@@ -749,13 +749,13 @@
       "forGroup": {
         "title": "For The Group “{name}”"
       },
-      "title": "Create A New Event"
+      "title": "Create an Event"
     },
     "createNewPost": {
       "forGroup": {
         "title": "For The Group “{name}”"
       },
-      "title": "Create A New Article"
+      "title": "Create an Article"
     },
     "edited": "edited",
     "editPost": {

webapp/pages/post/create.vue

@@ -1,55 +1,33 @@
 <template>
   <div>
-    <ds-flex :width="{ base: '100%' }">
+    <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%' }">
+      <ds-flex-item :width="{ base: '100%', md: '200px' }">
-        <ds-flex gutter="base" :width="{ base: '100%', sm: 1 }">
+        <ds-menu class="post-type-menu" :routes="routes">
-          <ds-flex-item>
+          <ds-menu-item
-            <ds-card class="create-form-btn" :primary="!createEvent" centered>
+            @click.prevent="switchPostType($event, item)"
-              <div>
+            slot="menuitem"
-                <ds-button
+            slot-scope="item"
-                  v-if="!createEvent"
+            :route="item.route"
-                  ghost
+            class="post-type-menu-item"
-                  fullwidth
-                  size="x-large"
-                  class="inactive-tab-button"
           >
-                  {{ $t('post.createNewPost.title') }}
+            {{ item.route.name }}
-                </ds-button>
+          </ds-menu-item>
-                <ds-button v-else ghost fullwidth size="x-large" @click="switchPostType()">
+        </ds-menu>
-                  {{ $t('post.createNewPost.title') }}
-                </ds-button>
-              </div>
-            </ds-card>
       </ds-flex-item>
-          <ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">
-            <ds-card class="create-form-btn" :primary="!!createEvent" centered>
+        <transition name="slide-up" appear>
           <div>
-                <ds-button
+            <div>
-                  ghost
+              <h1 v-if="!createEvent" class="title">
-                  fullwidth
+                {{ $t('post.createNewPost.title') }}
-                  size="x-large"
+              </h1>
-                  v-if="createEvent"
+              <h1 v-else class="title">
-                  hover
-                  class="inactive-tab-button"
-                >
                 {{ $t('post.createNewEvent.title') }}
-                </ds-button>
+              </h1>
-                <ds-button ghost fullwidth size="x-large" v-else @click="switchPostType()">
-                  {{ $t('post.createNewEvent.title') }}
-                </ds-button>
             </div>
-            </ds-card>
-          </ds-flex-item>
-        </ds-flex>
-        <div v-if="group" class="group-create-title">
-          {{ $t('post.createNewPost.forGroup.title', { name: group.name }) }}
-        </div>
-      </ds-flex-item>
-    </ds-flex>
-
-    <ds-flex :width="{ base: '100%' }" gutter="base">
-      <ds-flex-item :width="{ base: '100%' }">
             <contribution-form :group="group" :createEvent="createEvent" />
+          </div>
+        </transition>
       </ds-flex-item>
     </ds-flex>
   </div>
@@ -74,6 +52,20 @@ export default {
     group() {
       return this.Group && this.Group[0] ? this.Group[0] : null
     },
+    routes() {
+      return [
+        {
+          name: this.$t('post.name'),
+          path: `/post/create`,
+          type: 'post',
+        },
+        {
+          name: this.$t('post.event'),
+          path: `/`,
+          type: 'event',
+        },
+      ]
+    },
   },
   apollo: {
     Group: {
@@ -97,8 +89,18 @@ export default {
     },
   },
   methods: {
-    switchPostType() {
+    switchPostType(event, route) {
-      this.createEvent = !this.createEvent
+      if (route.route.type.toLowerCase() === 'event') {
+        this.createEvent = true
+      } else {
+        this.createEvent = false
+      }
+      // hacky way to set active element
+      const menuItems = document.querySelectorAll('.post-type-menu-item')
+      menuItems.forEach((menuItem) => {
+        menuItem.firstChild.classList.remove('router-link-exact-active', 'router-link-active')
+      })
+      event.target.classList.add('router-link-exact-active')
     },
   },
 }
@@ -120,4 +122,16 @@ export default {
 .create-form-btn .ds-button-ghost:hover {
   background-color: transparent;
 }
+
+.menu-item-active {
+  color: $color-primary;
+  border-left: 2px solid $color-primary;
+  background-color: #faf9fa;
+}
+
+@media screen and (min-width: 768px) {
+  .post-type-menu {
+    margin-top: 39px;
+  }
+}
 </style>