Add full screen infographic component

client/src/App.vue

@@ -18,6 +18,7 @@
   import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
   import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
   import FullscreenImage from '@/components/FullscreenImage';
+  import FullscreenInfographic from '@/components/FullscreenInfographic';
 
   export default {
     name: 'App',
@@ -34,7 +35,8 @@
       NewObjectiveGroupWizard,
       EditObjectiveGroupWizard,
       NewProjectEntryWizard,
-      FullscreenImage
+      FullscreenImage,
+      FullscreenInfographic
     },
 
     computed: {

client/src/components/FullscreenInfographic.vue

@@ -0,0 +1,31 @@
+<template>
+  <modal :fullscreen="true">
+    <component :is="type" :value="value"></component>
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  import InfogramBlock from '@/components/content-blocks/InfogramBlock';
+
+  export default {
+    components: {
+      Modal,
+      InfogramBlock
+    },
+
+    computed: {
+      id() {
+        return this.$store.state.infographic.id;
+      },
+      type() {
+        return this.$store.state.infographic.type;
+      },
+      value() {
+        return {
+          id: this.id
+        }
+      }
+    }
+  }
+</script>

client/src/components/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="modal__backdrop">
-    <div class="modal" :class="{'modal--hide-header': hideHeader, 'modal--fullscreen': fullscreen}">
+    <div class="modal" :class="{'modal--hide-header': hideHeader || fullscreen, 'modal--fullscreen': fullscreen}">
       <div class="modal__header">
         <slot name="header"></slot>
       </div>
@@ -128,6 +128,7 @@
       padding: 10px $modal-lateral-padding;
       overflow: auto;
       box-sizing: border-box;
+      min-height: 30vh;
     }
 
     &__close-button {

client/src/components/content-blocks/InfogramBlock.vue

@@ -6,6 +6,7 @@
 
     <a class="infogram-block__link" :href="href"
        target="_blank">{{title}}</a>
+    <a class="infogram-block__link" @click="openFullscreen">Fullscreen</a>
   </div>
 </template>
 
@@ -27,6 +28,15 @@
       });
     },
 
+    methods: {
+      openFullscreen() {
+        this.$store.dispatch('showFullscreenInfographic', {
+          id: this.value.id,
+          type: 'infogram-block'
+        });
+      }
+    },
+
     computed: {
       src() {
         return `https://e.infogram.com/${this.id}?src=embed`;
@@ -66,6 +76,7 @@
     &__link {
       /*color:#989898;*/
       text-decoration: none;
+      cursor: pointer;
     }
 
     &__iframe {

client/src/store/index.js

@@ -19,7 +19,11 @@ export default new Vuex.Store({
     objectiveGroupType: '',
     currentObjectiveGroup: '',
     parentProject: null,
-    imageUrl: ''
+    imageUrl: '',
+    infographic: {
+      id: 0,
+      type: ''
+    }
   },
 
   getters: {},
@@ -43,6 +47,10 @@ export default new Vuex.Store({
       commit('setCurrentObjectiveGroup', '');
       commit('setParentProject', null);
       commit('setImageUrl', '');
+      commit('setInfographic', {
+        id: 0,
+        type: ''
+      });
     },
     resetContentBlockPosition({commit}) {
       commit('setContentBlockPosition', {});
@@ -90,6 +98,10 @@ export default new Vuex.Store({
       commit('setImageUrl', payload);
       dispatch('showModal', 'fullscreen-image');
     },
+    showFullscreenInfographic({commit, dispatch}, payload) {
+      commit('setInfographic', payload);
+      dispatch('showModal', 'fullscreen-infographic');
+    },
   },
 
   mutations: {
@@ -134,6 +146,9 @@ export default new Vuex.Store({
     },
     setImageUrl(state, payload) {
       state.imageUrl = payload;
+    },
+    setInfographic(state, payload) {
+      state.infographic = payload;
     }
   }
 })