diff --git a/webapp/src/views/Store.vue b/webapp/src/views/Store.vue
index 9a55565..eb26488 100644
--- a/webapp/src/views/Store.vue
+++ b/webapp/src/views/Store.vue
@@ -29,7 +29,10 @@
-
Printables
+
Printables
+
+ Signs, stickers, zines, and more!
+
@@ -81,6 +84,7 @@
:src="getImageUrl(printable.preview)"
:alt="`${printable.title} preview`"
aspect-ratio="1.414"
+ class="mt-4 mx-2"
contain
>
@@ -91,17 +95,6 @@
/>
-
-
-
- {{ getTypeIcon(printable.type) }}
- {{ printable.type }}
-
@@ -110,6 +103,16 @@
mdi-account
@@ -133,10 +136,6 @@
-
- Download options:
-
-
- Front Side
+ Front Side
+ Download
=> {
}
};
+const deCamel = (str: string): string => {
+ return str.replace(/([a-z])([A-Z])/g, '$1 $2');
+};
+
const getImageUrl = (imageId: string): string => {
if (!imageId) return '';
return `https://cms.deflock.me/assets/${imageId}`;
@@ -277,21 +281,23 @@ const getImageUrl = (imageId: string): string => {
const getTypeColor = (type: string): string => {
const colors: Record = {
poster: 'primary',
+ zine: 'success',
yardSign: 'secondary',
sticker: 'accent',
bumperSticker: 'info'
};
- return colors[type.toLowerCase()] || 'grey';
+ return colors[type] || 'grey';
};
const getTypeIcon = (type: string): string => {
const icons: Record = {
poster: 'mdi-post',
+ zine: 'mdi-book-open-page-variant',
yardSign: 'mdi-sign-real-estate',
sticker: 'mdi-sticker-circle-outline',
bumperSticker: 'mdi-rectangle-outline',
};
- return icons[type.toLowerCase()] || 'mdi-file';
+ return icons[type] || 'mdi-file';
};
const formatDate = (dateString: string): string => {