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 @@
-// =======================================
+require('babel-polyfill')
-// 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')
-}
 
 // =======================================
 // 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,10 +62,21 @@
         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-speed-dial(:open-on-hover='true', direction='top', transition='slide-y-reverse-transition', :fixed='true', :right='!isMobile', :left='isMobile', :bottom='true')
-          v-btn(color='green', fab, dark, slot='activator')
+        v-btn(color='blue', fab, dark, slot='activator')
-            v-icon save
+          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
@@ -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>

package.json

@@ -45,10 +45,10 @@
     "bluebird": "3.5.1",
     "body-parser": "1.18.2",
     "bugsnag": "2.1.3",
-    "bull": "3.3.8",
+    "bull": "3.3.9",
     "cheerio": "1.0.0-rc.2",
     "child-process-promise": "2.2.1",
-    "chokidar": "2.0.0",
+    "chokidar": "2.0.2",
     "compression": "1.7.1",
     "connect-redis": "3.3.3",
     "cookie-parser": "1.4.3",
@@ -61,15 +61,15 @@
     "express-brute": "1.0.1",
     "express-brute-redis": "0.0.1",
     "express-session": "1.15.6",
-    "file-type": "7.5.0",
+    "file-type": "7.6.0",
     "filesize.js": "1.0.2",
     "follow-redirects": "1.4.1",
     "fs-extra": "5.0.0",
-    "graphql": "0.12.3",
+    "graphql": "0.13.1",
-    "graphql-tools": "2.19.0",
+    "graphql-tools": "2.21.0",
     "highlight.js": "9.12.0",
-    "i18next": "10.3.0",
+    "i18next": "10.4.1",
-    "i18next-express-middleware": "1.0.9",
+    "i18next-express-middleware": "1.0.10",
     "i18next-localstorage-cache": "1.1.1",
     "i18next-node-fs-backend": "1.0.0",
     "image-size": "0.6.2",
@@ -77,8 +77,8 @@
     "js-yaml": "3.10.0",
     "jsonwebtoken": "8.1.1",
     "klaw": "2.1.1",
-    "lodash": "4.17.4",
+    "lodash": "4.17.5",
-    "markdown-it": "8.4.0",
+    "markdown-it": "8.4.1",
     "markdown-it-abbr": "1.0.4",
     "markdown-it-anchor": "4.0.0",
     "markdown-it-attrs": "1.2.1",
@@ -88,14 +88,14 @@
     "markdown-it-footnote": "3.0.1",
     "markdown-it-mathjax": "2.0.0",
     "markdown-it-task-lists": "2.1.0",
-    "mathjax-node": "1.3.0",
+    "mathjax-node": "2.0.1",
-    "mime-types": "2.1.17",
+    "mime-types": "2.1.18",
     "moment": "2.20.1",
     "moment-timezone": "0.5.14",
-    "mongodb": "3.0.1",
+    "mongodb": "3.0.2",
     "multer": "1.3.0",
     "node-2fa": "1.1.2",
-    "ora": "1.3.0",
+    "ora": "1.4.0",
     "passport": "0.4.0",
     "passport-auth0": "0.6.1",
     "passport-azure-ad-oauth2": "0.0.4",
@@ -112,7 +112,7 @@
     "passport-windowslive": "1.0.2",
     "pg": "6.4.2",
     "pg-hstore": "2.3.2",
-    "pg-promise": "7.4.1",
+    "pg-promise": "7.5.3",
     "pm2": "2.9.3",
     "pug": "2.0.0-rc.4",
     "qr-image": "3.2.0",
@@ -121,10 +121,10 @@
     "request": "2.83.0",
     "request-promise": "4.2.2",
     "semver": "5.5.0",
-    "sequelize": "4.32.2",
+    "sequelize": "4.33.4",
     "serve-favicon": "2.4.5",
     "uuid": "3.2.1",
-    "validator": "9.3.0",
+    "validator": "9.4.0",
     "validator-as-promised": "1.0.2",
     "winston": "2.4.0",
     "yargs": "11.0.0"
