benny/wishlist-app
1
0
Fork 0
mirror of https://github.com/ThisIsBenny/wishlist-app.git synced 2025-04-19 23:37:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

small ui/ux improvments

Browse source
This commit is contained in:
Benny Samir Hierl 2022-02-07 19:19:12 +01:00
parent 1c18ddfcc3
commit 56f8ccc13c
5 changed files with 59 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/App.vue
View file

@ -1,33 +1,31 @@
<template>
<div class="app max-w-[900px] mx-auto p-10">
<main>
<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"
>
<IconError class="w-4 h-4" />
<span>{{ t('errors.generic.text') }}</span>
</div>
<suspense v-else>
<template #default>
<component :is="Component"></component>
</template>
<template #fallback>
<div
class="flex flex-row space-x-2 items-center content-center justify-center m-20"
>
<IconSpinner class="w-4 h-4" />
<span> {{ t('common.loading.text') }} </span>
</div>
</template>
</suspense>
</template>
</router-view>
</main>
<modal-overlay />
</div>
<main class="app h-screen max-w-[900px] mx-auto p-10">
<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"
>
<IconError class="w-4 h-4" />
<span>{{ t('errors.generic.text') }}</span>
</div>
<suspense v-else>
<template #default>
<component :is="Component"></component>
</template>
<template #fallback>
<div
class="flex flex-row space-x-2 items-center content-center justify-center m-20"
>
<IconSpinner class="w-4 h-4" />
<span> {{ t('common.loading.text') }} </span>
</div>
</template>
</suspense>
</template>
</router-view>
</main>
<modal-overlay />
</template>
<script setup lang="ts">
import { onErrorCaptured, ref } from 'vue'

8
src/components/icons/IconNoGift.vue Normal file
View file

@ -0,0 +1,8 @@
<template>
<svg viewBox="0 0 24 24">
<path
d="M21 6h-3.17A3 3 0 0 0 18 5c0-1.66-1.34-3-3-3c-1 0-1.88.5-2.43 1.24v-.01L12 4l-.57-.77v.01A3.034 3.034 0 0 0 9 2c-1.03 0-1.94.5-2.5 1.32l1.53 1.51C8.12 4.36 8.5 4 9 4c.55 0 1 .45 1 1c0 .5-.36.88-.83.97L13 9.8V8h8v2h-7.8l2 2H20v4.8l2 2V12c.55 0 1-.45 1-1V8a2 2 0 0 0-2-2m-6 0c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1M1.11 3l3 3H3c-1.1 0-2 .9-2 2v3c0 .55.45 1 1 1v8a2 2 0 0 0 2 2h16.1l1.46 1.45l1.27-1.27L2.39 1.73L1.11 3M13 14.89L18.11 20H13v-5.11m-2-2V20H4v-8h6.11l.89.89M8.11 10H3V8h3.11l2 2z"
fill="currentColor"
></path>
</svg>
</template>

5
src/config/locales/de-DE.json
View file

@ -17,6 +17,11 @@
},
"pages": {
"detail-view": {
"main": {
"empty-list": {
"text": "Diese Wunschliste ist leer."
}
},
"confirmation-modal": {
"title": {
"text": "Möchten Sie den Gegenstand von der Liste nehmen?"

5
src/config/locales/en-US.json
View file

@ -17,6 +17,11 @@
},
"pages": {
"detail-view": {
"main": {
"empty-list": {
"text": "This wishlist is empty."
}
},
"confirmation-modal": {
"title": {
"text": "Do you want to remove the item from the list?"

16
src/views/DetailView.vue
View file

@ -6,6 +6,7 @@ import { useRoute } from 'vue-router'
import { useWishlistStore, useModal } from '@/composables'
import Tile from '@/components/Tile.vue'
import WishlistItem from '@/components/WishlistItem.vue'
import IconNoGift from '../components/icons/IconNoGift.vue'
const route = useRoute()
const modal = useModal()
@ -36,7 +37,7 @@ const bought = async (item: WishlistItemType): Promise<void> => {
</script>
<template>
<div v-if="list !== null">
<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"
>
@ -50,7 +51,10 @@ const bought = async (item: WishlistItemType): Promise<void> => {
</p>
</div>
</div>
<div class="flex flex-col space-y-14 md:space-y-8 my-10">
<div
v-if="notBoughtItems && notBoughtItems.length > 0"
class="flex flex-col space-y-14 md:space-y-8 my-10"
>
<WishlistItem
v-for="(item, index) in notBoughtItems"
:key="index"
@ -61,5 +65,13 @@ const bought = async (item: WishlistItemType): Promise<void> => {
@bought="bought(item)"
/>
</div>
<div v-else class="h-1/2 w-full flex 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"
>
<IconNoGift class="h-10 w-10" />
<span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
</div>
</div>
</div>
</template>