ami/tl-vikunja
1
0
Fork 0
Code

Replace table with grid

Browse Source
This commit is contained in:
Elscrux 2024-05-09 11:51:54 +02:00
parent e47d6d1605
commit 2ab6894542
1 changed files with 88 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,21 +27,20 @@
v-if="attachments.length > 0" v-if="attachments.length > 0"
class="files" class="files"
> >
<table class="table table-striped"> <div
<tr
v-for="a in attachments" v-for="a in attachments"
:key="a.id" :key="a.id"
class="clickable" class="grid-item clickable"
@click="viewOrDownload(a)" @click="viewOrDownload(a)"
> >
<td class="preview-column"> <div class="preview-column">
<FilePreview <FilePreview
v-if="canPreview(a)" v-if="canPreview(a)"
class="attachment-preview" class="attachment-preview"
:model-value="a" :model-value="a"
/> />
</td> </div>
<td> <div>
<div class="filename"> <div class="filename">
{{ a.file.name }} {{ a.file.name }}
<span <span
@ -109,9 +108,8 @@
</BaseButton> </BaseButton>
</p> </p>
</div> </div>
</td> </div>
</tr> </div>
</table>
</div> </div>
<x-button <x-button
@ -448,7 +446,7 @@ async function setCoverImage(attachment: IAttachment | null) {
} }
.preview-column { .preview-column {
max-width: 75px; max-width: 125px;
} }
.attachment-preview { .attachment-preview {
@ -459,6 +457,12 @@ async function setCoverImage(attachment: IAttachment | null) {
cursor: pointer; cursor: pointer;
} }
.grid-item {
display: grid;
grid-template-columns: 140px 1fr;
align-items: center;
}
.is-task-cover { .is-task-cover {
background: var(--primary); background: var(--primary);
color: var(--white); color: var(--white);