From 30b62f74554e0a864c8e21a4401c748aa0c91f2d Mon Sep 17 00:00:00 2001 From: Wlad Date: Mon, 31 Jul 2017 02:22:30 +0200 Subject: [PATCH] added basic layout and some items. Working on robust modal system --- index.html | 15 ++++++-- package.json | 1 + src/App.vue | 42 +++++++++++++++++++--- src/assets/sass/components/_variables.scss | 2 ++ src/assets/sass/main.scss | 26 ++++++++++++-- src/main.js | 12 ++++++- src/routes/routes.js | 10 +++--- 7 files changed, 94 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 06b5c4c..949db9f 100644 --- a/index.html +++ b/index.html @@ -7,15 +7,26 @@ Vue Basic Template - + + + +
-
+ + + + + + + + + diff --git a/package.json b/package.json index 74f9031..886b941 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "test": "npm run unit && npm run e2e" }, "dependencies": { + "portal-vue": "^1.1.0", "vue": "^2.3.0", "vue-clickaway": "^2.1.0", "vue-router": "^2.2.0", diff --git a/src/App.vue b/src/App.vue index 2ea3138..c7a18f7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,11 +1,45 @@ - + diff --git a/src/assets/sass/components/_variables.scss b/src/assets/sass/components/_variables.scss index e69de29..a0f7ada 100644 --- a/src/assets/sass/components/_variables.scss +++ b/src/assets/sass/components/_variables.scss @@ -0,0 +1,2 @@ +$main-background-color: #FFF; +$main-font-color: #222; \ No newline at end of file diff --git a/src/assets/sass/main.scss b/src/assets/sass/main.scss index 42a5765..a1a54c0 100644 --- a/src/assets/sass/main.scss +++ b/src/assets/sass/main.scss @@ -1,9 +1,29 @@ @import "components/variables"; @import "components/mixins"; +* { + box-sizing: border-box; +} + +html, body { + min-height: 100vh; +} + body { - background-color: #eee; - text-align: center; - color: #222; + background-color: $main-background-color; + color: $main-font-color; font-family: sans-serif; +} + +.blur { + filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='6'); + -webkit-filter: url(#blur-filter); + filter: url(#blur-filter); + -webkit-filter: blur(6px); + filter: blur(6px); + transition: opacity .3s ease; +} + +.blurable { + transition: filter 160ms ease-in-out; } \ No newline at end of file diff --git a/src/main.js b/src/main.js index ef8af82..4979c78 100644 --- a/src/main.js +++ b/src/main.js @@ -26,9 +26,19 @@ const router = new VueRouter({ linkActiveClass: 'active' }) +// configure vuex store +const store = new Vuex.Store({ + state: { + selectedItems: [], + totalPrice: 0.0, + user: {} + } +}) + /* eslint-disable no-new */ new Vue({ el: '#app', render: h => h(App), - router + router, + store }) diff --git a/src/routes/routes.js b/src/routes/routes.js index feb703d..eb4374f 100644 --- a/src/routes/routes.js +++ b/src/routes/routes.js @@ -1,10 +1,12 @@ +import OxyShopList from '../components/Views/OxyShopList.vue' + const routes = [ - // { - // path: '/', - // component: COMPONENT_NAME, + { + path: '/', + component: OxyShopList // redirect: OPTIONAL_REDIRECT // children: [OPTINAL_CHILDREN] - // }, + } // Not Found example // { path: '*', component: NotFound } ]