Merge pull request #101 from imi-frankfurt/feature/94-Update-the-help…

…-page #94 - Update the help page
imi-frankfurt · Oct 20, 2022 · 0b34914 · 0b34914
2 parents 4940247 + e7b2cb9
commit 0b34914
Showing 1 changed file with 54 additions and 67 deletions.
diff --git a/pages/help.vue b/pages/help.vue
@@ -19,91 +19,78 @@ export default {
 <template>
   <v-container fluid>
     <v-row class="first-row">
-      <v-col class="first-col">
-        <p class="p-1">
-          {{ $t('pages.help.title') }}
-        </p>
-        <h1 class="h1-1">
-          {{ $t('pages.help.subtitle') }}
-        </h1>
+      <v-col>
+        <div class="first-col">
+          <p class="p-1">
+            {{ $t('pages.help.title') }}
+          </p>
+          <h1 class="h1-1">
+            {{ $t('pages.help.subtitle') }}
+          </h1>
+        </div>
       </v-col>
     </v-row>
-    <v-row class="second-row">
-      <v-col class="second-col">
-        <h1>{{ $t('pages.help.faq') }}</h1>
-        <p>{{ $t('pages.help.faqExtended') }}</p>
-        <v-data-table
-          class="faq-table elevation-1"
-          :headers="faqHeaders"
-          :items="$t('pages.help.faqList.demoAccount')"
-          single-expand
-          :expanded.sync="expanded"
-          item-key="id"
-          show-expand
-          hide-default-header
-          hide-default-footer
-          @click:row="(item, slot) => slot.expand(!slot.isExpanded)"
-        >
-          <template #expanded-item="{ headers, item }">
-            <td :colspan="headers.length">
-              {{ item.answer }}
-            </td>
-          </template>
-        </v-data-table>
+    <v-row>
+      <v-col>
+        <div class="second-col">
+          <h1>{{ $t('pages.help.faq') }}</h1>
+          <p>{{ $t('pages.help.faqExtended') }}</p>
+          <v-data-table
+            class="faq-table elevation-1"
+            :headers="faqHeaders"
+            :items="$t('pages.help.faqList.demoAccount')"
+            single-expand
+            :expanded.sync="expanded"
+            item-key="id"
+            show-expand
+            hide-default-header
+            hide-default-footer
+            @click:row="(item, slot) => slot.expand(!slot.isExpanded)"
+          >
+            <template #expanded-item="{ headers, item }">
+              <td :colspan="headers.length">
+                {{ item.answer }}
+              </td>
+            </template>
+          </v-data-table>
+        </div>
       </v-col>
     </v-row>
-    <v-row class="third-row">
-      <v-col class="third-col">
-        <v-card class="contact-card text-center">
-          <img
-            height="180"
-            src="@/assets/images/logo/2.png"
-          >
-          <v-card-subtitle>
-            {{ $t('pages.help.footer') }} <a href="mailto:info@dataelementhub.de">info@dataelementhub.de</a>.
-          </v-card-subtitle>
-        </v-card>
+    <v-row>
+      <v-col>
+        <div class="third-col text-center">
+          <v-card>
+            <img
+              height="180"
+              src="@/assets/images/logo/2.png"
+            >
+            <v-card-subtitle>
+              {{ $t('pages.help.footer') }} <a href="mailto:info@dataelementhub.de">info@dataelementhub.de</a>.
+            </v-card-subtitle>
+          </v-card>
+        </div>
       </v-col>
     </v-row>
   </v-container>
 </template>
 
 <style lang="scss">
 
-.third-row {
-  padding-top: 5rem;
-}
-
 .third-col {
-  padding-left: 30%;
-}
-
-.contact-card {
-  margin-top: 20vh;
-  width: 60%;
-}
-
-.footer-row {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 3rem;
-  text-align: center;
-}
-
-.faq-table {
-  width: 60%;
+  padding-top: 10rem;
+  width: 50%;
+  margin: 0 auto;
 }
 
 .second-col {
-  padding-left: 30%;
+  width: 50%;
+  margin: 0 auto;
 }
 
 .first-col {
-  padding-left: 25%;
-  padding-top: 4%;
-  width: 30%;
+  padding-top: 3rem;
+  width: 80%;
+  margin: 0 auto;
 }
 
 .p-1 {