vikunja/vikunja
6
43
Fork 73
Code Issues 150 Pull Requests 21 Packages Releases 32 Activity

Frontend: Proof of concept for image preview #2266

Merged
konrad merged 20 commits from Elscrux/vikunja:feature/image-preview into main 2024-05-25 12:11:05 +00:00
Conversation 10 Commits 20 Files Changed 4 +1 -1
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2d3bf4c210 - Show all commits

2
frontend/src/components/tasks/partials/file-preview.vue
View File

@ -2,7 +2,6 @@
<img
konrad commented 2024-05-05 14:03:55 +00:00
Outdated
Review
Copy Link

Can you make this always the same size? Use object-fit: cover; to let the image fill the container nicely.

Can you make this always the same size? Use [`object-fit: cover;`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) to let the image fill the container nicely.
Elscrux commented 2024-05-09 10:30:04 +00:00
Outdated
Review
Copy Link

I included it, but it didn't seem like it made a difference

I included it, but it didn't seem like it made a difference
konrad commented 2024-05-15 21:37:01 +00:00
Outdated
Review
Copy Link

Did you set a fixed with and height for the image?

Did you set a fixed with and height for the image?
Elscrux commented 2024-05-15 21:56:04 +00:00
Outdated
Review
Copy Link

Yes, it's at 4rem now

Yes, it's at 4rem now
:src="blobUrl"
alt="Attachment preview"
style="object-fit: cover;"
>
konrad commented 2024-05-16 07:06:52 +00:00
Outdated
Review
Copy Link

Please do not use inline styles.

This image should have a rectangular fixed size, then the object-fit property will make sure it looks good.

Please do not use inline styles. This image should have a rectangular fixed size, then the `object-fit` property will make sure it looks good.
</template>
@ -31,5 +30,6 @@ watchEffect(async () => {
<style scoped lang="scss">
img {
border-radius: $radius;
konrad marked this conversation as resolved Outdated
konrad commented 2024-05-05 14:02:42 +00:00
Outdated
Review
Copy Link

Please use $radius here so that the radius is consistent with other elements.

Please use `$radius` here so that the radius is consistent with other elements.
Elscrux commented 2024-05-09 10:29:53 +00:00
Outdated
Review
Copy Link

Done!

Done!
object-fit: cover;
konrad commented 2024-05-22 20:48:35 +00:00
Outdated
Review
Copy Link

Adding a width: 100% here will make it look like what I meant (will share a screenshot later)

Adding a `width: 100%` here will make it look like what I meant (will share a screenshot later)
}
</style>