Optimized some modals
This commit is contained in:
parent
beb9e38b92
commit
ae036225b1
3 changed files with 75 additions and 56 deletions
|
@ -7,7 +7,8 @@
|
|||
<h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<template v-slot:body="{ shown }">
|
||||
<div v-if="shown">
|
||||
<div>It took you {{ timePlayed }} to beat the game.</div>
|
||||
<br>
|
||||
<div>Please check the Discord to discuss the game or to check for new content updates!</div>
|
||||
|
@ -19,6 +20,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div slot="footer" class="game-over-footer">
|
||||
<button @click="keepGoing" class="button">Keep Going</button>
|
||||
<button @click="playAgain" class="button danger">Play Again</button>
|
||||
|
|
|
@ -7,7 +7,8 @@
|
|||
<h4>v{{ versionNumber}}: {{ versionTitle }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<template v-slot:body="{ shown }">
|
||||
<div v-if="shown">
|
||||
<div v-if="author">
|
||||
By {{ author }}
|
||||
</div>
|
||||
|
@ -51,6 +52,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,23 +1,23 @@
|
|||
<template>
|
||||
<portal to="modal-root">
|
||||
<transition name="modal">
|
||||
<transition name="modal" @before-enter="setAnimating(true)" @after-leave="setAnimating(false)">
|
||||
<div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')">
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<slot name="header">
|
||||
<slot name="header" :shown="isVisible">
|
||||
default header
|
||||
</slot>
|
||||
</div>
|
||||
<simplebar class="modal-body">
|
||||
<branches>
|
||||
<slot name="body">
|
||||
<slot name="body" :shown="isVisible">
|
||||
default body
|
||||
</slot>
|
||||
</branches>
|
||||
</simplebar>
|
||||
<div class="modal-footer">
|
||||
<slot name="footer">
|
||||
<slot name="footer" :shown="isVisible">
|
||||
<div class="modal-default-footer">
|
||||
<div class="modal-default-flex-grow"></div>
|
||||
<button class="button modal-default-button" @click="$emit('close')">
|
||||
|
@ -36,8 +36,23 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'Modal',
|
||||
data() {
|
||||
return {
|
||||
isAnimating: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
show: Boolean
|
||||
},
|
||||
computed: {
|
||||
isVisible() {
|
||||
return this.show || this.isAnimating;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setAnimating(isAnimating) {
|
||||
this.isAnimating = isAnimating;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue