feat: insert content speeddial + mobile optimizations
This commit is contained in:
NGPixel
parent
c6e8120912
commit
c9b6d0ee36
@ -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, {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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-btn(color='green', fab, dark, slot='activator')
|
||||
v-icon save
|
||||
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
|
||||
@ -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 {
|
||||
|
||||
@ -38,6 +38,10 @@
|
||||
filter: grayscale(100%) brightness(160%);
|
||||
margin-bottom: 3rem;
|
||||
z-index: 2;
|
||||
|
||||
@include until($tablet) {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 55 KiB |
77
package.json
77
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-tools": "2.19.0",
|
||||
"graphql": "0.13.1",
|
||||
"graphql-tools": "2.21.0",
|
||||
"highlight.js": "9.12.0",
|
||||
"i18next": "10.3.0",
|
||||
"i18next-express-middleware": "1.0.9",
|
||||
"i18next": "10.4.1",
|
||||
"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",
|
||||
"markdown-it": "8.4.0",
|
||||
"lodash": "4.17.5",
|
||||
"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",
|
||||
"mime-types": "2.1.17",
|
||||
"mathjax-node": "2.0.1",
|
||||
"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",
|
||||
"autoprefixer": "7.2.5",
|
||||
"apollo-link-batch-http": "1.0.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-junit": "3.4.1",
|
||||
"jest": "22.3.0",
|
||||
"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",
|
||||
"vee-validate": "2.0.3",
|
||||
"uglifyjs-webpack-plugin": "1.2.0",
|
||||
"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-bundle-analyzer": "2.9.2",
|
||||
"webpack-dev-middleware": "2.0.4",
|
||||
"webpack": "3.11.0",
|
||||
"webpack-bundle-analyzer": "2.10.0",
|
||||
"webpack-dev-middleware": "2.0.5",
|
||||
"webpack-hot-middleware": "2.21.0",
|
||||
"webpack-merge": "4.1.1",
|
||||
"whatwg-fetch": "2.0.3",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user