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 +13 -16
1 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7664534618 - Show all commits

29
frontend/src/components/tasks/partials/attachments.vue
View File

@ -27,10 +27,10 @@
v-if="attachments.length > 0"
class="files"
>
<div
<button
konrad commented 2024-05-05 14:01:52 +00:00
Outdated
Review
Copy Link

Please do not use a table for multi-column layout.

Please do not use a table for multi-column layout.
Elscrux commented 2024-05-09 10:30:11 +00:00
Outdated
Review
Copy Link

I used a grid instead now

I used a grid instead now
v-for="a in attachments"
:key="a.id"
class="attachment clickable"
class="attachment"
konrad commented 2024-05-16 07:10:19 +00:00
Outdated
Review
Copy Link

grid-item sounds like a child of a grid. Why not call it attachment as it was before?

`grid-item` sounds like a child of a grid. Why not call it `attachment` as it was before?
@click="viewOrDownload(a)"
>
<div class="preview-column">
@ -109,7 +109,7 @@
</p>
</div>
</div>
</div>
</button>
</div>
<x-button
@ -309,11 +309,18 @@ async function setCoverImage(attachment: IAttachment | null) {
}
konrad commented 2024-05-25 11:43:21 +00:00
Review
Copy Link

Please make this width: 100%.

Please make this `width: 100%`.
Elscrux commented 2024-05-25 11:45:36 +00:00
Review
Copy Link

done!

done!
.attachment {
display: grid;
grid-template-columns: 9rem 1fr;
align-items: center;
margin-bottom: .5rem;
display: block;
transition: background-color $transition;
border-radius: $radius;
padding: .5rem;
transition: background-color $transition;
background-color: transparent;
border: transparent;
border-radius: $radius;
&:hover {
background-color: var(--grey-200);
@ -453,16 +460,6 @@ async function setCoverImage(attachment: IAttachment | null) {
max-height: 4rem;
}
.clickable {
cursor: pointer;
}
.attachment {
display: grid;
grid-template-columns: 9rem 1fr;
align-items: center;
}
.is-task-cover {
background: var(--primary);
color: var(--white);