improve gallery modal, close #75

pages/addon/addon-form.vue

@@ -302,7 +302,7 @@ import axios from "axios";
 
 import UserSelect from "../components/user-select.vue";
 import ImagePreviewer from "./image-previewer.vue";
-import FullscreenPreview from "./fullscreen-preview.vue";
+import FullscreenPreview from "../components/fullscreen-preview.vue";
 import DropZone from "../components/drop-zone.vue";
 
 export default {

pages/addon/image-previewer.vue

@@ -15,14 +15,14 @@
 						:width="(150 * 16) / 9"
 						:aspect-ratio="16 / 9"
 						alt="preview"
-						@click="onFullscreen(item, index)"
+						@click="onFullscreen(index)"
 					/>
 					<v-card
 						class="ma-2"
 						rounded
 						style="display: inline-block; position: absolute; right: 0; top: 0"
 					>
-						<v-icon small class="ma-1" @click.stop="(e) => onFullscreen(item, index, e)">
+						<v-icon small class="ma-1" @click.stop="(e) => onFullscreen(index, e)">
 							mdi-fullscreen
 						</v-icon>
 						<v-icon
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import FullscreenPreview from "./fullscreen-preview.vue";
+import FullscreenPreview from "../components/fullscreen-preview.vue";
 
 export default {
 	name: "image-previewer",
@@ -90,7 +90,7 @@ export default {
 				this.$emit("item-delete", item, index, undefined);
 			}
 		},
-		onFullscreen(item, index, e) {
+		onFullscreen(index, e) {
 			if (e) e.target.blur();
 			this.fullscreenIndex = index;
 			this.$refs.preview.open();

pages/components/fullscreen-preview.vue

@@ -0,0 +1,58 @@
+<template>
+	<v-dialog v-model="modalOpened" :width="`${this.aspectRatio * 90}vh`" height="90vh">
+		<v-card>
+			<v-img
+				ref="image-ref"
+				:style="styles"
+				:src="src"
+				alt="fullscreen preview"
+				:aspect-ratio="aspectRatio"
+				contain
+				@click="close"
+			/>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+export default {
+	name: "fullscreen-preview",
+	props: {
+		aspectRatio: {
+			required: false,
+			type: Number,
+			default: 16 / 9,
+		},
+		src: {
+			required: true,
+			type: String,
+		},
+		texture: {
+			required: false,
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			modalOpened: false,
+		};
+	},
+	methods: {
+		close() {
+			this.modalOpened = false;
+		},
+		open() {
+			this.modalOpened = true;
+		},
+	},
+	computed: {
+		styles() {
+			if (!this.texture) return {};
+			return {
+				"image-rendering": "pixelated",
+			};
+		},
+	},
+};
+</script>

pages/dashboard/contribution-stats-card.vue

@@ -1,9 +1,9 @@
 <template>
 	<dashboard-card
+		clickable
 		id="contribution-stats-card"
 		:title="$root.lang('dashboard.titles.contribution_stats')"
 		href="/contributions-stats"
-		:clickable="true"
 		class="d-flex flex-column"
 	>
 		<v-card-text class="pb-4 flex-grow-1 d-flex align-stretch">

pages/dashboard/profile-card.vue

@@ -2,7 +2,7 @@
 	<dashboard-card
 		:title="$root.lang('dashboard.titles.profile')"
 		href="/profile"
-		:clickable="true"
+		clickable
 		class="d-flex flex-column"
 	>
 		<v-card-text v-if="user" class="pt-1 pb-3 d-flex flex-column justify-space-between flex-grow-1">

pages/gallery/gallery-image.vue

@@ -3,12 +3,14 @@
 		:class="modal ? 'gallery-dialog-texture' : undefined"
 		:style="exists ? {} : { background: 'rgba(0,0,0,0.3)' }"
 	>
+		<!-- send click events back to caller -->
 		<img
 			v-if="exists"
 			class="gallery-texture-image"
 			:src="imageURL"
 			style="aspect-ratio: 1"
 			@error="textureNotFound"
+			@click="$emit('click')"
 			lazy-src="https://database.faithfulpack.net/images/bot/loading.gif"
 		/>
 		<div v-else class="not-done">

pages/gallery/gallery-modal.vue

@@ -7,6 +7,8 @@
 		@click.stop="() => closeModal()"
 	>
 		<v-card>
+			<fullscreen-preview ref="preview" :src="clickedImage" :aspect-ratio="1 / 1" texture />
+
 			<v-toolbar>
 				<v-btn icon @click.stop="() => closeModal()">
 					<v-icon>mdi-close</v-icon>
@@ -34,17 +36,15 @@
 					class="gallery-dialog-textures d-sm-flex flex-row flex-sm-column overflow-auto mb-2 mb-sm-0 mx-n1 mx-sm-0"
 				>
 					<template v-for="(group, i) in grouped">
-						<div
-							class="gallery-dialog-intern d-flex flex-row pb-2 pb-sm-0"
-							:key="`dialog-intern-${i}`"
-						>
+						<div class="d-flex flex-row pb-2 pb-sm-0" :key="`dialog-intern-${i}`">
 							<template v-for="(url, j) in group">
-								<div class="gallery-dialog-texture-container px-1 pb-sm-2" :key="`${i}-${j}`">
+								<div class="gallery-dialog-texture-container px-2 pb-sm-2" :key="`${i}-${j}`">
 									<gallery-image
 										modal
 										:src="url.image"
 										:textureID="textureID"
 										:ignoreList="ignoreList"
+										@click="openFullscreenPreview(url.image)"
 									>
 										<p>{{ $root.lang().gallery.error_message.texture_not_done }}</p>
 									</gallery-image>
@@ -119,11 +119,28 @@
 import moment from "moment";
 
 import GalleryImage from "./gallery-image.vue";
+import FullscreenPreview from "../components/fullscreen-preview.vue";
+
+const PACK_GRID_ORDER = [
+	["default", "faithful_32x", "faithful_64x"],
+	["default", "classic_faithful_32x", "classic_faithful_64x"],
+	["progart", "classic_faithful_32x_progart"],
+];
+
+const PACK_SLIDER_ORDER = [
+	"default",
+	"faithful_32x",
+	"faithful_64x",
+	"classic_faithful_32x",
+	"classic_faithful_32x_progart",
+	"classic_faithful_64x",
+];
 
 export default {
 	name: "gallery-modal",
 	components: {
 		GalleryImage,
+		FullscreenPreview,
 	},
 	props: {
 		value: {
@@ -175,6 +192,7 @@ export default {
 				},
 			],
 			opened: false,
+			clickedImage: "",
 		};
 	},
 	watch: {
@@ -229,6 +247,10 @@ export default {
 					}));
 			}
 		},
