From 70575c94c3dcd38769bf8501430da2ce07772612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Thu, 12 Nov 2020 12:07:40 +0100
Subject: [PATCH] =?UTF-8?q?[About]=20Design=C3=A4nderung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Es werden nur noch bei Developer Cards benutzt
* Logo wird geändert, wenn darkmode aktiv ist
* Pluginfarbe wird geändert, wenn darkmode aktiv ist
---
 src/config.ts             |  2 +-
 src/pages/about/About.vue | 53 ++++++++++++++++++---------------------
 2 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index 90b3ca8..9a1e011 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,5 @@
 const config = {
-  baseURL: '/api'
+  baseURL: 'https://flaschengeist.duckdns.org/api'
 };
 
 export default config;
diff --git a/src/pages/about/About.vue b/src/pages/about/About.vue
index e98b6a2..10c68d5 100644
--- a/src/pages/about/About.vue
+++ b/src/pages/about/About.vue
@@ -4,41 +4,38 @@
     class="fit row justify-center content-center items-center"
     v-if="$route.name == 'about' || $route.name == 'about_out'"
   >
-    <q-card flat class="col-xs-12 col-sm-10 col-md-6">
-      <q-card-section
-        class="row fit justify-center items-center content-center"
-      >
+    <div class="fit row justify-center content-center items-center">
         <q-img
-          src="logo-dark.svg"
-          class="q-mt-md"
+          :src="$q.dark.isActive? 'logo.svg' : 'logo-dark.svg'"
+          class="col-12 q-ma-md"
           style="min-width: 200px; max-width: 400px"
         />
-      </q-card-section>
-      <q-card-section class="text-h4 text-center">
+      <div class="col-12 text-h4 text-center q-pa-sm">
         Flaschengeist
         <div class="text-caption">
           Version 2.0.0
         </div>
-      </q-card-section>
-      <q-card-section class="text-center">
-        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.
-      </q-card-section>
-    </q-card>
+      </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 />
-    <q-card flat class="col-12">
-      <q-card-section class="text-h6" v-if="$route.name == 'about'">
+      <div class="col-12 text-h6 q-pa-sm" v-if="$route.name == 'about'">
         Geladene Plugins:
-      </q-card-section>
-      <q-card-section v-if="$route.name == 'about'">
+      </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 }}
@@ -46,20 +43,19 @@
             {{ plugin.version }}
           </q-chip>
         </q-chip>
-      </q-card-section>
+      </div>
       <q-separator />
-      <q-card-section class="text-h6">
+      <div class="col-12 text-h6 q-pa-sm">
         Entwickler:
-      </q-card-section>
-    </q-card>
+      </div>
 
     <div
-      class="fit row inline wrap justify-around items-start content-start q-gutter-sm"
+      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"
+        class="col-xs-12 col-md-5 col-lg-3 q-ma-sm"
         :firstname="developer.firstname"
         :lastname="developer.lastname"
         :job="developer.job"
@@ -68,6 +64,7 @@
         :pic="developer.pic"
       />
     </div>
+    </div>
   </q-page>
 </template>