Add a plugin that makes screen dimension responsive : handle responvi…

…ness by script

src/js/vue-plugins/screen.js

@@ -0,0 +1,48 @@
+
+const BREAKPOINT_MOBILE = 768;
+const BREAKPOINT_TABLET = 1023;
+const BREAKPOINT_DESKTOP = 1215;
+const BREAKPOINT_WIDESCREEN = 1407;
+
+export default function install(Vue) {
+  Vue.prototype.$screen = new Vue({
+    name: 'Screen',
+
+    data() {
+      return {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+    },
+
+    // https://bulma.io/documentation/modifiers/responsive-helpers/
+    computed: {
+      isMobile() {
+        return this.width <= BREAKPOINT_MOBILE;
+      },
+      isTablet() {
+        return this.width > BREAKPOINT_MOBILE && this.width <= BREAKPOINT_TABLET;
+      },
+      isDesktop() {
+        return this.width > BREAKPOINT_TABLET && this.width <= BREAKPOINT_DESKTOP;
+      },
+      isWidescreen() {
+        return this.width > BREAKPOINT_DESKTOP && this.width <= BREAKPOINT_WIDESCREEN;
+      },
+      isFullHD() {
+        return this.width > BREAKPOINT_WIDESCREEN;
+      }
+    },
+
+    created() {
+      window.addEventListener('resize', this.onResize);
+    },
+
+    methods: {
+      onResize() {
+        this.width = window.innerWidth;
+        this.height = window.innerHeight;
+      }
+    }
+  });
+}

src/main.js

@@ -16,6 +16,7 @@ import globalComponents from '@/js/vue-plugins/generic-components';
 import helperWindow from '@/js/vue-plugins/helper-window';
 import imageViewer from '@/js/vue-plugins/image-viewer';
 import localStorage from '@/js/vue-plugins/local-storage';
+import screen from '@/js/vue-plugins/screen';
 import stripMarkdown from '@/js/vue-plugins/strip-markdown';
 import upperCaseFirstLetter from '@/js/vue-plugins/uppercase-first-letter';
 import user from '@/js/vue-plugins/user';
@@ -68,6 +69,7 @@ Vue.use(helperWindow); // vm.$helper property
 Vue.use(alertWindow); // vm.$alert property
 Vue.use(imageViewer);
 Vue.use(globalComponents); // Components available everywhere
+Vue.use(screen); // screen reactives properties
 Vue.use(stripMarkdown); // stripMarkdown filter
 Vue.use(upperCaseFirstLetter); // upperCaseFirstLetter filter
 Vue.use(user); // vm.$user property

src/views/SideMenu.vue

@@ -22,7 +22,7 @@
 
     <div class="menu-footer is-size-7">
       <!-- We must use JS to hide add, because we do not want that hidden add be taken add's stats -->
-      <advertisement class="menu-add" v-if="windowHeight>=630" />
+      <advertisement class="menu-add" v-if="$screen.height>=630" />
 
       <div class="has-text-centered menu-links">
         <router-link :to="{name:'article', params:{id:106727}}" v-translate>contact</router-link>
@@ -56,12 +56,6 @@
   export default {
     components: { Advertisement },
 
-    data() {
-      return {
-        windowHeight: 0
-      };
-    },
-
     computed: {
       // This must be computed, because it needs $gettext() function
       menuItems() {
@@ -73,17 +67,6 @@
           { name: 'articles', icon: 'icon-article', text: this.$gettext('articles'), activeFor: ['article'] }
         ];
       }
-    },
-
-    mounted() {
-      this.onResize();
-      window.addEventListener('resize', this.onResize);
-    },
-
-    methods: {
-      onResize() {
-        this.windowHeight = window.innerHeight;
-      }
     }
   };
 </script>

src/views/document/ArticleView.vue

@@ -13,7 +13,7 @@
           <field-view :document="document" :field="fields.quality" />
         </div>
 
-        <tool-box :document="document" />
+        <tool-box :document="document" v-if="!$screen.isMobile" />
       </div>
       <div class="column is-9 is-12-print">
         <div class="box">
@@ -25,6 +25,7 @@
         <routes-box v-if="!isDraftView" :document="document" hide-buttons />
         <recent-outings-box v-if="!isDraftView" :document="document" />
         <images-box v-if="!isDraftView" :document="document" />
+        <tool-box :document="document" v-if="$screen.isMobile" />
         <comments-box v-if="!isDraftView" :document="document" />
       </div>
     </div>