Merge pull request #1509 from Human-Connection/1199-fix-preview-image-craziness

Fix preview image craziness

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: {
@@ -75,18 +75,21 @@ export default {
       return ''
     },
     thumbnail: (file, dataUrl) => {
-      let thumbnailElement, contributionImage, uploadArea
+      let thumbnailElement, contributionImage, uploadArea, thumbnailPreview, image
       if (file.previewElement) {
         thumbnailElement = document.querySelectorAll('#postdropzone')[0]
         contributionImage = document.querySelectorAll('.contribution-image')[0]
+        thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
         if (contributionImage) {
           uploadArea = document.querySelectorAll('.hc-attachments-upload-area-update-post')[0]
           uploadArea.removeChild(contributionImage)
           uploadArea.classList.remove('hc-attachments-upload-area-update-post')
         }
-        thumbnailElement.classList.add('image-preview')
-        thumbnailElement.alt = file.name
-        thumbnailElement.style.backgroundImage = 'url("' + dataUrl + '")'
+        image = new Image()
+        image.src = URL.createObjectURL(file)
+        image.classList.add('thumbnail-preview')
+        if (thumbnailPreview) return thumbnailElement.replaceChild(image, thumbnailPreview)
+        thumbnailElement.appendChild(image)
       }
     },
   },
@@ -99,25 +102,9 @@ export default {
   background-color: $background-color-softest;
 }
 
-#postdropzone.image-preview {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  height: auto;
-  transition: all 0.2s ease-out;
-
-  width: 100%;
-}
-
-@media only screen and (max-width: 400px) {
-  #postdropzone.image-preview {
-    height: 200px;
-  }
-}
-
-@media only screen and (min-width: 401px) and (max-width: 960px) {
-  #postdropzone.image-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>