Merge branch 'dev' into 'prod'

Dev

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

src/components/ArticleFooter.vue

 <template>
   <div class="article_footer">
-      <v-btn v-if="!webShareApiSupported" x-small depressed class="toolbar-button" rounded tabindex="0" @click="copy_link">
-        <v-icon small>link</v-icon> <span class = "button-text">Kopier lenke</span>
+     <v-snackbar center left light
+                 tile
+                 v-model='copy_popup'
+                 timeout="2000">
+
+        <span class="text-center">{{what_copied}} er kopiert til utklippstavla</span>
+              <template v-slot:action="{ attrs }">
+          <v-btn
+            color="primary"
+            text
+            v-bind="attrs"
+            @click="copy_popup = false"
+          >
+            <v-icon>close</v-icon>
+          </v-btn>
+        </template>
+      </v-snackbar>
+
+      <v-btn v-if="showLinkCopy"
+             x-small depressed class="toolbar-button" rounded tabindex="0" @click="copy_link">
+        <v-icon small>link</v-icon><span class = "button-text">Kopier lenke</span>
       </v-btn>
 
       <v-btn v-if="webShareApiSupported" depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
         <v-icon x-small>share</v-icon><span class = "button-text">Del ordet</span>
       </v-btn>
-      <v-dialog max-width="600px" rounded="0" v-model="citation_dialog">
+      <v-dialog max-width="600px" v-model="citation_dialog">
         <template v-slot:activator="{ on, attrs }">
             <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" v-on="on" v-bind="attrs">
         <v-icon x-small>format_quote</v-icon> <span class = "button-text">Siter</span>
@@ -15,7 +34,7 @@
 
         </template>
 
-        <v-card rounded="0" class="info-card">
+        <v-card class="info-card">
           {{{"nn": "Ønskjer du å sitere denne artikkelen i Nynorskordboka, rår vi deg til å gje opp når artikkelen vart henta (lesen), t.d. slik:",
              "bm": "Ønsker du å sitere denne artikkelen i Bokmålsordboka, anbefaler vi å oppgi når artikkelen ble hentet (lest), f.eks. slik:"}[this.article.dictionary]}}<br/>
           <div id = "citation" v-html="this.create_citation()"/>
@@ -34,8 +53,6 @@
 </template>
 
 <script>
-const host =  window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no/' : window.location.href
-
 export default {
   name: 'ArticleFooter',
   props: {
@@ -45,13 +62,18 @@ export default {
     webShareApiSupported() {
       return navigator.share
     },
+    showLinkCopy() {
+      return (!navigator.share || this.$vuetify.breakpoint.mdAndUp) && navigator.clipboard
+    },
     hasPointer() {
       return window.matchMedia('(hover: hover) and (pointer: fine)').matches
     },
   },
   data: function() {
     return {
-      citation_dialog: false
+      copy_popup: false,
+      citation_dialog: false,
+      what_copied: null
     }
 
   },
@@ -64,7 +86,7 @@ export default {
       })
     },
     create_link() {
-      return host + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
+      return 'https://beta.ordbok.uib.no/' + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
     },
     get_citation_info() {
       let date = new Date();
@@ -83,13 +105,23 @@ export default {
       return citation
     },
     copy_link() {
-      navigator.clipboard.writeText(this.create_link());
+      let link = this.create_link()
+      let self = this
+         navigator.clipboard.writeText(link).then(() => {
+           self.what_copied = "Lenka"
+           self.copy_popup = true
+         }).catch(err => {
+           console.log("ERROR COPYING:",err)
+         })
     },
 
     copy_citation() {
+
       let citation = document.getElementById("citation").textContent;
       navigator.clipboard.writeText(citation)
       this.citation_dialog = false
+      this.what_copied = "Sitatet"
+      this.copy_popup = true
     },
 
     close_citation_dialog() {

src/components/Header.vue

@@ -7,13 +7,13 @@
     <span class="header_group_list" v-if="group_list.length" tabindex="0">{{group_list}}</span>
 
     <span v-if="split_inf" tabindex="0"> (kløyvd infinitiv: <i>-a</i>
-      <v-menu rounded="0" v-model="menu" offset-x max-width="200px">
+      <v-menu tile v-model="menu" offset-x max-width="200px">
         <template v-slot:activator="{ on, attrs }">
           <v-btn aria-label="Mer informasjon om kløyvd infinitiv" x-small icon v-on="on" v-bind="attrs" class="info-button">
             <v-icon color="primary" size="14px">$vuetify.icons.value.info</v-icon>
           </v-btn>
         </template>
-        <v-card rounded="0" class="info-card">
+        <v-card tile class="info-card">
           Dersom du bruker kløyvd infinitiv, skal dette verbet ha <i>-a</i> i infinitiv. Les meir
           <a target="_blank" href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">her</a>.
         </v-card>