global loading spinner, refactored card component, styling improvements, starts flip card
koehr
4 years ago
parent
08025ba9c6
commit
35743b54e7
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<Card :icon="deck.icon" :color="deck.color" :size="deck.cardSize">
|
||||
<template #back>{{ deck.name }} ({{ deck.cards.length }})</template>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import Card from '@/components/Card.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: { Card },
|
||||
props: {
|
||||
deck: Object
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div :id="card && card.id" class="flip-card card" :style="cssVars">
|
||||
<section name="card-front" class="card-front" v-if="showFrontSide">
|
||||
<span>Front Side</span>
|
||||
</section>
|
||||
<section name="card-back" class="card-back" v-if="showBackSide">
|
||||
<div class="icon-wrapper">
|
||||
<img :src="iconPath" alt="card icon" />
|
||||
</div>
|
||||
<footer><slot name="back"></slot></footer>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,16 +1,97 @@
|
||||
<template>
|
||||
<h1>Welcome {{ name }}</h1>
|
||||
<p>This is a placeholder view.</p>
|
||||
<template v-if="errorState">
|
||||
<header>Cannot find this deck</header>
|
||||
<router-link to="/">« lets go back home</router-link>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="deck-bg">
|
||||
<img :src="deckIcon" />
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<span>{{ deck.name }}</span>
|
||||
<button class="edit-button">edit</button>
|
||||
<button class="print-button">print</button>
|
||||
|
||||
<p>{{ deck.description }}</p>
|
||||
</header>
|
||||
|
||||
<section name="deck-cards" class="cards" :class="{ centered: deck.cards.length === 0 }">
|
||||
<CardBack v-for="card in deck.cards"
|
||||
:key="card.id"
|
||||
:id="card.id"
|
||||
:card="card"
|
||||
:icon="deck.icon"
|
||||
:color="deck.color"
|
||||
:size="deck.cardSize"
|
||||
/>
|
||||
<CardBack id="_add" @click="addCard" />
|
||||
</section>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue"
|
||||
import { defineComponent, watchEffect, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { IDeck } from '@/types'
|
||||
import state from '@/state'
|
||||
import iconPath from '@/lib/iconPath'
|
||||
import CardBack from '@/components/CardBack.vue'
|
||||
|
||||
const name = 'Deck'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return { name }
|
||||
components: { CardBack },
|
||||
setup () {
|
||||
const route = useRoute()
|
||||
|
||||
const errorState = ref(false)
|
||||
const deck = ref<IDeck | null>(null)
|
||||
const deckIcon = ref('')
|
||||
|
||||
watchEffect(() => {
|
||||
const deckId = route.params.id as string
|
||||
const existingDecks = Object.keys(state.decks.value)
|
||||
const exists = existingDecks.indexOf(deckId) >= 0
|
||||
errorState.value = !exists
|
||||
|
||||
if (exists) {
|
||||
deck.value = state.decks.value[deckId]
|
||||
deckIcon.value = iconPath(deck.value.icon)
|
||||
}
|
||||
})
|
||||
|
||||
const addCard = () => {}
|
||||
|
||||
state.loading.value = false
|
||||
return { errorState, deck, deckIcon, addCard }
|
||||
},
|
||||
beforeRouteEnter (_to, _from, next) {
|
||||
state.loading.value = true
|
||||
next()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-button, .print-button {
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.edit-button {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.deck-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.deck-bg > img {
|
||||
filter: saturate(0%) blur(5px) opacity(8%);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue