flaschengeist-frontend/src/pages/about/About.vue

<template>
  <q-page
    padding
    class="fit row justify-center content-center items-center"
    v-if="$route.name == 'about' || $route.name == 'about_out'"
  >
    <div class="fit row justify-center content-center items-center">
      <q-img
        :src="$q.dark.isActive ? 'flaschengeist-logo.svg' : 'flaschengeist-logo.svg'"
        class="col-12 q-ma-md"
        style="min-width: 200px; max-width: 400px"
      />
      <div class="col-12 text-h4 text-center q-pa-sm">
        Flaschengeist
        <div class="text-caption">Version 2.0.0</div>
      </div>
      <div class="col-12 text-center q-ma-sm" style="max-width: 600px">
        Flaschengeist ist ein dynamischen Managementsystem für Studentenclubs. Es ermöglicht unter
        anderem die Mitgliederverwaltung, Dienstverwaltung, Arbeitsgruppenverwaltung und vieles
        meher. Es kann fast alles ermöglich werden, wenn ein Plugin dafür geschrieben wird. Jeder
        Club hat die Möglichkeit sein eigenes Flaschengeist zu hosten. Ziel ist später
        Clubübergreifend dezentralisiert miteinander zu arbeiten.
      </div>

      <q-separator />
      <div class="col-12 text-h6 q-pa-sm" v-if="$route.name == 'about'">Geladene Plugins:</div>
      <div class="col-12 q-pa-sm" v-if="$route.name == 'about'">
        <q-chip
          v-for="(plugin, index) in $flaschengeistPlugins.plugins"
          :key="'plugin' + index"
          square
          :color="$q.dark.isActive ? 'accent' : ''"
          class="q-my-none q-ml-xs q-mr-none q-pr-none"
        >
          {{ plugin.name }}
          <q-chip dense square color="green" class="q-pa-sm, q-mr-none">
            {{ plugin.version }}
          </q-chip>
        </q-chip>
      </div>
      <q-separator />
      <div class="col-12 text-h6 q-pa-sm">Entwickler:</div>

      <div class="fit row inline wrap justify-around items-start content-start">
        <developer
          v-for="(developer, index) in developers"
          :key="'dev' + index"
          class="col-xs-12 col-md-5 col-lg-3 q-ma-sm"
          :firstname="developer.firstname"
          :lastname="developer.lastname"
          :job="developer.job"
          :club="developer.club"
          :description="developer.description"
          :pic="developer.pic"
        />
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import Developer from 'components/about/Developer.vue';

const developers = [
  {
    firstname: 'Tim',
    lastname: 'Gröger',
    club: 'Studentenclub Wu5 e.V.',
    job: 'Gründer von Flaschengeist; Maintainer',
    pic:
      'https://scontent-frt3-2.xx.fbcdn.net/v/t1.0-9/31768724_1663023210401956_3834323197281435648_n.jpg?_nc_cat=109&_nc_sid=09cbfe&_nc_ohc=jWvUfn_xJ9YAX_oJ3CE&_nc_ht=scontent-frt3-2.xx&oh=15249378051f1e27f8b15122effb5c4a&oe=5FAC6A17',
    description:
      'Eigentlich wöllte ich jetzt hier echt viel hinschreiben. Aber ich habe keinen Plan was. Früher war ich einfach nur Tim G. und habe für andere den Kaffe geholt. Unter anderen für Ferdinand Thiessen.',
  },
  {
    firstname: 'Ferdinand',
    lastname: 'Thiessen',
    club: 'Club Aquarium e.V.',
    pic:
      'https://scontent-frx5-1.xx.fbcdn.net/v/t1.0-9/17022243_1418942461493397_9069541318944803902_n.jpg?_nc_cat=110&_nc_sid=174925&_nc_ohc=HjkSm8vcRW8AX8bTnJ8&_nc_ht=scontent-frx5-1.xx&oh=f09bd36525f3c6e55feaafb3b05b43d2&oe=5FAD432A',
    job: 'Backend-Developer; Co-Maintainer',
    description:
      'Geiler Typ. Einfach mal so alles Aufgeräumt. Aufeinmal könnte man aus dem Code eine Dokumentation zaubern!',
  },
  {
    firstname: 'Dominik',
    lastname: 'Renz',
    club: 'Studentenclub Wu5 e.V.',
    job: 'Eigentlich Frontend-Developer',
    description: 'Er findet sich langsam rein.',
    pic:
      'https://scontent-frt3-1.xx.fbcdn.net/v/t31.0-8/10363433_647611335326483_3447118968375865826_o.jpg?_nc_cat=104&_nc_sid=09cbfe&_nc_ohc=nWMgo-6Ih74AX_NiGUz&_nc_ht=scontent-frt3-1.xx&oh=f16d2edfe86f68d54900099087edb9c9&oe=5FAACFD4',
  },
];
export default defineComponent({
  // name: 'PageName'
  components: { Developer },
  setup() {
    return { developers };
  },
});
</script>