complete collapse settings

src/components/Article.vue

 <template>
   <article v-bind:class="{'v-sheet v-card rounded-xl': !articleLookup, dictionary, 'collapsable': collapsable, 'collapsed': collapsed}" v-if="article">
-    <Header :title_id="title_id" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
+    <Header :title_id="title_id" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" @toggle-collapse = "toggle_collapse"/>
     <InflectionButton :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id"/>
     
     <div class="article_content" :class="$vuetify.breakpoint.name" v-if="!collapsed">
@@ -81,23 +81,48 @@ export default {
   },
   data: function() {
     return {
-      collapsed: this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2)
+      is_collapsed: true
     }
   },
-
-    computed: {
-    snippet: function() {
-      if (this.article.body.definitions) {
-        return this.parse_definitions(this.article.body.definitions)
+  computed: {
+    collapsable: function() {
+      if (this.$parent.$options.name != 'SearchResults') {
+        this.is_collapsed = false
+        return false
+      }
+      let collapsable = this.$store.state.collapseArticles
+      if (collapsable == 'never') {
+        this.is_collapsed = false
+      }
+      if (collapsable == 'always') {
+        this.is_collapsed = true
+      }
+      if (collapsable == 'auto') {
+        this.is_collapsed = this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2)
       }
-      return null
-      
-      
 
+      return this.$store.state.collapseArticles == 'always' || this.is_collapsed//getters.collapsable(this.$parent.$options.name, this.$parent.results_bm.length + this.$parent.results_nn.length)
     },
-    collapsable: function() {
-      return this.$parent.$options.name    == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2)
-
+    collapsed: {
+      get() {
+        if (this.$parent.$options.name != 'SearchResults') {
+          return false
+        }
+        if (!this.collapsable) {
+          this.is_collapsed = false
+        }
+        return this.is_collapsed
+      },
+      set(value) {
+        this.is_collapsed = value
+      }
+    },
+    snippet: function() {
+    if (this.collapsable && this.article.body.definitions) {
+      return this.parse_definitions(this.article.body.definitions)
+    }
+    return null
+      
     },
     link_to_self: function() {
       return  {
@@ -190,14 +215,11 @@ export default {
       return definitions
 
     },
-    expand: function() {
-      if (this.collapsed) {
-        this.collapsed = false
-      }
-    },
-    collapse: function() {
-      this.collapsed = true
+    toggle_collapse: function() {
+      console.log("toggle", this.collapsed)
+      this.collapsed = !this.collapsed
     },
+
     article_link_click: function(item) {
       this.$emit('article-click', item)
     },

src/components/Header.vue

@@ -58,13 +58,13 @@
           <v-btn class="expand_icon" v-if="$parent.collapsed"
            text
            small
-           @click="$parent.collapsed=false">
+           @click="$emit('toggle-collapse')">
            Vis artikkel
            <v-icon small right>expand_more</v-icon></v-btn>
            <v-btn class="expand_icon" v-else
            text
            small
-           @click="$parent.collapsed=true">
+           @click="$emit('toggle-collapse')">
            <v-icon small>expand_less</v-icon></v-btn>
            
            </span> 

src/components/Settings.vue

@@ -17,9 +17,9 @@
     </v-list-item>
     <v-list-item>
 
-      <v-radio-group mandatory two-line v-model="updateLocale" label="Velg når artiklene i søkeresultatene skal forkortes">
-        <v-radio value="auto" label="Forkort i søk med to eller flere resultater"></v-radio>
-        <v-radio value="always" label="Vis bare forkortede artikler"></v-radio>
+      <v-radio-group mandatory two-line v-model="updateCollapse" label="Velg om søkeresultatene skal inneholde utdrag eller fullstendige artikler.">
+        <v-radio value="auto" label="Automatisk (hvis mer enn 2 resultater)"></v-radio>
+        <v-radio value="always" label="Vis bare utdrag"></v-radio>
         <v-radio value="never" label="Vis bare fullstendige artikler"></v-radio>
       </v-radio-group>
       </v-list-item>
@@ -42,11 +42,12 @@ export default {
             set () { this.$store.commit("toggle", "showInflectionNo")
             }
         },
-        toggleCollapse: {
+        updateCollapse: {
             get () { return this.$store.state.collapseArticles}, 
-            set () { this.$store.commit("toggle", "collapseArticles")
-            }
-        }
+            set(value) {
+                this.$store.commit("setCollapse", value)
+                }
+        },
     },
 }
 </script>

src/main.js

@@ -102,7 +102,7 @@ const store = new Vuex.Store({
       state.showInflectionNo = localStorage.getItem('showInflectionNo') || false
       state.currentLocale = localStorage.getItem('currentLocale')
       state.defaultDict = localStorage.getItem('defaultDict') || 'bm,nn'
-      state.collapseArticles = localStorage.getItem('collapseArticles') || window.innerWidth < 700
+      state.collapseArticles = localStorage.getItem('collapseArticles') || 'auto'
       state.noMouse = window.matchMedia('(hover: none)').matches
 
       
@@ -118,6 +118,10 @@ const store = new Vuex.Store({
       payload.i18n.locale = payload.value
       localStorage.setItem("currentLocale", payload.value);
     },
+    setCollapse(state, value) {
+      localStorage.setItem("collapseArticles", value)
+      state.collapseArticles = value
+    },
     toggle(state, setting) {
       let value = !state[setting]
       state[setting] = value