#94 - Update the help page

- Reverse latest changes

pages/help.vue

@@ -19,7 +19,7 @@ export default {
 <template>
   <v-container fluid>
     <v-row class="first-row">
-      <v-col cols="8" class="mt-6 ml-3">
+      <v-col class="first-col">
         <p class="p-1">
           {{ $t('pages.help.title') }}
         </p>
@@ -28,61 +28,81 @@ export default {
         </h1>
       </v-col>
     </v-row>
-    <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-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-col>
     </v-row>
-    <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-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-col>
     </v-row>
   </v-container>
 </template>
 
-<style>
+<style lang="scss">
+.third-row {
+  padding-top: 5rem;
+}
 
 .third-col {
-  padding-top: 10rem;
-  width: 50%;
-  margin: 0 auto;
+  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%;
 }
 
 .second-col {
-  width: 50%;
-  margin: 0 auto;
+  padding-left: 30%;
+}
+
+.first-col {
+  padding-left: 25%;
+  padding-top: 4%;
+  width: 30%;
 }
 
 .p-1 {
@@ -105,11 +125,11 @@ export default {
 .first-row {
   position: relative;
   font-family: "Lato", sans-serif;
-  height: 40vh;
+  height: 30vh;
   background-image: linear-gradient(to right bottom, rgba(172, 206, 248, 0.81), rgba(6, 130, 196, 0.73));
   background-size: cover;
   background-position: top;
-  -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
-  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
+  -webkit-clip-path: polygon(0 0, 100% 0, 100% 20%, 0 100%);
+  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
 }
 </style>