@@ -132,44 +132,45 @@
   "devDependencies": {
     "@glimpse/glimpse": "0.22.15",
     "@panter/vue-i18next": "0.9.1",
-    "apollo-client-preset": "1.0.6",
+    "apollo-client-preset": "1.0.8",
     "apollo-fetch": "0.7.0",
-    "apollo-link-batch-http": "1.0.4",
+    "apollo-link-batch-http": "1.0.5",
-    "autoprefixer": "7.2.5",
+    "autoprefixer": "8.0.0",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
     "babel-eslint": "8.2.1",
-    "babel-jest": "22.1.0",
+    "babel-jest": "22.2.2",
     "babel-loader": "7.1.2",
     "babel-plugin-graphql-tag": "1.3.1",
     "babel-plugin-lodash": "3.3.2",
     "babel-plugin-transform-imports": "1.4.1",
+    "babel-polyfill": "6.26.0",
     "babel-preset-env": "1.6.1",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
-    "brace": "0.11.0",
+    "brace": "0.11.1",
     "cache-loader": "1.2.0",
     "clean-webpack-plugin": "0.1.18",
     "colors": "1.1.2",
-    "copy-webpack-plugin": "4.3.1",
+    "copy-webpack-plugin": "4.4.1",
     "css-loader": "0.28.9",
     "cssnano": "4.0.0-rc.2",
     "duplicate-package-checker-webpack-plugin": "2.1.0",
-    "eslint": "4.16.0",
+    "eslint": "4.18.0",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "11.0.0-beta.0",
     "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-node": "5.2.1",
+    "eslint-plugin-node": "6.0.0",
     "eslint-plugin-promise": "3.6.0",
     "eslint-plugin-standard": "3.0.1",
-    "eslint-plugin-vue": "4.2.0",
+    "eslint-plugin-vue": "4.2.2",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.6",
-    "graphql-tag": "^2.6.1",
+    "graphql-tag": "^2.7.3",
     "hammerjs": "2.0.8",
     "i18next-xhr-backend": "1.5.1",
-    "jest": "22.1.4",
+    "jest": "22.3.0",
-    "jest-junit": "3.4.1",
+    "jest-junit": "3.6.0",
     "js-cookie": "2.2.0",
     "lodash-webpack-plugin": "0.11.4",
     "name-all-modules-plugin": "1.0.1",
@@ -177,32 +178,32 @@
     "offline-plugin": "4.9.0",
     "postcss-flexbugs-fixes": "3.3.0",
     "postcss-flexibility": "2.0.0",
-    "postcss-loader": "2.0.10",
+    "postcss-loader": "2.1.0",
     "postcss-selector-parser": "3.1.1",
     "pug-lint": "2.5.0",
     "raw-loader": "0.5.1",
     "sass-loader": "6.0.6",
-    "sass-resources-loader": "1.3.1",
+    "sass-resources-loader": "1.3.2",
     "simple-progress-webpack-plugin": "1.0.4",
-    "style-loader": "0.20.1",
+    "style-loader": "0.20.2",
     "stylus": "0.54.5",
     "stylus-loader": "3.0.1",
     "twemoji-awesome": "1.0.6",
-    "uglifyjs-webpack-plugin": "1.1.6",
+    "uglifyjs-webpack-plugin": "1.2.0",
-    "vee-validate": "2.0.3",
+    "vee-validate": "2.0.4",
     "vue": "2.5.13",
     "vue-clipboards": "1.2.1",
     "vue-codemirror": "4.0.3",
     "vue-hot-reload-api": "2.2.4",
-    "vue-loader": "13.7.0",
+    "vue-loader": "14.1.1",
     "vue-simple-breakpoints": "1.0.3",
     "vue-template-compiler": "2.5.13",
-    "vuetify": "0.17.7",
+    "vuetify": "1.0.1",
     "vuex": "3.0.1",
     "vuex-persistedstate": "2.4.2",
-    "webpack": "3.10.0",
+    "webpack": "3.11.0",
-    "webpack-bundle-analyzer": "2.9.2",
+    "webpack-bundle-analyzer": "2.10.0",
-    "webpack-dev-middleware": "2.0.4",
+    "webpack-dev-middleware": "2.0.5",
     "webpack-hot-middleware": "2.21.0",
     "webpack-merge": "4.1.1",
     "whatwg-fetch": "2.0.3",