Added sharing buttons, made copy to clipboard functional

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>eur-o-mat</title>
+    <title>Euromat 2017</title>
     <link rel="icon" type="image/png" sizes="32x32" href="/static/img/icons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/img/icons/favicon-16x16.png">
     <!--[if IE]><link rel="shortcut icon" href="/static/img/favicon.ico"><![endif]-->

src/app/app.vue

@@ -13,7 +13,7 @@
     </main>
 
     <footer>
-      <app-footer :menu="subMenu" />
+      <app-footer :menu="subMenu" :social="socialMedia" />
     </footer>
 
     <div class="app-background">
@@ -77,9 +77,9 @@
           { icon: require('@/assets/svg/flag-uk.svg'), locale: 'en' }
         ],
         socialMedia: [
-          { label: 'Twitter' },
-          { label: 'Facebook' },
-          { label: 'Clipboard' }
+          { label: 'Twitter', icon: 'twitter' },
+          { label: 'Facebook', icon: 'facebook' },
+          { label: 'Clipboard', icon: 'clipboard' }
         ]
       }
     },
@@ -203,8 +203,7 @@
     justify-content: center;
     position: relative;
 
-    header,
-    footer {
+    header {
       width: 100%;
     }
   }
@@ -247,6 +246,7 @@
     position: fixed;
     z-index: 2;
     bottom: 0;
+    right: 0;
     display: flex;
     justify-content: flex-end;
 

src/components/app-footer.vue

@@ -1,11 +1,20 @@
 <template>
-  <ul class="footer-menu">
-    <li v-for="item of menu">
-      <router-link tag="a" :to="item.route">
-        {{ item.label }}
-      </router-link>
-    </li>
-  </ul>
+  <div class="footer">
+    <ul class="footer-social">
+      <li v-for="item of social">
+        <button class="btn-dark" @click="share(item.label)" >
+          <feather-icon :type="item.icon" />
+        </button>
+      </li>
+    </ul>
+    <ul class="footer-menu">
+      <li v-for="item of menu">
+        <router-link tag="a" :to="item.route">
+          {{ item.label }}
+        </router-link>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -13,7 +22,47 @@
     name: 'AppFooter',
 
     props: {
-      menu: { type: Array, default: () => [] }
+      menu: { type: Array, default: () => [] },
+      social: { type: Array, default: () => [] }
+    },
+
+    data () {
+      return {
+        url: 'https://euromat.info'
+      }
+    },
+
+    methods: {
+      share (type) {
+        switch (type.toLowerCase()) {
+          case 'twitter': return this.shareViaTwitter()
+          case 'facebook': return this.shareViaFacebook()
+          case 'clipboard': return this.copyToClipboard()
+          default: return
+        }
+      },
+      shareViaTwitter () {
+        console.log('shareViaTwitter')
+      },
+      shareViaFacebook () {
+        console.log('shareViaFacebook')
+      },
+      copyToClipboard () {
+        const $textarea = document.createElement('textarea')
+        $textarea.value = this.url
+        document.body.appendChild($textarea)
+        $textarea.select()
+
+        try {
+          const successful = document.execCommand('copy')
+          const msg = successful ? 'successful' : 'unsuccessful'
+          console.log('Copying text command was ' + msg)
+        } catch (err) {
+          console.log('Oops, unable to copy')
+        }
+
+        document.body.removeChild($textarea)
+      }
     }
   }
 </script>
@@ -22,9 +71,20 @@
   @import "~styles/colors";
   @import "~styles/layout";
 
+  $social-btn-size: 40px;
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    ul {
+      list-style: none;
+    }
+  }
+
   .footer-menu {
     background: transparentize($background-primary, 0.5);
-    list-style: none;
     display: flex;
     font-size: $font-size-small;
     padding: $small-gap;
@@ -43,4 +103,25 @@
       margin-left: $base-gap;
     }
   }
+
+  .footer-social {
+    padding: 0 $small-gap 0 0;
+
+    li:not(:last-child) {
+      margin-bottom: 5px;
+    }
+
+    button {
+      width: $social-btn-size;
+      height: $social-btn-size;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    svg {
+      margin: 0;
+    }
+  }
 </style>