From 1c6b5f941b3213e1b73af59eb17e7c8dc058d295 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 14 Oct 2019 13:45:41 +0200
Subject: [PATCH] Remove aspect ratio on cropper, limit to max-height 2000px

- discussed it today's internal meeting and agreed upon with
@alina-beck, @Tirokk, @ogerly, @datenbrei, Dennis Hack

- max-height was a suggestion and can be changed at any time
---
 .../ContributionForm/ContributionForm.vue     | 136 +++++++++---------
 webapp/components/PostCard/index.vue          |   2 +-
 webapp/components/TeaserImage/TeaserImage.vue |   2 +-
 webapp/pages/post/_id/_slug/index.vue         |   2 +-
 webapp/pages/post/_id/_slug/more-info.vue     |   4 -
 5 files changed, 70 insertions(+), 76 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 3c67b8ae1..2b21282ae 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -1,75 +1,73 @@
 <template>
-  <ds-container width="medium">
-    <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"
+  <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>
+        <ds-space />
+        <hc-user :user="currentUser" :trunc="35" />
+        <ds-space />
+        <ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
+        <small class="smallTag">{{ form.title.length }}/{{ formSchema.title.max }}</small>
+        <client-only>
+          <hc-editor
+            :users="users"
+            :value="form.content"
+            :hashtags="hashtags"
+            @input="updateEditorContent"
           />
-        </hc-teaser-image>
-        <ds-card>
-          <ds-space />
-          <hc-user :user="currentUser" :trunc="35" />
-          <ds-space />
-          <ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
-          <small class="smallTag">{{ form.title.length }}/{{ formSchema.title.max }}</small>
-          <client-only>
-            <hc-editor
-              :users="users"
-              :value="form.content"
-              :hashtags="hashtags"
-              @input="updateEditorContent"
+          <small class="smallTag">{{ form.contentLength }}</small>
+        </client-only>
+        <ds-space margin-bottom="small" />
+        <hc-categories-select
+          model="categoryIds"
+          @updateCategories="updateCategories"
+          :existingCategoryIds="form.categoryIds"
+        />
+        <ds-flex class="contribution-form-footer">
+          <ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
+          <ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
+            <ds-space margin-bottom="small" />
+            <ds-select
+              model="language"
+              :options="form.languageOptions"
+              icon="globe"
+              :placeholder="locale"
+              :label="$t('contribution.languageSelectLabel')"
             />
-            <small class="smallTag">{{ form.contentLength }}</small>
-          </client-only>
-          <ds-space margin-bottom="small" />
-          <hc-categories-select
-            model="categoryIds"
-            @updateCategories="updateCategories"
-            :existingCategoryIds="form.categoryIds"
-          />
-          <ds-flex class="contribution-form-footer">
-            <ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
-            <ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
-              <ds-space margin-bottom="small" />
-              <ds-select
-                model="language"
-                :options="form.languageOptions"
-                icon="globe"
-                :placeholder="locale"
-                :label="$t('contribution.languageSelectLabel')"
-              />
-            </ds-flex-item>
-          </ds-flex>
-          <ds-space />
-          <div slot="footer" style="text-align: right">
-            <ds-button
-              class="cancel-button"
-              :disabled="loading"
-              ghost
-              @click.prevent="$router.back()"
-            >
-              {{ $t('actions.cancel') }}
-            </ds-button>
-            <ds-button
-              class="submit-button-for-test"
-              type="submit"
-              icon="check"
-              :loading="loading"
-              :disabled="failsValidations || errors"
-              primary
-              @click.prevent="submit"
-            >
-              {{ $t('actions.save') }}
-            </ds-button>
-          </div>
-          <ds-space margin-bottom="large" />
-        </ds-card>
-      </template>
-    </ds-form>
-  </ds-container>
+          </ds-flex-item>
+        </ds-flex>
+        <ds-space />
+        <div slot="footer" style="text-align: right">
+          <ds-button
+            class="cancel-button"
+            :disabled="loading"
+            ghost
+            @click.prevent="$router.back()"
+          >
+            {{ $t('actions.cancel') }}
+          </ds-button>
+          <ds-button
+            class="submit-button-for-test"
+            type="submit"
+            icon="check"
+            :loading="loading"
+            :disabled="failsValidations || errors"
+            primary
+            @click.prevent="submit"
+          >
+            {{ $t('actions.save') }}
+          </ds-button>
+        </div>
+        <ds-space margin-bottom="large" />
+      </ds-card>
+    </template>
+  </ds-form>
 </template>
 
 <script>
diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index 3ba575c0d..66e42df26 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -134,7 +134,7 @@ export default {
 <style lang="scss" scoped>
 .ds-card-image img {
   width: 100%;
-  max-height: 300px;
+  max-height: 2000px;
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center;
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index 5a8d6cff6..e30efd37f 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -110,7 +110,7 @@ export default {
       image.src = URL.createObjectURL(file)
       editor.appendChild(image)
       // Create Cropper.js and pass image
-      let cropper = new Cropper(image, { aspectRatio: 1.25 / 1 })
+      let cropper = new Cropper(image, {})
     },
     dropzoneDrop() {
       let cropOverlay = document.querySelectorAll('.crop-overlay')[0]
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 0bb8ef1d5..5f6c95dd2 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -200,7 +200,7 @@ export default {
 
     .ds-card-image {
       img {
-        max-height: 710px;
+        max-height: 2000px;
         object-fit: cover;
         object-position: center;
       }
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index 7ee6803d2..a27f85527 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -87,9 +87,5 @@ export default {
 <style lang="scss">
 .related-post {
   box-shadow: $box-shadow-base;
-
-  .ds-card-image {
-    max-height: 80px;
-  }
 }
 </style>