Skip to content

Commit 0f685ec

Browse files
LuffyyyLuffyyy
committed
Improve file details
1 parent 03d2ef4 commit 0f685ec

4 files changed

Lines changed: 94 additions & 51 deletions

File tree

‎frontend/app/components/site/pages/mod/mod-download-buttons.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@click="!static && registerDownload('file', download);"
99
>
1010
<i-mdi-download/>
11-
<span v-if="!small">
11+
<span v-if="!small" class="wrap-anywhere">
1212
{{ $t('download') }}
1313
<span style="text-transform:uppercase;">{{ (download as any).type }}</span> ({{ friendlySize((download as any).size) }})
1414
</span>

‎frontend/app/components/site/pages/mod/mod-download-details.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<m-flex class="p-3" column gap="4">
3+
<m-flex gap="3" wrap>
4+
<m-flex v-if="file.version_type" gap="1" column class="flex-1">
5+
<span class="text-secondary">{{ $t('version_type') }}</span>
6+
<span class="info">{{ $t(`version_${file.version_type}`) }}</span>
7+
</m-flex>
8+
9+
<m-flex v-if="file.version" gap="1" column class="flex-1">
10+
<span class="text-secondary">{{ $t('version') }}</span>
11+
<span class="info">{{ file.version }}</span>
12+
</m-flex>
13+
</m-flex>
14+
15+
<m-flex gap="3" wrap>
16+
<m-flex v-if="file.size" gap="1" column class="flex-1">
17+
<span class="text-secondary">{{ $t('file_size') }}</span>
18+
<span class="info">{{ friendlySize(file.size) }}</span>
19+
</m-flex>
20+
21+
<m-flex column class="flex-1">
22+
<span class="text-secondary" gap="1">{{ $t('downloads') }}</span>
23+
<span class="info">{{ friendlyNumber($i18n.locale, file.downloads) }}</span>
24+
</m-flex>
25+
</m-flex>
26+
27+
<m-flex gap="3" wrap>
28+
<m-flex gap="1" column class="flex-1">
29+
<span class="text-secondary">{{ $t('name') }}</span>
30+
<m-flex class="items-center whitespace-pre-line info">
31+
<span v-if="file.name" class="items-center" style="word-break: break-word;">{{ file.name }}</span>
32+
<span v-else class="items-center">{{ $t(`file_type_${type}`) }}</span>
33+
</m-flex>
34+
</m-flex>
35+
<m-flex gap="1" column class="flex-1">
36+
<span class="text-secondary">{{ $t(type + '_id') }}</span>
37+
<span class="info">{{ file.id }}</span>
38+
</m-flex>
39+
</m-flex>
40+
<m-flex gap="3" wrap>
41+
<m-flex v-if="file.updated_at" gap="1" column class="flex-1">
42+
<span class="text-secondary">{{ $t('last_updated') }}</span>
43+
<m-time class="info" :datetime="file.updated_at" relative/>
44+
</m-flex>
45+
<m-flex v-if="file.created_at" gap="1" column class="flex-1">
46+
<span class="text-secondary">{{ $t('published_at') }}</span>
47+
<m-time v-if="!file.user" :datetime="file.created_at" relative class="info"/>
48+
<i18n-t v-else keypath="by_user_time_ago" scope="global" tag="span" class="info">
49+
<template #user>
50+
<a-user avatar-size="xs" :user="file.user" :tag="false" :avatar="false"/>
51+
</template>
52+
<template #time>
53+
<m-time :datetime="file.created_at" relative/>
54+
</template>
55+
</i18n-t>
56+
</m-flex>
57+
</m-flex>
58+
<m-flex v-if="file.desc" column>
59+
<span class="text-secondary">{{ $t('description') }}</span>
60+
<md-content :text="file.desc" :padding="1" style="max-height: 250px; overflow-y: auto;"/>
61+
</m-flex>
62+
</m-flex>
63+
</template>
64+
65+
<script setup lang="ts">
66+
import type { File, Link } from '~/types/models';
67+
68+
const { file } = defineProps<{
69+
file: File & Link;
70+
type: 'file' | 'link';
71+
}>();
72+
</script>
73+
74+
<style scoped>
75+
.info {
76+
white-space: pre-line;
77+
word-break: break-words;
78+
overflow-wrap: anywhere;
79+
width: 60%;
80+
}
81+
</style>

‎frontend/app/components/site/pages/mod/mod-download.vue‎

