commit 192b292a13e3184842bcfcb8a72a8857a5577ce8 Author: Ianko Djemerenov Date: Wed Oct 25 17:37:41 2017 +0300 initial commit diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..c1d5546 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "stage-2"], +} diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..89f65dc --- /dev/null +++ b/.eslintrc @@ -0,0 +1,9 @@ +{ + "extends": "standard", + "plugins": [ + "html" + ], + "env": { + "jasmine": true + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0bbce62 --- /dev/null +++ b/.gitignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +dist/build.js +dist/build.css +yarn-error.log +npm-debug.log + +# Editor directories and files +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln diff --git a/README.md b/README.md new file mode 100644 index 0000000..d2e7221 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# vue-dashboard + +> A Vue.js project with Kendo Vue wrappers + +## Build Setup + +``` bash +# install dependencies +npm install + +# serve with hot reload at localhost:8080 +npm run dev + +# build for production with minification +npm run build + +# lint all *.js and *.vue files +npm run lint + +# run unit tests +npm test +``` + +For more information see the [docs for vueify](https://github.com/vuejs/vueify). diff --git a/assets/issue-closed.png b/assets/issue-closed.png new file mode 100644 index 0000000..a574ef9 Binary files /dev/null and b/assets/issue-closed.png differ diff --git a/assets/issue-open.png b/assets/issue-open.png new file mode 100644 index 0000000..68a1f3f Binary files /dev/null and b/assets/issue-open.png differ diff --git a/assets/issueclosed.png b/assets/issueclosed.png new file mode 100644 index 0000000..a574ef9 Binary files /dev/null and b/assets/issueclosed.png differ diff --git a/assets/issueopen.png b/assets/issueopen.png new file mode 100644 index 0000000..68a1f3f Binary files /dev/null and b/assets/issueopen.png differ diff --git a/assets/login-left-bg.png b/assets/login-left-bg.png new file mode 100644 index 0000000..ea1335b Binary files /dev/null and b/assets/login-left-bg.png differ diff --git a/assets/login-right-bg.png b/assets/login-right-bg.png new file mode 100644 index 0000000..2a03712 Binary files /dev/null and b/assets/login-right-bg.png differ diff --git a/dist/.gitkeep b/dist/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..8081c7c Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8160013 --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + Kendo UI for Vue Dashboard Sample App + + + + + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..b338ae4 --- /dev/null +++ b/package.json @@ -0,0 +1,63 @@ +{ + "name": "vue-dashboard", + "version": "0.1.0", + "description": "A Vue.js project with Kendo Vue wrappers", + "author": "Progress", + "private": true, + "scripts": { + "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", + "serve": "http-server -o -c 1 -a localhost", + "dev": "npm-run-all --parallel watchify serve", + "lint": "eslint --ext .js,.vue src", + "build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js" + }, + "browserify": { + "transform": [ + "babelify", + "vueify" + ] + }, + "browser": { + "vue": "vue/dist/vue.common.js" + }, + "dependencies": { + "vue": "2.5.2", + "vue-router": "3.0.1", + "jquery": "3.2.1", + "@progress/kendo-ui": "2017.3.1018", + "bootstrap": "git://github.com/twbs/bootstrap.git#95f37e4c402df37db16781995ffa1592032df9c8", + "@progress/kendo-grid-vue-wrapper": "2017.3.1018", + "@progress/kendo-datasource-vue-wrapper": "2017.3.1018", + "@progress/kendo-buttons-vue-wrapper": "2017.3.1018", + "@progress/kendo-theme-bootstrap": "^2.8.0", + "@progress/kendo-theme-default": "^2.40.2", + "marked": "^0.3.6" + }, + "devDependencies": { + "bootstrap": "git://github.com/twbs/bootstrap.git#95f37e4c402df37db16781995ffa1592032df9c8", + "@progress/kendo-theme-bootstrap": "^2.8.0", + "@progress/kendo-theme-default": "^2.40.2", + "babel-core": "^6.0.0", + "babel-plugin-transform-runtime": "^6.0.0", + "babel-preset-es2015": "^6.0.0", + "babel-preset-stage-2": "^6.0.0", + "babel-runtime": "^6.0.0", + "babelify": "^7.2.0", + "browserify": "^13.1.0", + "browserify-hmr": "^0.3.1", + "cross-env": "^2.0.0", + "envify": "^3.4.1", + "eslint": "^3.3.0", + "eslint-config-standard": "^5.3.5", + "eslint-plugin-html": "^1.5.2", + "eslint-plugin-promise": "^2.0.1", + "eslint-plugin-standard": "^2.0.0", + "http-server": "^0.9.0", + "node-sass": "^4.5.3", + "npm-run-all": "^2.3.0", + "proxyquireify": "^3.0.1", + "uglify-js": "^2.5.0", + "vueify": "^9.0.0", + "watchify": "^3.4.0" + } +} diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..3150427 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue new file mode 100644 index 0000000..63c2ef2 --- /dev/null +++ b/src/components/Dashboard.vue @@ -0,0 +1,118 @@ + + + \ No newline at end of file diff --git a/src/components/Hello.vue b/src/components/Hello.vue new file mode 100644 index 0000000..450d77b --- /dev/null +++ b/src/components/Hello.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/src/components/Issues.vue b/src/components/Issues.vue new file mode 100644 index 0000000..8a5d0a9 --- /dev/null +++ b/src/components/Issues.vue @@ -0,0 +1,157 @@ + + + \ No newline at end of file diff --git a/src/components/IssuesDataSource.vue b/src/components/IssuesDataSource.vue new file mode 100644 index 0000000..2cdb6c4 --- /dev/null +++ b/src/components/IssuesDataSource.vue @@ -0,0 +1,24 @@ + + + \ No newline at end of file diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue new file mode 100644 index 0000000..d53958e --- /dev/null +++ b/src/components/MainMenu.vue @@ -0,0 +1,56 @@ + + + + diff --git a/src/components/dashboard.scss b/src/components/dashboard.scss new file mode 100644 index 0000000..b71977c --- /dev/null +++ b/src/components/dashboard.scss @@ -0,0 +1,323 @@ +// Common + .k-hbox, + .k-vbox { + display: flex; + } + .k-ihbox, + .k-ivbox { + display: inline-flex; + } + .k-hbox, + .k-ihbox { + flex-direction: row; + } + .k-vbox, + .k-ivbox { + flex-direction: column; + } + .k-flex, + .k-spacer { + flex: 1; + } + + + // Undo + .k-widget .row, + .k-widget [class^="col-"] { + box-sizing: border-box; + } + html .k-widget, + html .k-tabstrip .k-content { + color: inherit; + } + + .k-chart { + border-width: 0; + } + + + + // Ng + kendo-tabstrip { + position: relative; + display: block; + } + + + + + // App + #app { + display: block; + + > .row { + min-height: 100vh; + align-items: stretch; + } + } + + + + + // Nav + #nav { + padding-left: $grid-gutter-width * 1.5; + padding-right: $grid-gutter-width * 1.5; + width: 320px; + box-sizing: border-box; + flex-basis: auto; + flex-grow: 0; + position: relative; + z-index: 2; + transform: translateX(0); + + #app-title { position: relative; } + #app-title::after { + content: ""; + width: $spacer * 1.5; + border-bottom: 2px solid $brand-primary; + position: absolute; + left: 0; + top: $font-size-h1 + $font-size-h2 + ( $spacer * 1.5 ); + } + + hr { border: 0; } + .h4 { + font-size: $font-size-xs; + font-weight: 400; + text-transform: uppercase; + opacity: .3; + } + + .nav-pills { + margin-left: -( $grid-gutter-width * 1.5 ); + margin-right: -( $grid-gutter-width * 1.5 ); + font-size: 1.125rem; + } + .nav-pills .nav-link { + padding-left: $grid-gutter-width * 1.5; + padding-right: $grid-gutter-width * 1.5; + } + .nav-pills .nav-link:not(.active) { + color: inherit; + } + } + #app-title { + margin: 0; + font-weight: normal; + text-transform: uppercase; + } + #app-subtitle { + margin: 0; + font-size: $font-size-xs; + font-weight: 100; + text-transform: uppercase; + opacity: .75; + } + #copy { + color: #9195a2; + font-size: $font-size-sm; + position: relative; + } + #copy::after { + content: ""; + width: $spacer * 1.5; + border-top: 2px solid; + position: absolute; + left: 0; + top: -( $spacer * 1.5 ); + } + + .top-bar { + padding: .25em; + font-size: 32px; + line-height: 1; + + &:before { content: "."; display: block; } + } + .nav-toggle { + padding: .25em; + background: inherit; + font-size: 32px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + z-index: 1000; + top: 0; + left: 100%; + cursor: pointer; + } + + + + @media (max-width: map-get($grid-breakpoints, md) ) { + #nav { + width: 320px; + max-width: none; + transform: translateX(-100%); + position: absolute; + top: 0; + left: 0; + bottom: 0; + box-shadow: 0 $spacer $spacer rgba( $brand-inverse, .5 ); + } + + #nav.expand { + transform: translateX(0); + } + } + + + + + // Main + main { + overflow: auto; + position: relative; + z-index: 1; + + + // Cards + .card {} + .card .card-header {} + } + + + + + // Dashboard + .dashboard { + display: block; + + + .card { + margin-top: $spacer * 1.5; + } + .card-block { + position: relative; + } + + + .k-tabstrip { + background: none; + } + .k-tabstrip .k-tabstrip-items { + position: absolute; + top: calc( 1.75em + 2px ); + right: 0; + z-index: 2; + } + .k-tabstrip .k-content { + margin: 0; + padding: 0; + border: 0; + background: none; + overflow: hidden; + } + + + .comp-label { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + strong { + font-size: 4em; + line-height: 1; + font-weight: 100; + display: block; + } + small { + font-size: .875em; + text-transform: uppercase; + display: block; + } + } + a { + -webkit-user-select: none; + cursor: pointer; + } + + + .active-issues {} + .closed-issues {} + .open-issues {} + .close-rate { + .k-chart { + padding-top: 6px; + } + } + + .issue-types { + overflow: hidden; + } + .issue-types .card-block { + max-width: 100%; + margin: auto; + } + .issue-types .chart-label { + margin: -1em 0 0; + white-space: nowrap; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + + + + // Issues + .issues { + display: block; + + + .badge { + margin-right: .5em; + } + + img { + max-width: 100%; + } + + .issue-status { + display: inline-block; + vertical-align: middle; + width: 16px; + height: 16px; + } + .issue-open { background-image: url( "assets/issue-open.png" ) } + .issue-closed { background-image: url( "assets/issue-closed.png" ) } + } + + + + + // Signin + .signin { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + box-sizing: border-box; + color: #ffffff; + background-color: #111111; + background-image: url( "assets/login-left-bg.png" ), url( "assets/login-right-bg.png" ); + background-position: left center, right bottom; + background-repeat: no-repeat; + display: flex; + align-items: center; + justify-content: center; + + #app-title { font-size: 4em; } + #app-subtitle { font-size: 1em; } + } + .signin-form { + width: 360px; + background-color: inherit; + } \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..eaf6990 --- /dev/null +++ b/src/main.js @@ -0,0 +1,42 @@ +// The following line loads the standalone build of Vue instead of the runtime-only build, +// so you don't have to do: import Vue from 'vue/dist/vue' +// This is done with the browser options. For the config, see package.json +import Vue from 'vue' +import Router from 'vue-router' +import App from './App.vue' +import Dashboard from './components/Dashboard.vue' +import Issues from './components/Issues.vue' + +import '@progress/kendo-ui' +import { KendoButtonGroup, KendoButtonsInstaller } from '@progress/kendo-buttons-vue-wrapper' +import { KendoDataSource, KendoDataSourceInstaller } from '@progress/kendo-datasource-vue-wrapper' +import { KendoGrid, KendoGridInstaller } from '@progress/kendo-grid-vue-wrapper' + +Vue.use(Router) +Vue.use(KendoButtonsInstaller) +Vue.use(KendoGridInstaller) +Vue.use(KendoDataSourceInstaller) + +const routes = [ + { path: '/', component: Dashboard }, + { path: '/dashboard', component: Dashboard }, + { path: '/issues', component: Issues }, + { path: '/profile', component: Issues }, + { path: '/signout', component: Issues } +] + +const router = new Router({ + routes, + linkActiveClass: 'active' +}) + +new Vue({ // eslint-disable-line no-new + el: '#app', + render: (h) => h(App), + router, + components: { + KendoButtonGroup, + KendoDataSource, + KendoGrid + } +}) diff --git a/src/shared/custom.scss b/src/shared/custom.scss new file mode 100644 index 0000000..e938930 --- /dev/null +++ b/src/shared/custom.scss @@ -0,0 +1,106 @@ +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-flex: true; +$enable-rounded: true; +$enable-shadows: false; +$enable-gradients: false; +$enable-transitions: false; +$enable-hover-media-query: false; +$enable-grid-classes: true; +$enable-print-styles: false; + + + + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12; +$grid-gutter-width: 20px; + + + + +// Colors +// +// Grayscale and brand colors for use across Bootstrap. + +$gray-dark: #252830; +$gray: #55595c; +$gray-light: #818a91; +$gray-lighter: #eceeef; +$gray-lightest: #f7f7f9; + +$brand-primary: #1ca8dd; +$brand-success: #27c46d; +$brand-info: #52c3d3; +$brand-warning: #ff9966; +$brand-danger: #cf3257; +$brand-inverse: $gray-dark; + + + + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +$font-family-serif: Georgia, "Times New Roman", Times, serif; +$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +$font-family-base: $font-family-sans-serif; + +// Pixel value used to responsively scale all typography. Applied to the `` element. +$font-size-root: 14px; + +$font-size-base: 1rem; +$font-size-lg: 1.25rem; +$font-size-sm: .875rem; +$font-size-xs: .75rem; + +$line-height-base: 1.5; + +$font-size-h1: 1.75rem; +$font-size-h2: 1.25rem; +$font-size-h3: 1.25rem; +$font-size-h4: 1.25rem; +$font-size-h5: 1.25rem; +$font-size-h6: 1rem; + + + + +// Body +// +// Settings for the `` element. + +$body-bg: #fbfbfb; +$body-color: $gray-dark; + + +// Components +// +// Define common padding and border radius sizes and more. + +$component-active-color: #fff; +$component-active-bg: $brand-primary; + + +// Navs + +$nav-pills-border-radius: 0; +$nav-pills-active-link-color: #111111; +$nav-pills-active-link-bg: $component-active-bg; + + +// Cards + +$card-spacer-x: 1.25rem; +$card-spacer-y: .75rem; +$card-border-width: 1px; +$card-border-color: #e8e8e8; +$card-cap-bg: #ffffff; +$card-bg: #fff; \ No newline at end of file