From daf1ae864c9135bffe96fe899146e4b62f69a2d8 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Fri, 6 Sep 2019 13:08:28 +0200
Subject: [PATCH] Reuse css from ds-card-image, consistent width

- the width of the contribution form is now the same as the post card
---
 .../ContributionForm/ContributionForm.vue     | 14 +++++-----
 webapp/components/TeaserImage/TeaserImage.vue | 27 +++++--------------
 webapp/pages/post/create.vue                  |  2 +-
 3 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 43f9f3d8c..9ff43d236 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -1,14 +1,14 @@
 <template>
   <ds-form ref="contributionForm" v-model="form" :schema="formSchema">
     <template slot-scope="{ errors }">
+      <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
+        <img
+          v-if="contribution"
+          class="contribution-image"
+          :src="contribution.image | proxyApiUrl"
+        />
+      </hc-teaser-image>
       <ds-card>
-        <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
-          <img
-            v-if="contribution"
-            class="contribution-image"
-            :src="contribution.image | proxyApiUrl"
-          />
-        </hc-teaser-image>
         <ds-space />
         <hc-user :user="currentUser" :trunc="35" />
         <ds-space />
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index 6a3adff7d..53f79bfb0 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -3,6 +3,7 @@
     :options="dropzoneOptions"
     ref="el"
     id="postdropzone"
+    class="ds-card-image"
     :use-custom-slot="true"
     @vdropzone-thumbnail="thumbnail"
     @vdropzone-error="verror"
@@ -10,14 +11,14 @@
     <div class="dz-message">
       <div
         :class="{
-          'hc-attachments-upload-area-post': createAndUpdate,
+          'hc-attachments-upload-area-post': true,
           'hc-attachments-upload-area-update-post': contribution,
         }"
       >
         <slot></slot>
         <div
           :class="{
-            'hc-drag-marker-post': createAndUpdate,
+            'hc-drag-marker-post': true,
             'hc-drag-marker-update-post': contribution,
           }"
         >
@@ -46,7 +47,6 @@ export default {
         previewTemplate: this.template(),
       },
       error: false,
-      createAndUpdate: true,
     }
   },
   watch: {
@@ -102,24 +102,9 @@ export default {
   background-color: $background-color-softest;
 }
 
-#postdropzone img {
-  width: 100%;
-  max-height: 300px;
-  -o-object-fit: cover;
-  object-fit: cover;
-  -o-object-position: center;
-  object-position: center;
-}
-
-@media only screen and (max-width: 400px) {
-  #postdropzone.thumbnail-preview {
-    height: 200px;
-  }
-}
-
-@media only screen and (min-width: 401px) and (max-width: 960px) {
-  #postdropzone.thumbnail-preview {
-    height: 300px;
+@media only screen and (max-width: 960px) {
+  #postdropzone {
+    min-height: 200px;
   }
 }
 
diff --git a/webapp/pages/post/create.vue b/webapp/pages/post/create.vue
index c6b76287f..2ee5634cd 100644
--- a/webapp/pages/post/create.vue
+++ b/webapp/pages/post/create.vue
@@ -1,6 +1,6 @@
 <template>
   <ds-flex :width="{ base: '100%' }" gutter="base">
-    <ds-flex-item :width="{ base: '100%', md: 3 }">
+    <ds-flex-item :width="{ base: '100%', md: 5 }">
       <hc-contribution-form />
     </ds-flex-item>
     <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>