ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Contain post/contribution form to limit width

Browse Source 
- 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
This commit is contained in:
mattwr18 2019-10-02 23:32:25 +02:00
parent db48e522cf
commit 3beddf1f69
2 changed files with 75 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<ds-container width="medium">
<ds-form ref="contributionForm" v-model="form" :schema="formSchema"> <ds-form ref="contributionForm" v-model="form" :schema="formSchema">
<template slot-scope="{ errors }"> <template slot-scope="{ errors }">
<hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage"> <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
@ -68,6 +69,7 @@
</ds-card> </ds-card>
</template> </template>
</ds-form> </ds-form>
</ds-container>
</template> </template>
<script> <script>
@ -262,7 +264,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.smallTag { .smallTag {
width: 100%; width: 100%;
position: relative; position: relative;

15
webapp/components/TeaserImage/TeaserImage.vue
View File

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