gallery modal improvements (see description)

- versions are shortened like in /texture and /compare in the regular display
- the full list is still displayed on hover
- nameless uses now say they're nameless

pages/gallery/gallery-modal.vue

@@ -78,7 +78,17 @@
 											class="elevation-1"
 											style="margin-top: 10px"
 											hide-default-footer
-										/>
+										>
+											<template #item.versions="{ value }">
+												<!-- title property gives alt text -->
+												<span :title="value.join(', ')">{{ formatPathVersions(value) }}</span>
+											</template>
+											<!-- technically applies to both texture/use names but it doesn't matter -->
+											<template #item.name="{ value }">
+												<template v-if="value">{{ value }}</template>
+												<i v-else>{{ $root.lang().database.labels.nameless }}</i>
+											</template>
+										</v-data-table>
 									</div>
 								</template>
 							</template>
@@ -115,6 +125,7 @@
 
 <script>
 import moment from "moment";
+import MinecraftSorter from "@helpers/MinecraftSorter";
 
 import GalleryImage from "./gallery-image.vue";
 import FullscreenPreview from "../components/fullscreen-preview.vue";
@@ -243,10 +254,15 @@ export default {
 				case "paths":
 					return this.textureObj[item].map((path) => ({
 						...path,
-						versions: path.versions.join(", "),
+						// sort() mutates the original array so we need to clone it
+						versions: Array.from(path.versions).sort(MinecraftSorter),
 					}));
 			}
 		},
+		formatPathVersions(versions) {
+			if (versions.length === 1) return versions[0];
+			return `${versions[0]} – ${versions[versions.length - 1]}`;
+		},
 		openFullscreenPreview(url) {
 			this.clickedImage = url;
 			this.previewOpen = true;

resources/css/webapp.css

@@ -315,10 +315,6 @@ img.texture-img {
 	border-bottom-right-radius: 6px;
 }
 
-td.text-start {
-	max-width: 6rem;
-}
-
 .v-chip {
 	border-radius: 4px !important;
 }