refactor: move /info to ModalDialog

client/src/components/InfoModal.vue

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

client/src/pages/index.vue

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