Contain post/contribution form to limit width

- enforce 1.25:1 aspect ratio to be as close to possible with the 1:1
aspect ratio on our root path where we have 3 columns of 300px and a
max-height of 300px

webapp/components/ContributionForm/ContributionForm.vue

@@ -1,73 +1,75 @@
 <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>
-        <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"
+  <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"
           />
-          <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')"
+        </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"
             />
-          </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>
+            <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>
 </template>
 
 <script>
@@ -262,7 +264,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .smallTag {
   width: 100%;
   position: relative;

webapp/components/TeaserImage/TeaserImage.vue

@@ -94,12 +94,7 @@ export default {
       confirm.textContent = this.$t('contribution.teaserImage.cropperConfirm')
       confirm.addEventListener('click', () => {
         // Get the canvas with image data from Cropper.js
-        let canvas = cropper.getCroppedCanvas({
-          minWidth: 256,
-          minHeight: 256,
-          maxWidth: 550,
-          maxHeight: 550,
-        })
+        let canvas = cropper.getCroppedCanvas()
         canvas.toBlob(blob => {
           this.$refs.el.manuallyAddFile(blob, canvas.toDataURL(), null, null, {
             dontSubstractMaxFiles: false,
@@ -121,7 +116,7 @@ export default {
       image.src = URL.createObjectURL(file)
       editor.appendChild(image)
       // Create Cropper.js and pass image
-      let cropper = new Cropper(image, { aspectRatio: 16 / 9 })
+      let cropper = new Cropper(image, { aspectRatio: 1.25 / 1 })
     },
     dropzoneDrop() {
       let cropOverlay = document.querySelectorAll('.crop-overlay')[0]
@@ -213,11 +208,11 @@ export default {
 }
 
 .contribution-image {
-  max-height: 471px;
+  max-height: 620px;
 }
 
 .crop-overlay {
-  max-height: 471px;
+  max-height: 620px;
   position: relative;
   width: 100%;
   // height: 100%;
@@ -232,6 +227,6 @@ export default {
   z-index: 9999;
 }
 .thumbnail-preview {
-  max-height: 471px;
+  max-height: 620px;
 }
 </style>