+		openFullscreenPreview(url) {
+			this.clickedImage = url;
+			this.$refs.preview.open();
+		},
 		getHeaders(item) {
 			if (this.packs.includes(item))
 				return [
@@ -313,15 +335,20 @@ export default {
 			return this.authorCategories.map((v) => v.packs).flat();
 		},
 		grouped() {
-			const result = [];
-			if (this.textureObj) {
-				Object.entries(this.textureObj.urls).forEach((urlArr, i) => {
-					if (i % 2 === 0) result.push([]);
-					result[result.length - 1].push({ name: urlArr[0], image: urlArr[1] });
-				});
-			}
+			if (!this.textureObj) return [];
+
+			// don't display duplicates on mobile
+			if (this.$vuetify.breakpoint.xsOnly)
+				return [
+					PACK_SLIDER_ORDER.map((pack) => ({ name: pack, image: this.textureObj.urls[pack] })),
+				];
 
-			return result;
+			return PACK_GRID_ORDER.map((packSet) =>
+				packSet.map((pack) => {
+					const url = this.textureObj.urls[pack];
+					return { name: pack, image: url };
+				}),
+			);
 		},
 	},
 };

pages/review/expansion-panel.vue

@@ -201,7 +201,7 @@
 <script>
 import axios from "axios";
 
-import FullscreenPreview from "../addon/fullscreen-preview.vue";
+import FullscreenPreview from "../components/fullscreen-preview.vue";
 import ImagePreviewer from "../addon/image-previewer.vue";
 
 export default {

pages/review/review-preview.vue

@@ -187,7 +187,7 @@
 <script>
 import axios from "axios";
 
-import FullscreenPreview from "../addon/fullscreen-preview.vue";
+import FullscreenPreview from "../components/fullscreen-preview.vue";
 import ImagePreviewer from "../addon/image-previewer.vue";
 
 export default {

resources/css/webapp.css

@@ -732,16 +732,20 @@ code {
 	text-align: center;
 }
 
+:root {
+	--modal-image-size: 160px;
+}
+
 .gallery-dialog-texture {
-	height: 196px;
-	width: 196px;
+	height: var(--modal-image-size);
+	width: var(--modal-image-size);
 	position: relative;
 	background-size: cover;
 	background-position: center;
 }
 
 .gallery-dialog-texture-container h2 {
-	max-width: 196px;
+	max-width: var(--modal-image-size);
 	height: 48px;
 	font-size: 1em;
 }
@@ -752,8 +756,8 @@ code {
 
 .gallery-dialog-texture > * {
 	position: absolute;
-	height: 196px;
-	width: 196px;
+	height: var(--modal-image-size);
+	width: var(--modal-image-size);
 }
 
 #info-tabs .v-slide-group__prev {