Lines changed: 11 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<mod-file-version-type v-else-if="file.version_type" :file="file"/>
77
</td>
88
<td>
9-
<div class="text-ellipsis overflow-hidden" style="max-width: 120px;" :title="file.version">
9+
<div class="whitespace-pre-line wrap-anywhere" style="max-width: 200px;" :title="file.version">
1010
{{ file.version || 'N/A' }}
1111
</div>
1212
</td>
@@ -38,28 +38,7 @@
3838
</tr>
3939
<tr :class="{hidden: !showDetails, 'download-tr': showDetails}">
4040
<td colspan="10">
41-
<m-flex class="p-3" column gap="2">
42-
<span>
43-
{{ $t(type + '_id') }}: {{ file.id }}
44-
</span>
45-
<span v-if="file.version_type">
46-
{{ $t('version_type') }}: {{ $t(`version_${file.version_type}`) }}
47-
</span>
48-
<template v-if="file.desc">
49-
{{ $t('description') }}:
50-
<md-content :text="file.desc" :padding="1" style="max-height: 250px; overflow-y: auto;"/>
51-
</template>
52-
<m-flex class="items-center" wrap>
53-
<i18n-t keypath="updated_by_user_time_ago" scope="global">
54-
<template #time>
55-
<m-time :datetime="file.updated_at" relative/>
56-
</template>
57-
<template #user>
58-
<a-user :user="file.user" :avatar="false"/>
59-
</template>
60-
</i18n-t>
61-
</m-flex>
62-
</m-flex>
41+
<mod-download-details :file="file" :type="type"/>
6342
</td>
6443
</tr>
6544
</template>
@@ -69,10 +48,14 @@
6948
<mod-file-version-type v-else-if="file.version_type" class="mb-auto" :file="file"/>
7049

7150
<m-flex grow column style="flex: 1;" gap="2">
72-
<m-flex class="items-center whitespace-pre-line">
73-
<strong v-if="file.name" class="items-center" style="word-break: break-word;">{{ file.name }}</strong>
74-
<strong v-else class="items-center">{{ $t(`file_type_${type}`) }}</strong>
75-
<m-tag v-if="file.label" class="mb-auto">{{ file.label }}</m-tag>
51+
<m-flex class="items-center whitespace-pre-line wrap-anywhere">
52+
<template v-if="file.type">
53+
{{ file.name + '.' + file.type }}
54+
</template>
55+
<template v-else>
56+
{{ file.name }}
57+
</template>
58+
<m-tag v-if="file.label" class="whitespace-pre">{{ file.label }}</m-tag>
7659
</m-flex>
7760
<m-flex v-if="file.version" :title="$t('version')">
7861
<i-mdi-tag/> <span class="wrap-anywhere">{{ file.version }}</span>
@@ -88,28 +71,7 @@
8871
<mod-download-buttons :mod="mod" :download="file" :type="type" small/>
8972
</m-flex>
9073
</m-flex>
91-
<m-flex :class="{ hidden: !showDetails, 'p-3': true }" column gap="2">
92-
<span>
93-
{{ $t(type + '_id') }}: {{ file.id }}
94-
</span>
95-
<span v-if="file.version_type">
96-
{{ $t('version_type') }}: {{ $t(`version_${file.version_type}`) }}
97-
</span>
98-
<template v-if="file.desc">
99-
{{ $t('description') }}:
100-
<md-content :text="file.desc" :padding="1" style="max-height: 250px; overflow-y: auto;"/>
101-
</template>
102-
<m-flex class="items-center" wrap>
103-
<i18n-t keypath="updated_by_user_time_ago" scope="global">
104-
<template #time>
105-
<m-time :datetime="file.updated_at" relative/>
106-
</template>
107-
<template #user>
108-
<a-user :user="file.user" :avatar="false"/>
109-
</template>
110-
</i18n-t>
111-
</m-flex>
112-
</m-flex>
74+
<mod-download-details :class="{ hidden: !showDetails }" :file="file" :type="type"/>
11375
</m-flex>
11476
</template>
11577

‎frontend/app/components/site/pages/mod/mod-edit-download.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</td>
1717
<td>
1818
<m-flex class="items-center" gap="3">
19-
<div class="text-ellipsis overflow-hidden" style="max-width: 120px;" :title="download.version">
19+
<div class="whitespace-pre-line wrap-anywhere" style="max-width: 200px;" :title="download.version">
2020
{{ download.version || 'N/A' }}
2121
</div>
2222
</m-flex>

0 commit comments

Comments
 (0)