feat: insert content speeddial + mobile optimizations

client/js/app.js

@@ -6,6 +6,7 @@ import CONSTANTS from './constants'
 
 import Vue from 'vue'
 import VueClipboards from 'vue-clipboards'
+import VueSimpleBreakpoints from 'vue-simple-breakpoints'
 import VeeValidate from 'vee-validate'
 import { ApolloClient } from 'apollo-client'
 import { ApolloLink } from 'apollo-link'
@@ -78,6 +79,7 @@ window.graphQL = new ApolloClient({
 // ====================================
 
 Vue.use(VueClipboards)
+Vue.use(VueSimpleBreakpoints)
 Vue.use(localization.VueI18Next)
 Vue.use(helpers)
 Vue.use(VeeValidate, {

client/js/compatibility.js

@@ -1,20 +1,4 @@
-// =======================================
-// Promise polyfill
-// =======================================
-// Requirement: IE 11 and below
-
-if (!window.Promise) {
-  window.Promise = require('bluebird')
-}
-
-// =======================================
-// Array.from polyfill
-// =======================================
-// Requirement: IE 11 and below
-
-if (!Array.from) {
-  require('./polyfills/array-from')
-}
+require('babel-polyfill')
 
 // =======================================
 // Fetch polyfill

client/js/components/editor-code.vue

@@ -21,9 +21,13 @@
               title Heading
               use(xlink:href='#fa-heading')
           v-list
-            v-list-tile(v-for='(n, idx) in 6', @click='')
+            v-list-tile(v-for='(n, idx) in 6', @click='', :key='idx')
               v-list-tile-action: v-icon format_size
               v-list-tile-title Heading {{n}}
+        .editor-code-toolbar-item
+          svg.icons.is-18(role='img')
+            title Blockquote
+            use(xlink:href='#fa-quote-left')
       .editor-code-toolbar-group
         .editor-code-toolbar-item
           svg.icons.is-18(role='img')
@@ -58,14 +62,25 @@
         codemirror(ref='cm', v-model='code', :options='cmOptions', @ready="onCmReady")
       .editor-code-preview
         .editor-code-preview-title Preview
-        v-speed-dial(:hover='true', direction='left', transition='slide-y-reverse-transition', :fixed='true', :right='true', :bottom='true')
-          v-btn(color='green', fab, dark, slot='activator')
-            v-icon save
-            v-icon close
-          v-btn(color='red', fab, dark, small): v-icon not_interested
-          v-btn(color='orange', fab, dark, small): v-icon vpn_lock
-          v-btn(color='indigo', fab, dark, small): v-icon restore
-          v-btn(color='brown', fab, dark, small): v-icon archive
+      v-speed-dial(:open-on-hover='true', direction='top', transition='slide-y-reverse-transition', :fixed='true', :right='!isMobile', :left='isMobile', :bottom='true')
+        v-btn(color='blue', fab, dark, slot='activator')
+          v-icon add_circle
+          v-icon close
+        v-btn(color='teal', fab, dark): v-icon image
+        v-btn(color='pink', fab, dark): v-icon insert_drive_file
+        v-btn(color='red', fab, dark): v-icon play_circle_outline
+        v-btn(color='purple', fab, dark): v-icon multiline_chart
+        v-btn(color='indigo', fab, dark): v-icon functions
+      v-speed-dial(:open-on-hover='true', :direction='saveMenuDirection', transition='slide-x-reverse-transition', :fixed='true', :right='true', :top='!isMobile', :bottom='isMobile')
+        v-btn(color='blue', fab, dark, slot='activator')
+          v-icon more_horiz
+          v-icon close
+        v-btn(color='blue-grey', fab, dark): v-icon sort_by_alpha
+        v-btn(color='green', fab, dark): v-icon save
+        v-btn(color='red', fab, dark, small): v-icon not_interested
+        v-btn(color='orange', fab, dark, small): v-icon vpn_lock
+        v-btn(color='indigo', fab, dark, small): v-icon restore
+        v-btn(color='brown', fab, dark, small): v-icon archive
 
 </template>
 
@@ -125,6 +140,12 @@ export default {
   computed: {
     cm() {
       return this.$refs.cm.codemirror
+    },
+    isMobile() {
+      return this.$vuetify.breakpoint.smAndDown
+    },
+    saveMenuDirection() {
+      return this.isMobile ? 'top' : 'bottom'
     }
   },
   methods: {
@@ -170,6 +191,10 @@ export default {
       z-index: 2;
       text-transform: uppercase;
       font-size: .7rem;
+
+      @include until($tablet) {
+        display: none;
+      }
     }
   }
 
@@ -179,6 +204,10 @@ export default {
     position: relative;
     padding: 30px 1rem 1rem 1rem;
 
+    @include until($tablet) {
+      display: none;
+    }
+
     &-title {
       background-color: mc('blue', '100');
       border-bottom-right-radius: 5px;
@@ -204,6 +233,10 @@ export default {
     color: #FFF;
     display: flex;
 
+    @include until($tablet) {
+      justify-content: center;
+    }
+
     &-group {
       display: flex;
 
@@ -232,6 +265,10 @@ export default {
       &:hover {
         background-color: mc('blue', '600');
       }
+
+      @include until($tablet) {
+        width: 35px;
+      }
     }
 
     svg {

client/scss/pages/_welcome.scss

@@ -38,6 +38,10 @@
     filter: grayscale(100%) brightness(160%);
     margin-bottom: 3rem;
     z-index: 2;
+
+    @include until($tablet) {
+      width: 300px;
+    }
   }
   h1 {
     margin-bottom: 1rem;

client/svg/icons.svg

@@ -489,4 +489,8 @@
       <title id="code-title">Code</title>
       <path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"></path>
     </symbol>
+    <symbol id="fa-quote-left" viewBox="0 0 512 512">
+      <title id="quote-left-title">quote-left</title>
+      <path fill="currentColor" d="M0 432V304C0 166.982 63.772 67.676 193.827 32.828 209.052 28.748 224 40.265 224 56.027v33.895c0 10.057-6.228 19.133-15.687 22.55C142.316 136.312 104 181.946 104 256h72c26.51 0 48 21.49 48 48v128c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48zm336 48h128c26.51 0 48-21.49 48-48V304c0-26.51-21.49-48-48-48h-72c0-74.054 38.316-119.688 104.313-143.528C505.772 109.055 512 99.979 512 89.922V56.027c0-15.762-14.948-27.279-30.173-23.199C351.772 67.676 288 166.982 288 304v128c0 26.51 21.49 48 48 48z"></path>
+    </symbol>
 </svg>