refactor ContributionForm template

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -16,14 +16,6 @@
         </ds-flex-item>
       </div>
     </ds-flex>
-    <p class="small-info">
-      {{
-        $t('contribution.categories.infoSelectedNoOfMaxCategories', {
-          chosen: selectedCount,
-          max: selectedMax,
-        })
-      }}
-    </p>
   </div>
 </template>
 

webapp/components/ContributionForm/ContributionForm.vue

@@ -8,94 +8,64 @@
   >
     <template slot-scope="{ errors }">
       <base-card>
-        <section class="card-image">
+        <section :class="['card-image', form.blurImage && '--blur-image']">
           <img v-if="contribution" class="preview-image" :src="contribution.image | proxyApiUrl" />
           <teaser-image
             :contribution="contribution"
-            :class="{ '--blur-image': form.blurImage }"
             @addTeaserImage="addTeaserImage"
             @addImageAspectRatio="addImageAspectRatio"
           />
         </section>
-        <div class="blur-toggle">
+        <div v-if="form.teaserImage || form.image" class="blur-toggle">
           <label for="blur-img">{{ $t('contribution.inappropriatePicture') }}</label>
           <input type="checkbox" id="blur-img" v-model="form.blurImage" />
-          <p>
           <a
             href="https://support.human-connection.org/kb/faq.php?id=113"
             target="_blank"
             class="link"
           >
             {{ $t('contribution.inappropriatePictureText') }}
-              <ds-icon name="question-circle" />
+            <base-icon name="question-circle" />
           </a>
-          </p>
         </div>
-
-        <ds-space />
-        <client-only>
-          <user-teaser :user="currentUser" />
-        </client-only>
-        <ds-space />
         <ds-input
           model="title"
-          class="post-title"
           :placeholder="$t('contribution.title')"
           name="title"
           autofocus
+          size="large"
         />
-        <ds-text align="right">
+        <ds-chip size="base" :color="errors && errors.title && 'danger'">
-          <ds-chip v-if="errors && errors.title" color="danger" size="base">
           {{ form.title.length }}/{{ formSchema.title.max }}
-            <ds-icon name="warning"></ds-icon>
+          <base-icon v-if="errors && errors.title" name="warning" />
         </ds-chip>
-          <ds-chip v-else size="base">{{ form.title.length }}/{{ formSchema.title.max }}</ds-chip>
-        </ds-text>
         <hc-editor
           :users="users"
           :value="form.content"
           :hashtags="hashtags"
           @input="updateEditorContent"
         />
-        <ds-text align="right">
+        <ds-chip size="base" :color="errors && errors.content && 'danger'">
-          <ds-chip v-if="errors && errors.content" color="danger" size="base">
           {{ contentLength }}
-            <ds-icon name="warning"></ds-icon>
+          <base-icon v-if="errors && errors.content" name="warning" />
         </ds-chip>
-          <ds-chip v-else size="base">
+        <categories-select model="categoryIds" :existingCategoryIds="form.categoryIds" />
-            {{ contentLength }}
+        <ds-chip size="base" :color="errors && errors.categoryIds && 'danger'">
-          </ds-chip>
-        </ds-text>
-        <ds-space margin-bottom="small" />
-        <hc-categories-select model="categoryIds" :existingCategoryIds="form.categoryIds" />
-        <ds-text align="right">
-          <ds-chip v-if="errors && errors.categoryIds" color="danger" size="base">
           {{ form.categoryIds.length }} / 3
-            <ds-icon name="warning"></ds-icon>
+          <base-icon v-if="errors && errors.categoryIds" name="warning" />
         </ds-chip>
-          <ds-chip v-else size="base">{{ form.categoryIds.length }} / 3</ds-chip>
-        </ds-text>
-        <ds-flex class="contribution-form-footer">
-          <ds-flex-item :width="{ lg: '50%', md: '50%', sm: '100%' }" />
-          <ds-flex-item>
-            <ds-space margin-bottom="small" />
         <ds-select
           model="language"
-              :options="languageOptions"
           icon="globe"
+          class="select-field"
+          :options="languageOptions"
           :placeholder="$t('contribution.languageSelectText')"
           :label="$t('contribution.languageSelectLabel')"
         />
-          </ds-flex-item>
-        </ds-flex>
-        <ds-text align="right">
         <ds-chip v-if="errors && errors.language" size="base" color="danger">
-            <ds-icon name="warning"></ds-icon>
+          <base-icon name="warning" />
         </ds-chip>
-        </ds-text>
+        <div class="buttons">
-
-        <ds-space />
-        <div style="text-align: right">
           <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
             {{ $t('actions.cancel') }}
           </base-button>
@@ -103,7 +73,6 @@
             {{ $t('actions.save') }}
           </base-button>
         </div>
-        <ds-space margin-bottom="large" />
       </base-card>
     </template>
   </ds-form>
@@ -116,16 +85,14 @@ import { mapGetters } from 'vuex'
 import HcEditor from '~/components/Editor/Editor'
 import locales from '~/locales'
 import PostMutations from '~/graphql/PostMutations.js'
-import HcCategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import TeaserImage from '~/components/TeaserImage/TeaserImage'
-import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
 export default {
   components: {
     HcEditor,
-    HcCategoriesSelect,
+    CategoriesSelect,
     TeaserImage,
-    UserTeaser,
   },
   props: {
     contribution: { type: Object, default: () => {} },
@@ -194,12 +161,12 @@ export default {
     }
   },
   computed: {
-    contentLength() {
-      return this.$filters.removeHtml(this.form.content).length
-    },
     ...mapGetters({
       currentUser: 'auth/user',
     }),
+    contentLength() {
+      return this.$filters.removeHtml(this.form.content).length
+    },
   },
   methods: {
     submit() {
@@ -293,8 +260,38 @@ export default {
 
 <style lang="scss">
 .contribution-form {
-  .card-image {
+  > .base-card {
+    display: flex;
+    flex-direction: column;
+
+    > .card-image {
       position: relative;
+      overflow: hidden;
+      margin-bottom: $space-xx-small;
+
+      &.--blur-image img {
+        filter: blur(22px);
+      }
+    }
+
+    > .ds-form-item {
+      margin: 0;
+    }
+
+    > .ds-chip {
+      align-self: flex-end;
+      margin: $space-xx-small 0 $space-base;
+      cursor: default;
+    }
+
+    > .select-field {
+      align-self: flex-end;
+    }
+
+    > .buttons {
+      align-self: flex-end;
+      margin-top: $space-base;
+    }
   }
 
   .preview-image {
@@ -305,27 +302,11 @@ export default {
 
   .blur-toggle {
     text-align: right;
+    margin-bottom: $space-base;
 
     > .link {
       display: block;
     }
   }
-
-  .ds-chip {
-    cursor: default;
-  }
-
-  .post-title {
-    margin-top: $space-x-small;
-    margin-bottom: $space-xx-small;
-
-    input {
-      border: 0;
-      font-size: $font-size-x-large;
-      font-weight: bold;
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
 }
 </style>

webapp/components/TeaserImage/TeaserImage.vue

@@ -106,7 +106,6 @@ export default {
 .image-uploader {
   position: relative;
   min-height: 200px;
-  overflow: hidden;
   cursor: pointer;
 
   &:only-child {
@@ -117,10 +116,6 @@ export default {
     pointer-events: none;
   }
 
-  &.--blur-image img {
-    filter: blur(22px);
-  }
-
   .preview-image + & {
     position: absolute;
     top: 0;