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 > - - - - {{ getTypeIcon(printable.type) }} - {{ printable.type }} -
@@ -110,6 +103,16 @@

{{ printable.title }}

+ + + + {{ getTypeIcon(printable.type) }} + {{ deCamel(printable.type) }} +
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 => {