mirror of
https://github.com/ThisIsBenny/wishlist-app.git
synced 2025-04-19 23:37:41 +00:00
use prettier tailwind plugin
This commit is contained in:
parent
bb3d4c1826
commit
dbc6061aed
11 changed files with 54 additions and 33 deletions
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -41,6 +41,7 @@
|
|||
"pino-pretty": "^7.5.1",
|
||||
"postcss": "^8.4.5",
|
||||
"prettier": "^2.5.1",
|
||||
"prettier-plugin-tailwindcss": "^0.1.6",
|
||||
"prisma": "^3.8.1",
|
||||
"tailwindcss": "^3.0.15",
|
||||
"ts-node": "^10.4.0",
|
||||
|
|
@ -5410,6 +5411,18 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.1.6",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.6.tgz",
|
||||
"integrity": "sha512-7OcFAv6d41KV61cDdn+mZycddAXQhv/B2yfA7ooK/yXPnBJf51Lx7iODOOQwOoMzSJQ/MJNqlK3BxqT9gDKVLA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12.17.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prettier": ">=2.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prisma": {
|
||||
"version": "3.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prisma/-/prisma-3.8.1.tgz",
|
||||
|
|
@ -11352,6 +11365,13 @@
|
|||
"fast-diff": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"prettier-plugin-tailwindcss": {
|
||||
"version": "0.1.6",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.6.tgz",
|
||||
"integrity": "sha512-7OcFAv6d41KV61cDdn+mZycddAXQhv/B2yfA7ooK/yXPnBJf51Lx7iODOOQwOoMzSJQ/MJNqlK3BxqT9gDKVLA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"prisma": {
|
||||
"version": "3.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prisma/-/prisma-3.8.1.tgz",
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
"pino-pretty": "^7.5.1",
|
||||
"postcss": "^8.4.5",
|
||||
"prettier": "^2.5.1",
|
||||
"prettier-plugin-tailwindcss": "^0.1.6",
|
||||
"prisma": "^3.8.1",
|
||||
"tailwindcss": "^3.0.15",
|
||||
"ts-node": "^10.4.0",
|
||||
|
|
|
|||
10
src/App.vue
10
src/App.vue
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="h-full p-4">
|
||||
<Header />
|
||||
<main class="h-full max-w-[900px] mx-auto">
|
||||
<main class="mx-auto h-full max-w-[900px]">
|
||||
<router-view v-slot="{ Component }">
|
||||
<template v-if="Component">
|
||||
<div
|
||||
v-if="error"
|
||||
class="flex flex-row space-x-2 items-center content-center justify-center m-20 text-red-500"
|
||||
class="m-20 flex flex-row content-center items-center justify-center space-x-2 text-red-500"
|
||||
>
|
||||
<IconError class="w-4 h-4" />
|
||||
<IconError class="h-4 w-4" />
|
||||
<span>{{ t('errors.generic.text') }}</span>
|
||||
</div>
|
||||
<suspense v-else>
|
||||
|
|
@ -17,9 +17,9 @@
|
|||
</template>
|
||||
<template #fallback>
|
||||
<div
|
||||
class="flex flex-row space-x-2 items-center content-center justify-center m-20"
|
||||
class="m-20 flex flex-row content-center items-center justify-center space-x-2"
|
||||
>
|
||||
<IconSpinner class="w-4 h-4" />
|
||||
<IconSpinner class="h-4 w-4" />
|
||||
<span> {{ t('common.loading.text') }} </span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ defineProps<{
|
|||
</script>
|
||||
<template>
|
||||
<button
|
||||
class="border-2 border-stone-200 dark:border-stone-700 text-stone-500 dark:text-white/70 hover:bg-stone-100 dark:hover:bg-stone-700 rounded-md py-1 px-2 flex-row items-center w-fit inline-flex justify-center"
|
||||
class="inline-flex w-fit flex-row items-center justify-center rounded-md border-2 border-stone-200 py-1 px-2 text-stone-500 hover:bg-stone-100 dark:border-stone-700 dark:text-white/70 dark:hover:bg-stone-700"
|
||||
>
|
||||
<component v-if="icon" :is="icon" class="w-4 h-4 mr-1" />
|
||||
<component v-if="icon" :is="icon" class="mr-1 h-4 w-4" />
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<header
|
||||
class="flex flex-row justify-end items-center opacity-60 mb-2 space-x-2"
|
||||
class="mb-2 flex flex-row items-center justify-end space-x-2 opacity-60"
|
||||
>
|
||||
<div @click="toggleMode">
|
||||
<IconLightDark class="h-6 w-6 cursor-pointer" />
|
||||
|
|
|
|||
|
|
@ -9,25 +9,25 @@ const modal = useModal()
|
|||
<div
|
||||
v-if="modal.isShown"
|
||||
data-test="modal"
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
class="fixed inset-0 z-10 overflow-y-auto"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
||||
class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-gray-500/75 transition-opacity"></div>
|
||||
|
||||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
<span class="hidden sm:inline-block sm:h-screen sm:align-middle"
|
||||
>​</span
|
||||
>
|
||||
<div
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||
class="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle"
|
||||
>
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3
|
||||
class="text-lg leading-6 font-medium text-gray-900"
|
||||
class="text-lg font-medium leading-6 text-gray-900"
|
||||
data-test="modal-title"
|
||||
>
|
||||
{{ modal.title }}
|
||||
|
|
@ -40,7 +40,7 @@ const modal = useModal()
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-3 sm:px-6 flex flex-row">
|
||||
<div class="flex flex-row bg-gray-50 px-4 py-3 sm:px-6">
|
||||
<BaseButton
|
||||
class="w-full"
|
||||
@click="modal.confirm"
|
||||
|
|
@ -48,7 +48,7 @@ const modal = useModal()
|
|||
>{{ modal.confirmText }}</BaseButton
|
||||
>
|
||||
<BaseButton
|
||||
class="w-full ml-2"
|
||||
class="ml-2 w-full"
|
||||
@click="modal.cancel"
|
||||
data-test="modal-cancel-button"
|
||||
>{{ modal.cancelText }}</BaseButton
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ defineProps<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-40 h-40 rounded-full overflow-hidden">
|
||||
<img :src="imageSrc" class="object-cover w-full h-full" :alt="title" />
|
||||
<div class="relative h-40 w-40 overflow-hidden rounded-full">
|
||||
<img :src="imageSrc" class="h-full w-full object-cover" :alt="title" />
|
||||
<div
|
||||
v-if="title"
|
||||
class="text-background absolute top-0 inset-x-0 h-40 flex justify-center items-center text-md text-white dark:text-white/75 text-center font-bold"
|
||||
class="text-background text-md absolute inset-x-0 top-0 flex h-40 items-center justify-center text-center font-bold text-white dark:text-white/75"
|
||||
>
|
||||
{{ title }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,31 +15,31 @@ const { t } = useI18n()
|
|||
|
||||
<template>
|
||||
<div
|
||||
class="h-fit sm:h-40 flex flex-col sm:flex-row space-x-0 sm:space-x-2 rounded-md border-stone-200 dark:border-stone-700 border-2 overflow-hidden"
|
||||
class="flex h-fit flex-col space-x-0 overflow-hidden rounded-md border-2 border-stone-200 dark:border-stone-700 sm:h-40 sm:flex-row sm:space-x-2"
|
||||
>
|
||||
<img
|
||||
v-if="image"
|
||||
:src="image"
|
||||
:alt="title"
|
||||
class="object-cover sm:aspect-[3/2] max-h-44 flex-shrink-0 flex-grow-0"
|
||||
class="max-h-44 flex-shrink-0 flex-grow-0 object-cover sm:aspect-[3/2]"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="sm:aspect-[3/2] max-h-44 flex-shrink-0 flex-grow-0 bg-stone-100 flex justify-center items-center"
|
||||
class="flex max-h-44 flex-shrink-0 flex-grow-0 items-center justify-center bg-stone-100 sm:aspect-[3/2]"
|
||||
>
|
||||
<IconImagePlaceholder class="h-36 w-36 opacity-20" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col p-2 justify-between">
|
||||
<div class="flex flex-col justify-between p-2">
|
||||
<div>
|
||||
<h1 class="text-lg mb-1 font-bold">{{ title }}</h1>
|
||||
<h1 class="mb-1 text-lg font-bold">{{ title }}</h1>
|
||||
<p class="text-sm sm:line-clamp-3">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row items-baseline space-x-2">
|
||||
<BaseButton
|
||||
class="mt-4 sm:mt-2 text-xs"
|
||||
class="mt-4 text-xs sm:mt-2"
|
||||
:icon="IconCart"
|
||||
@click="$emit('bought')"
|
||||
>{{ t('components.wishlist-item.bought-button.text') }}</BaseButton
|
||||
|
|
@ -49,9 +49,9 @@ const { t } = useI18n()
|
|||
:href="url"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="text-sm mt-1 text-stone-500 dark:text-white/60 flex flex-row items-center w-fit"
|
||||
class="mt-1 flex w-fit flex-row items-center text-sm text-stone-500 dark:text-white/60"
|
||||
>
|
||||
<IconLink class="mr-1 w-4 h-4" />
|
||||
<IconLink class="mr-1 h-4 w-4" />
|
||||
<span>{{
|
||||
t('components.wishlist-item.external-product-page-link.text')
|
||||
}}</span>
|
||||
|
|
|
|||
|
|
@ -39,11 +39,11 @@ const bought = async (item: WishlistItemType): Promise<void> => {
|
|||
<template>
|
||||
<div v-if="list !== null" class="h-full">
|
||||
<div
|
||||
class="flex flex-col md:flex-row space-x-0 md:space-x-6 space-y-2 md:space-y-0 items-center"
|
||||
class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
|
||||
>
|
||||
<Tile :image-src="list.imageSrc" class="shrink-0"></Tile>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-center md:text-left mb-2">
|
||||
<h1 class="mb-2 text-center text-2xl font-bold md:text-left">
|
||||
{{ list.title }}
|
||||
</h1>
|
||||
<p v-if="list.description" class="text-lg">
|
||||
|
|
@ -53,7 +53,7 @@ const bought = async (item: WishlistItemType): Promise<void> => {
|
|||
</div>
|
||||
<div
|
||||
v-if="notBoughtItems && notBoughtItems.length > 0"
|
||||
class="flex flex-col space-y-14 md:space-y-8 py-10"
|
||||
class="flex flex-col space-y-14 py-10 md:space-y-8"
|
||||
>
|
||||
<WishlistItem
|
||||
v-for="(item, index) in notBoughtItems"
|
||||
|
|
@ -65,9 +65,9 @@ const bought = async (item: WishlistItemType): Promise<void> => {
|
|||
@bought="bought(item)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="h-1/2 w-full flex justify-center">
|
||||
<div v-else class="flex h-1/2 w-full justify-center">
|
||||
<div
|
||||
class="flex flex-wrap flex-col sm:flex-row items-center sm:space-x-2 justify-center text-center sm:text-left text-xl text-gray-600/75 dark:text-white/70"
|
||||
class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
|
||||
>
|
||||
<IconNoGift class="h-10 w-10" />
|
||||
<span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ await fetch()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<h1 class="text-3xl text-semibold text-center">
|
||||
<h1 class="text-semibold text-center text-3xl">
|
||||
{{ t('common.app-title.text') }}
|
||||
</h1>
|
||||
<div v-if="lists" class="flex flex-row flex-wrap justify-around p-10">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
class="mt-20 flex flex-wrap flex-col sm:flex-row items-center sm:space-x-2 justify-center text-center sm:text-left text-xl"
|
||||
class="mt-20 flex flex-col flex-wrap items-center justify-center text-center text-xl sm:flex-row sm:space-x-2 sm:text-left"
|
||||
>
|
||||
<IconCloudQuestion class="h-12 w-12" />
|
||||
<h1>{{ t('errors.not-found.text') }}</h1>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue