settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

refactor: move /info to ModalDialog

Browse Source
This commit is contained in:
Settel 2022-09-30 20:37:00 +02:00
parent 500b291069
commit 941be1a7d7
2 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/pages/info.vue → client/src/components/InfoModal.vue
View File

@ -1,16 +1,15 @@
<template> <template>
<div class="info__container"> <ModalDialog @close="$emit('close')">
<div class="info__box">
<h1 class="info__title">Know Your Teammates</h1> <h1 class="info__title">Know Your Teammates</h1>
<h2 class="info__subtitle">{{ $t('credits') }}</h2> <h2 class="info__subtitle">{{ $t('credits') }}</h2>
<table class="info__table"> <table class="info__table">
<tr> <tr>
<td class="info__table-key">Settel</td> <td class="info__table-key">Settel</td>
<td>idea, code, add. design</td> <td>{{ $t('idea') }}</td>
</tr> </tr>
<tr> <tr>
<td class="info__table-key">Denis</td> <td class="info__table-key">Denis</td>
<td>design</td> <td>{{ $t('design') }}</td>
</tr> </tr>
</table> </table>
<h2 class="info__subtitle">{{ $t('technologies') }}</h2> <h2 class="info__subtitle">{{ $t('technologies') }}</h2>
@ -28,20 +27,27 @@
<td>Podman/Docker, GNU Make, VS Code, Figma</td> <td>Podman/Docker, GNU Make, VS Code, Figma</td>
</tr> </tr>
</table> </table>
<Button class="info__button" :border="true" @click="navigateTo('/')">{{ $t('back') }}</Button> <template v-slot:footer>
</div> <Button :border="true" @click="$emit('close')">{{ $t('back') }}</Button>
</div> </template>
</ModalDialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { navigateTo } from '#app'
import useI18n from '@/composables/useI18n' import useI18n from '@/composables/useI18n'
import ModalDialog from '../components/ModalDialog.vue';
const $emit = defineEmits(['close'])
const { $t } = useI18n({ const { $t } = useI18n({
back: { en: 'back', de: 'zurück' }, back: { en: 'back', de: 'zurück' },
idea: { en: 'concept, code, add. design', de: 'Konzept, Code, zusätzl. Design' },
design: { en: 'design', de: 'Design' },
credits: { en: 'Credits', de: 'Mitwirkende' }, credits: { en: 'Credits', de: 'Mitwirkende' },
technologies: { en: 'Technologies used', de: 'verwendete Technologien' }, technologies: { en: 'Technologies used', de: 'verwendete Technologien' },
}) })
const close = () => { window.location.href = '/' }
</script> </script>
<style lang="scss"> <style lang="scss">
@ -84,9 +90,5 @@ const { $t } = useI18n({
width: 6em; width: 6em;
} }
} }
&__button {
margin: 64px 0 0 auto;
}
} }
</style> </style>

6
client/src/pages/index.vue
View File

@ -12,9 +12,10 @@
</div> </div>
<div class="page-index__space" /> <div class="page-index__space" />
</div> </div>
<div class="page-index__copyright-notice" @click="navigateTo('/info')"> <div class="page-index__copyright-notice" @click="openInfoModal">
v{{ config.version }}, © 2021-2022, Settel v{{ config.version }}, © 2021-2022, Settel
</div> </div>
<InfoModal v-if="showInfoModal" @close="closeInfoModal" />
<CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" /> <CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" />
</div> </div>
</template> </template>
@ -34,8 +35,11 @@ const config = useRuntimeConfig()
await useAuth().authenticateAndLoadUserInfo(['']) await useAuth().authenticateAndLoadUserInfo([''])
const showCreateTeamDialog = ref(false) const showCreateTeamDialog = ref(false)
const showInfoModal = ref(false)
const createTeam = () => { showCreateTeamDialog.value = true } const createTeam = () => { showCreateTeamDialog.value = true }
const closeCreateTeamDialog = () => { showCreateTeamDialog.value = false } const closeCreateTeamDialog = () => { showCreateTeamDialog.value = false }
const openInfoModal = () => { showInfoModal.value = true }
const closeInfoModal = () => { showInfoModal.value = false }
</script> </script>
<style lang="scss"> <style lang="scss">