From db48e522cfebb9691c08053f00ccf64ce91c416d Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 2 Oct 2019 22:35:03 +0200
Subject: [PATCH] Enforce a 16/9 aspect ratio

- if we set the max height any greater than this, it takes up the entire
page on a desktop screen
---
 .../src/schema/resolvers/fileUpload/index.js  |  4 +++-
 webapp/components/PostCard/index.vue          |  2 +-
 webapp/components/TeaserImage/TeaserImage.vue | 20 +++++++++++++------
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/backend/src/schema/resolvers/fileUpload/index.js b/backend/src/schema/resolvers/fileUpload/index.js
index fa78238c3..81548cab3 100644
--- a/backend/src/schema/resolvers/fileUpload/index.js
+++ b/backend/src/schema/resolvers/fileUpload/index.js
@@ -11,14 +11,16 @@ const storeUpload = ({ createReadStream, fileLocation }) =>
   )
 
 export default async function fileUpload(params, { file, url }, uploadCallback = storeUpload) {
+  console.log('params', params)
   const upload = params[file]
+  console.log('upload', upload)
   if (upload) {
     const { createReadStream, filename } = await upload
     const { name } = path.parse(filename)
     const fileLocation = `/uploads/${Date.now()}-${slug(name)}`
     await uploadCallback({ createReadStream, fileLocation })
     delete params[file]
-
+    console.log('fileLocation', fileLocation)
     params[url] = fileLocation
   }
 
diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index c6c967759..3ba575c0d 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -131,7 +131,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ds-card-image img {
   width: 100%;
   max-height: 300px;
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index e60a466e4..3b9d65c1a 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -94,7 +94,12 @@ 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()
+        let canvas = cropper.getCroppedCanvas({
+          minWidth: 256,
+          minHeight: 256,
+          maxWidth: 550,
+          maxHeight: 550,
+        })
         canvas.toBlob(blob => {
           this.$refs.el.manuallyAddFile(blob, canvas.toDataURL(), null, null, {
             dontSubstractMaxFiles: false,
@@ -116,7 +121,7 @@ export default {
       image.src = URL.createObjectURL(file)
       editor.appendChild(image)
       // Create Cropper.js and pass image
-      let cropper = new Cropper(image, {})
+      let cropper = new Cropper(image, { aspectRatio: 16 / 9 })
     },
     dropzoneDrop() {
       let cropOverlay = document.querySelectorAll('.crop-overlay')[0]
@@ -167,8 +172,7 @@ export default {
   color: hsl(0, 0%, 25%);
   transition: all 0.2s ease-out;
   font-size: 60px;
-  margin: 80px 5px;
-
+  margin: 180px 5px;
   background-color: $background-color-softest;
   opacity: 0.65;
 
@@ -209,13 +213,14 @@ export default {
 }
 
 .contribution-image {
-  max-height: 300px;
+  max-height: 471px;
 }
 
 .crop-overlay {
+  max-height: 471px;
   position: relative;
   width: 100%;
-  height: 100%;
+  // height: 100%;
   z-index: 9999;
   background-color: #000;
 }
@@ -226,4 +231,7 @@ export default {
   top: 10px;
   z-index: 9999;
 }
+.thumbnail-preview {
+  max-height: 471px;
+}
 </style>