Merge branch 'add-share-button' into 'master'

Add share button

See merge request spraksamlingane/beta.ordbok.uib.no!25

src/components/Article.vue

@@ -32,32 +32,7 @@
         </router-link>
       </div>
     </div>
-    <div class="share" v-if="webShareApiSupported">
-      <button @click="shareViaWebShare">
-        Del ordet <font-awesome-icon icon="share-alt-square" size = "lg"/>
-    </button>
-    </div>
-    <div class="share" v-else>
-        <button class="share-button">
-            <ShareNetwork network="facebook"
-                :url="share_link"
-                title="TITLE"
-                description="DESCRIPTION"
-                quote="QUOTE">
-                <font-awesome-icon :icon="['fab', 'facebook-square']" size="lg" />
-            </ShareNetwork>
-        </button>
-        <button class="share-button">
-            <ShareNetwork
-                network="twitter"
-                :url="share_link"
-                title="TITLE"
-                description="DESCRIPTION"
-                hashtags="Ordbøkene">
-                <font-awesome-icon :icon="['fab', 'twitter-square']" size="lg" />
-            </ShareNetwork>
-        </button>
-    </div>
+    <ArticleFooter :article="article"/>
 </article>
 </template>
 
@@ -67,6 +42,7 @@ import DefElement from './DefElement.vue'
 import Definition from './Definition.vue'
 import SubArticle from './SubArticle.vue'
 import Header from './Header.vue'
+import ArticleFooter from './ArticleFooter.vue'
 
 function find_sub_articles(definition) {
   let sub_art_list = []
@@ -102,19 +78,12 @@ export default {
     article: Object
   },
     computed: {
-    webShareApiSupported() {
-      return navigator.share
-    },
     link_to_self: function() {
       return  {
         ref: '/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma),
         article: this.article
       }
     },
-    share_link: function() {
-      let host =  window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no' : 'https://' + window.location.host
-      return host + "/" + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
-    },
     dictionary: function() {
       return this.article.dictionary
     },
@@ -135,16 +104,10 @@ export default {
     DefElement,
     Definition,
     SubArticle,
-    Header
+    Header,
+    ArticleFooter
   },
   methods: {
-    shareViaWebShare() {
-      navigator.share({
-        title: 'Title to be shared',
-        text: 'Text to be shared',
-        url: 'URL to be shared'
-      })
-    },
     article_link_click: function(item) {
       this.$emit('article-click', item)
     },
@@ -182,14 +145,6 @@ h3 {
   font-variant: small-caps;
 }
 
-div.share {
-  color: #560027;
-  padding-top: 24px;
-}
-
-.share-button {
-  padding-right: 4px;
-}
 
 section.etymology > h3, section.pronunciation > h3 {
   display: inline;

src/components/ArticleFooter.vue

+<template>
+  <div class="article_footer">
+    <span v-if="webShareApiSupported">
+      <button class="share_button" @click="shareViaWebShare">
+        <span class = "share_text">Del ordet</span>
+        <font-awesome-icon icon="share-alt-square" size = "lg"/>
+      </button>
+    </span>
+  <span v-else>
+      <button class="share_button">
+          <ShareNetwork network="facebook"
+              :url="share_link"
+              title="TITLE"
+              description="DESCRIPTION"
+              quote="QUOTE">
+              <font-awesome-icon :icon="['fab', 'facebook-square']" size="lg" />
+          </ShareNetwork>
+      </button>
+      <button class="share_button">
+          <ShareNetwork
+              network="twitter"
+              :url="share_link"
+              title="TITLE"
+              description="DESCRIPTION"
+              hashtags="Ordbøkene.no">
+              <font-awesome-icon :icon="['fab', 'twitter-square']" size="lg" />
+          </ShareNetwork>
+      </button>
+  </span>
+    <div class = "footer_title">Ordbøkene.no
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleFooter',
+  props: {
+    article: Object
+  },
+    computed: {
+    webShareApiSupported() {
+      return navigator.share && !(navigator.platform==="Win64" || navigator.platform==="Win32")
+    },
+    share_link: function() {
+      let host =  window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no' : 'https://' + window.location.host
+      return host + "/" + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
+    }
+  },
+  methods: {
+    shareViaWebShare() {
+      navigator.share({
+        title: 'Title to be shared',
+        text: 'Text to be shared',
+        url: 'URL to be shared'
+      })
+    }
+  }
+}
+
+</script>
+<style scoped>
+
+.share_text {
+  padding-right: 10px;
+}
+
+.share_button {
+  padding-right: 4px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.article_footer {
+  color: var(--v-primary-base);
+  padding-top: 24px;
+}
+
+.footer_title {
+  font-family: Inria Serif;
+  font-weight: bold;
+  font-size: 18px;
+  float: right;
+}
+
+</style>