richard
/
wiki
mirror of https://github.com/Requarks/wiki.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: insert content speeddial + mobile optimizations

pull/621/head
NGPixel 6 years ago
parent
c6e8120912
commit
c9b6d0ee36
7 changed files with 588 additions and 448 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      client/js/app.js
  2. 18
      client/js/compatibility.js
  3. 55
      client/js/components/editor-code.vue
  4. 4
      client/scss/pages/_welcome.scss
  5. 4
      client/svg/icons.svg
  6. 77
      package.json
  7. 876
      yarn.lock

2
client/js/app.js
View File

@ -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, {

18
client/js/compatibility.js
View File

@ -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

55
client/js/components/editor-code.vue
View File

@ -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 {

4
client/scss/pages/_welcome.scss
View File

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

4
client/svg/icons.svg
View File

@ -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>

77
package.json
View File

@ -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",

876
yarn.lock
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save