new header

Author: LukaHarambasic

assets/cv.yml

@@ -13,16 +13,12 @@ person:
         first: Luka
         last: Harambasic
     # information:
-    #     - German
-    #     - 03.09.2000
-    #     - Oppau
-    #     - mehr
-    #     - mehr
+    #     - Musterstraße 7
+    #     - 68161 Mannheim
+    #     - Germany
     address:
-        street: Mustermannstr.
-        housenumber: 7
-        zip: 67066
-        city: Oppau
+        street: Mustermannstr. 7
+        city: 67066 Oppau
         country: Germany
 
 company:
@@ -33,10 +29,8 @@ company:
         first: Maximiliane
         last: Mustermann
     address:   
-        street: Mustermanstr.
-        housenumber: 7
-        zip: 67066
-        city: Oppau
+        street: Mustermanstr. 7
+        city: 67066 Walldorf
         country: Germany
 
 coverletter:

components/CoverletterHeader.vue

@@ -0,0 +1,55 @@
+<template>
+  <header>
+    <span 
+      v-if="address.street"
+      v-text="address.street" />
+    <span 
+      v-if="address.city"
+      v-text="address.city" />
+    <span 
+      v-if="address.country"
+      v-text="address.country" />
+  </header>
+</template>
+
+<script>
+  export default {
+    name: 'CoverletterHeader',
+    props: {
+      address: {
+        required: true,
+        type: Object
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    background: $c-primary;
+    color: $c-secondary;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    padding: $s-s 0;
+    border-radius: $radius $radius 0 0;
+    > span {
+      margin: 0 $s-xxs 0 0;
+      &::after {
+        content: ',';
+      }
+      &:last-of-type {
+        margin: 0 0 0 0;
+        &::after {
+          content: '';
+        }
+      }
+    }
+  }
+</style>

components/CoverletterInformation.vue

@@ -22,14 +22,8 @@
       <span 
         v-if="information.address"
         v-text="information.address.street" />
-      <span 
-        v-if="information.address" 
-        v-text="information.address.housenumber" />
     </div>
-    <div class="zipCity">
-      <span 
-        v-if="information.address"
-        v-text="information.address.zip" />
+    <div class="city">
       <span 
         v-if="information.address" 
         v-text="information.address.city" />
@@ -67,7 +61,7 @@
 <style lang="scss" scoped>
 address {
   width: 100%;
-  margin: 0 0 ($s * 3) 0;
+  margin: $s 0 ($s * 3) 0;
   font-style: normal;
 }
 </style>

components/Page.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     class="page"
-    :class="{ first: isFirst}">
+    :class="{ first: isFirstCv }">
     <slot />
     <page-footer
       :links="footer"
-      :isFirst="isFirst"
+      :isFirst="isFirstCv"
       :showLogo="settings.showLogo" />
   </div>
 </template>
@@ -18,7 +18,7 @@ export default {
     PageFooter
   },
   props: {
-    isFirst: {
+    isFirstCv: {
       type: Boolean,
       default: false
     },

components/PageFooter.vue

@@ -103,7 +103,7 @@ footer {
     width: $s * 3;
     height: $s * 3;
     margin-top: - ($s * 1.5);
-    margin-right: $s;
+    margin-right: $s * 3;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     border-radius: 50%;
     transition: all 0.7s ease;
@@ -149,7 +149,6 @@ footer {
         text-decoration: none;
         border-bottom: 1px transparent solid;
         &:hover {
-          opacity: 0.9;
           border-bottom-color: $c-secondary;
         }
       }

pages/index.vue

@@ -3,8 +3,8 @@
     <page
       :settings="cv.settings"
       :footer="cv.footer">
-      <coverletter-information
-        :information="cv.person"/>
+      <coverletter-header
+        :address="cv.person.address"/>
       <coverletter-information
         :information="cv.company"/>
       <coverletter-text
@@ -13,7 +13,7 @@
         :coverletter="cv.coverletter" />
     </page>
     <page
-      :isFirst="true"
+      :isFirstCv="true"
       :settings="cv.settings"
       :footer="cv.footer">
       <page-header
@@ -56,6 +56,7 @@
 <script>
 import Page from '~/components/Page.vue'
 import PageHeader from '~/components/PageHeader.vue'
+import CoverletterHeader from '~/components/CoverletterHeader.vue'
 import CoverletterInformation from '~/components/CoverletterInformation.vue'
 import CoverletterText from '~/components/CoverletterText.vue'
 import List from '~/components/List.vue'
@@ -67,6 +68,7 @@ export default {
   components: {
     Page,
     PageHeader,
+    CoverletterHeader,
     CoverletterInformation,
     CoverletterText,
     List,