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

Enforce a 16/9 aspect ratio

Browse Source 
- if we set the max height any greater than this, it takes up the entire
page on a desktop screen
This commit is contained in:
mattwr18 2019-10-02 22:35:03 +02:00
parent fa06696892
commit db48e522cf
3 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
backend/src/schema/resolvers/fileUpload/index.js
View File

@ -11,14 +11,16 @@ const storeUpload = ({ createReadStream, fileLocation }) =>
) )
export default async function fileUpload(params, { file, url }, uploadCallback = storeUpload) { export default async function fileUpload(params, { file, url }, uploadCallback = storeUpload) {
console.log('params', params)
const upload = params[file] const upload = params[file]
console.log('upload', upload)
if (upload) { if (upload) {
const { createReadStream, filename } = await upload const { createReadStream, filename } = await upload
const { name } = path.parse(filename) const { name } = path.parse(filename)
const fileLocation = `/uploads/${Date.now()}-${slug(name)}` const fileLocation = `/uploads/${Date.now()}-${slug(name)}`
await uploadCallback({ createReadStream, fileLocation }) await uploadCallback({ createReadStream, fileLocation })
delete params[file] delete params[file]
console.log('fileLocation', fileLocation)
params[url] = fileLocation params[url] = fileLocation
} }

2
webapp/components/PostCard/index.vue
View File

@ -131,7 +131,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.ds-card-image img { .ds-card-image img {
width: 100%; width: 100%;
max-height: 300px; max-height: 300px;

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

@ -94,7 +94,12 @@ 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,
@ -116,7 +121,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, {}) let cropper = new Cropper(image, { aspectRatio: 16 / 9 })
}, },
dropzoneDrop() { dropzoneDrop() {
let cropOverlay = document.querySelectorAll('.crop-overlay')[0] let cropOverlay = document.querySelectorAll('.crop-overlay')[0]
@ -167,8 +172,7 @@ export default {
color: hsl(0, 0%, 25%); color: hsl(0, 0%, 25%);
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
font-size: 60px; font-size: 60px;
margin: 80px 5px; margin: 180px 5px;
background-color: $background-color-softest; background-color: $background-color-softest;
opacity: 0.65; opacity: 0.65;
@ -209,13 +213,14 @@ export default {
} }
.contribution-image { .contribution-image {
max-height: 300px; max-height: 471px;
} }
.crop-overlay { .crop-overlay {
max-height: 471px;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; // height: 100%;
z-index: 9999; z-index: 9999;
background-color: #000; background-color: #000;
} }
@ -226,4 +231,7 @@ export default {
top: 10px; top: 10px;
z-index: 9999; z-index: 9999;
} }
.thumbnail-preview {
max-height: 471px;
}
</style> </style>