Optimized some modals
This commit is contained in:
parent
beb9e38b92
commit
ae036225b1
3 changed files with 75 additions and 56 deletions
|
|
@ -7,18 +7,20 @@
|
|||
<h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<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>
|
||||
<br>
|
||||
<div>
|
||||
<a :href="discordLink">
|
||||
<img src="images/discord.png" class="game-over-modal-discord" />
|
||||
{{ discordName }}
|
||||
</a>
|
||||
<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>
|
||||
<br>
|
||||
<div>
|
||||
<a :href="discordLink">
|
||||
<img src="images/discord.png" class="game-over-modal-discord" />
|
||||
{{ discordName }}
|
||||
</a>
|
||||
</div>
|
||||
</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,50 +7,52 @@
|
|||
<h4>v{{ versionNumber}}: {{ versionTitle }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="body">
|
||||
<div v-if="author">
|
||||
By {{ author }}
|
||||
</div>
|
||||
<div>
|
||||
Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and Aarex
|
||||
</div>
|
||||
<br/>
|
||||
<div class="link" @click="$emit('openDialog', 'Changelog')">Changelog</div>
|
||||
<br>
|
||||
<div>
|
||||
<a :href="discordLink" v-if="discordLink !== 'https://discord.gg/WzejVAx'" class="info-modal-discord-link">
|
||||
<img src="images/discord.png" class="info-modal-discord" />
|
||||
{{ discordName }}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://discord.gg/WzejVAx" class="info-modal-discord-link">
|
||||
<img src="images/discord.png" class="info-modal-discord" />
|
||||
The Paper Pilot Community
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://discord.gg/F3xveHV" class="info-modal-discord-link">
|
||||
<img src="images/discord.png" class="info-modal-discord" />
|
||||
The Modding Tree
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://discord.gg/wwQfgPa" class="info-modal-discord-link">
|
||||
<img src="images/discord.png" class="info-modal-discord" />
|
||||
Jacorb's Games
|
||||
</a>
|
||||
</div>
|
||||
<br>
|
||||
<div>Time Played: {{ timePlayed }}</div>
|
||||
<div v-if="hotkeys.length > 0">
|
||||
<template v-slot:body="{ shown }">
|
||||
<div v-if="shown">
|
||||
<div v-if="author">
|
||||
By {{ author }}
|
||||
</div>
|
||||
<div>
|
||||
Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and Aarex
|
||||
</div>
|
||||
<br/>
|
||||
<div class="link" @click="$emit('openDialog', 'Changelog')">Changelog</div>
|
||||
<br>
|
||||
<h4>Hotkeys</h4>
|
||||
<div v-for="key in hotkeys" :key="key.key">
|
||||
{{ key.key }}: {{ key.description }}
|
||||
<div>
|
||||
<a :href="discordLink" v-if="discordLink !== 'https://discord.gg/WzejVAx'" class="info-modal-discord-link">
|
||||
<img src="images/discord.png" class="info-modal-discord" />
|
||||
{{ discordName }}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://discord.gg/WzejVAx" class="info-modal-discord-link">
|
||||
<img src="images/discord.png" class="info-modal-discord" />
|
||||
The Paper Pilot Community
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://discord.gg/F3xveHV" class="info-modal-discord-link">
|
||||
<img src="images/discord.png" class="info-modal-discord" />
|
||||
The Modding Tree
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://discord.gg/wwQfgPa" class="info-modal-discord-link">
|
||||
<img src="images/discord.png" class="info-modal-discord" />
|
||||
Jacorb's Games
|
||||
</a>
|
||||
</div>
|
||||
<br>
|
||||
<div>Time Played: {{ timePlayed }}</div>
|
||||
<div v-if="hotkeys.length > 0">
|
||||
<br>
|
||||
<h4>Hotkeys</h4>
|
||||
<div v-for="key in hotkeys" :key="key.key">
|
||||
{{ key.key }}: {{ key.description }}
|
||||
</div>
|
||||
</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