vhad/vue-webshop
1
0
Fork 0
mirror of https://github.com/gosticks/vue-webshop.git synced 2025-10-16 12:05:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added basic layout and some items. Working on robust modal system

Browse Source
This commit is contained in:
Wlad 2017-07-31 02:22:30 +02:00
parent 86f4b74e14
commit 30b62f7455
7 changed files with 94 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -7,15 +7,26 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Vue Basic Template</title>
<!-- Viewport core CSS -->
<!-- Viewport core CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="static/css/normalize.css">
<link rel="stylesheet" href="static/css/skeleton.css">
<!-- Import icons -->
<link rel="stylesheet" href="static/css/linea-icons.css">
</head>
<body>
<div class="app-wrapper" id="app">
</div>
<!-- filters -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blur-svg">
<defs>
<filter id="blur-filter">
<feGaussianBlur stdDeviation="3"></feGaussianBlur>
</filter>
</defs>
</svg>
<!-- built files will be auto injected -->
</body>
</html>

1
package.json
View File

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

42
src/App.vue
View File

@ -1,11 +1,45 @@
<template>
<div>
<h1>Hello from basic vue template</h1>
<div class="app-wrapper blurable blur">
<div class="layout-wrapper">
<oxy-header></oxy-header>
<router-view></router-view>
</div>
<oxy-footer class="footer-wrapper"></oxy-footer>
</div>
</template>
<script>
export default {}
import OxyFooter from './components/GeneralViews/OxyFooter.vue'
import OxyHeader from './components/GeneralViews/OxyHeader.vue'
export default {
components: {
OxyFooter,
OxyHeader
},
data () {
return {
showCart: true
}
}
}
</script>
<style lang="scss"></style>
<style lang="scss">
.layout-wrapper, .app-wrapper {
min-height: 100vh;
}
.layout-wrapper {
padding-bottom: 250px;
}
.footer-wrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
}
</style>

2
src/assets/sass/components/_variables.scss
View File

@ -0,0 +1,2 @@
$main-background-color: #FFF;
$main-font-color: #222;

26
src/assets/sass/main.scss
View File

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

12
src/main.js
View File

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

10
src/routes/routes.js
View File

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