✨ better social sharing!

index.html

@@ -690,15 +690,7 @@ <h3>
             </div>
         </div>
     </footer>
-    <ob-scroll-to-top></ob-scroll-to-top>
-    <div class="ssk-group ssk-sticky ssk-right ssk-center ssk-lg">
-        <a href="" class="ssk ssk-facebook"></a>
-        <a href="" class="ssk ssk-twitter"></a>
-        <a href="" class="ssk ssk-google-plus"></a>
-        <a href="" class="ssk ssk-pinterest"></a>
-        <a href="" class="ssk ssk-tumblr"></a>
-        <a href="" class="ssk ssk-linkedin"></a>
-    </div>
+    <ob-scrolled-hud></ob-scrolled-hud>
 </div>
 <!-- Site content ENDS -->
 </body>

src/components/scroll-to-top.vue

@@ -1,5 +1,5 @@
 <template>
-    <button class="button is-primary scroll-to-top animated fadeInUp" v-scroll-to="'#main'" v-show="visible">
+    <button class="button is-primary scroll-to-top animated fadeInUp" v-scroll-to="'#main'">
         <span class="icon">
             <i class="fas fa-arrow-up"></i>
         </span>
@@ -17,39 +17,11 @@
         height: $button-size;
         width: $button-size;
         margin: 1rem;
-
-        @media(max-width: 770px) {
-            margin-bottom: 4rem;
-        }
     }
 </style>
 
 <script>
-    import debounce from 'lodash.debounce';
-
     export default {
-        name: 'ob-scroll-to-top',
-        data() {
-            return {
-                visible: false,
-                visibleOffset: 600,
-                scrollDebounce: 10
-            }
-        },
-        mounted() {
-            this.debouncedOnScroll = debounce(this.onScroll, this.scrollDebounce);
-            window.addEventListener('scroll', this.debouncedOnScroll);
-
-            // Bootstrap
-            this.onScroll();
-        },
-        destroyed() {
-            window.removeEventListener('scroll', this.debouncedOnScroll);
-        },
-        methods: {
-            onScroll() {
-                this.visible = (window.pageYOffset > this.visibleOffset);
-            }
-        }
+        name: 'ob-scroll-to-top'
     }
 </script>

src/components/scrolled-hud.vue

@@ -0,0 +1,46 @@
+<template>
+    <div v-show="visible">
+        <ob-share-page></ob-share-page>
+        <ob-scroll-to-top></ob-scroll-to-top>
+    </div>
+</template>
+
+<style lang="scss">
+</style>
+
+<script>
+    import debounce from 'lodash.debounce';
+
+    import ObSharePage from "./share-page.vue";
+    import ObScrollToTop from "./scroll-to-top.vue";
+
+    export default {
+        components: {
+            ObScrollToTop,
+            ObSharePage
+        },
+        name: 'ob-scrolled-hud',
+        data() {
+            return {
+                visible: false,
+                visibleOffset: 600,
+                scrollDebounce: 10
+            }
+        },
+        mounted() {
+            this.debouncedOnScroll = debounce(this.onScroll, this.scrollDebounce);
+            window.addEventListener('scroll', this.debouncedOnScroll);
+
+            // Bootstrap
+            this.onScroll();
+        },
+        destroyed() {
+            window.removeEventListener('scroll', this.debouncedOnScroll);
+        },
+        methods: {
+            onScroll() {
+                this.visible = (window.pageYOffset > this.visibleOffset);
+            }
+        }
+    }
+</script>

src/components/share-page.vue

@@ -0,0 +1,52 @@
+<template>
+    <button class="button is-primary share-page animated fadeInUp" @click="onUserWantsToShare()">
+        <span class="icon">
+            <i class="fas fa-share-alt"></i>
+        </span>
+        <span>Share</span>
+        <!--      <b-modal :active.sync="isShareModalOpen" has-modal-card>
+                  <div class="box">
+                      Content
+                  </div>
+              </b-modal>-->
+    </button>
+</template>
+
+<style lang="scss">
+
+    $button-size: 45px;
+
+    .share-page {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        height: $button-size;
+        margin: 1rem;
+    }
+</style>
+
+<script>
+    import obSocialShareButtons from './social-share-buttons.vue';
+
+    export default {
+        name: 'ob-share-page',
+        data() {
+            return {
+                isShareModalOpen: false
+            }
+        },
+        methods: {
+            onUserWantsToShare() {
+                this.openShareModal();
+            },
+            openShareModal() {
+                this.$modal.open({
+                    component: obSocialShareButtons
+                })
+            }
+        },
+        mounted() {
+
+        }
+    }
+</script>

src/components/social-share-buttons.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="ssk-block ssk-md">
+        <a href="" class="ssk ssk-facebook">
+            Share in Facebook
+        </a>
+        <a href="" class="ssk ssk-twitter">
+            Share in Twitter
+        </a>
+        <a href="" class="ssk ssk-google-plus">
+            Share in Google Plus
+        </a>
+        <a href="" class="ssk ssk-pinterest">
+            Share in Pinterest
+        </a>
+        <a href="" class="ssk ssk-tumblr">
+            Share in Tumblr
+        </a>
+        <a href="" class="ssk ssk-linkedin">
+            Share in LinkedIn
+        </a>
+    </div>
+</template>
+
+
+<style lang="scss">
+    .ssk{
+        margin: 0.5rem;
+        width: 100%;
+        font-size: 1rem;
+    }
+
+    .ssk:before, .ssk .glyphicon, .ssk .fa{
+        left: -8px;
+    }
+</style>
+
+<script>
+    export default {
+        name: 'ob-social-share-buttons',
+        mounted() {
+            this.initSocialShare();
+        },
+        methods: {
+            initSocialShare() {
+                console.log(this.$refs);
+                const SocialShareKit = window['SocialShareKit'];
+                SocialShareKit.init({});
+            },
+        }
+    }
+</script>

src/index.js

@@ -30,6 +30,8 @@ import obMobileMenu from './components/mobile-menu.vue';
 import obGenericDataSharing from './components/generic-data-sharing.vue';
 import obOpenbookDataSharing from './components/openbook-data-sharing.vue';
 import obScrollToTop from './components/scroll-to-top.vue';
+import obSharePage from './components/share-page.vue';
+import obScrolledHud from './components/scrolled-hud.vue';
 
 import twemoji from './directives/twemoji';
 
@@ -45,18 +47,12 @@ new Vue({
         obOpenbookDataSharing,
         obHamburger,
         obMobileMenu,
-        obScrollToTop
+        obScrolledHud
     },
     mounted() {
         this.initHello();
-        this.initSocialShare();
     },
     methods: {
-        initSocialShare(){
-            const SocialShareKit = window['SocialShareKit'];
-            SocialShareKit.init({
-            });
-        },
         initHello() {
             // This should have been added by the require of typewriter.exec.js
             const Typewriter = window['Typewriter'];