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

Fix preview image craziness

Browse Source 
- depending on the size of the image, the preview looked really blurry
Also, the preview image differed from the image on the PostCard
This commit is contained in:
mattwr18 2019-09-06 12:17:09 +02:00
parent 37f281b441
commit d3ad06a5f0
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,18 +75,21 @@ export default {
return '' return ''
}, },
thumbnail: (file, dataUrl) => { thumbnail: (file, dataUrl) => {
let thumbnailElement, contributionImage, uploadArea let thumbnailElement, contributionImage, uploadArea, thumbnailPreview, image
if (file.previewElement) { if (file.previewElement) {
thumbnailElement = document.querySelectorAll('#postdropzone')[0] thumbnailElement = document.querySelectorAll('#postdropzone')[0]
contributionImage = document.querySelectorAll('.contribution-image')[0] contributionImage = document.querySelectorAll('.contribution-image')[0]
thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
if (contributionImage) { if (contributionImage) {
uploadArea = document.querySelectorAll('.hc-attachments-upload-area-update-post')[0] uploadArea = document.querySelectorAll('.hc-attachments-upload-area-update-post')[0]
uploadArea.removeChild(contributionImage) uploadArea.removeChild(contributionImage)
uploadArea.classList.remove('hc-attachments-upload-area-update-post') uploadArea.classList.remove('hc-attachments-upload-area-update-post')
} }
thumbnailElement.classList.add('image-preview') image = new Image()
thumbnailElement.alt = file.name image.src = URL.createObjectURL(file)
thumbnailElement.style.backgroundImage = 'url("' + dataUrl + '")' image.classList.add('thumbnail-preview')
if (thumbnailPreview) return thumbnailElement.replaceChild(image, thumbnailPreview)
thumbnailElement.appendChild(image)
} }
}, },
}, },
@ -99,24 +102,23 @@ export default {
background-color: $background-color-softest; background-color: $background-color-softest;
} }
#postdropzone.image-preview { #postdropzone img {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: auto;
transition: all 0.2s ease-out;
width: 100%; width: 100%;
max-height: 300px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
} }
@media only screen and (max-width: 400px) { @media only screen and (max-width: 400px) {
#postdropzone.image-preview { #postdropzone.thumbnail-preview {
height: 200px; height: 200px;
} }
} }
@media only screen and (min-width: 401px) and (max-width: 960px) { @media only screen and (min-width: 401px) and (max-width: 960px) {
#postdropzone.image-preview { #postdropzone.thumbnail-preview {
height: 300px; height: 300px;
} }
} }