Reuse css from ds-card-image, consistent width

- the width of the contribution form is now the same as the post card

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 />

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;
   }
 }
 

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>