-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
329 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| diff --git a/webpack.config.js b/webpack.config.js | ||
| index 63ea46e..7841ab2 100644 | ||
| --- a/webpack.config.js | ||
| +++ b/webpack.config.js | ||
| @@ -1,4 +1,5 @@ | ||
| var Encore = require('@symfony/webpack-encore'); | ||
| +var path = require('path'); | ||
|
|
||
| // Manually configure the runtime environment if not already configured yet by the "encore" command. | ||
| // It's useful when you use tools that rely on webpack.config.js file. | ||
| @@ -14,6 +15,12 @@ Encore | ||
| // only needed for CDN's or sub-directory deploy | ||
| //.setManifestKeyPrefix('build/') | ||
|
|
||
| + // This is our alias to the root vue components dir | ||
| + .addAliases({ | ||
| + '@': path.resolve(__dirname, 'assets/js'), | ||
| + styles: path.resolve(__dirname, 'assets/scss'), | ||
| + }) | ||
| + | ||
| /* | ||
| * ENTRY CONFIG | ||
| * |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| diff --git a/assets/js/components/catalog.vue b/assets/js/components/catalog.vue | ||
| new file mode 100644 | ||
| index 0000000..c5ae437 | ||
| --- /dev/null | ||
| +++ b/assets/js/components/catalog.vue | ||
| @@ -0,0 +1,27 @@ | ||
| +<template> | ||
| + <div> | ||
| + <div class="row"> | ||
| + <h2 class="p-3"> | ||
| + Products | ||
| + </h2> | ||
| + </div> | ||
| + | ||
| + <div class="row"> | ||
| + <legend-component :title="legend" /> | ||
| + </div> | ||
| + </div> | ||
| +</template> | ||
| + | ||
| +<script> | ||
| +import LegendComponent from './legend'; | ||
| + | ||
| +export default { | ||
| + name: 'Catalog', | ||
| + components: { | ||
| + LegendComponent, | ||
| + }, | ||
| + data: () => ({ | ||
| + legend: 'Shipping takes 10-12 weeks, and products probably won\'t work', | ||
| + }), | ||
| +}; | ||
| +</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| diff --git a/assets/js/components/sidebar.vue b/assets/js/components/sidebar.vue | ||
| new file mode 100644 | ||
| index 0000000..5d53b96 | ||
| --- /dev/null | ||
| +++ b/assets/js/components/sidebar.vue | ||
| @@ -0,0 +1,49 @@ | ||
| +<template> | ||
| + <div :class="[$style.component, 'p-3', 'mt-5', 'mb-5']"> | ||
| + <h5 class="text-center"> | ||
| + Categories | ||
| + </h5> | ||
| + | ||
| + <ul class="nav flex-column"> | ||
| + <li class="nav-item"> | ||
| + <a | ||
| + class="nav-link" | ||
| + href="/" | ||
| + >All Products</a> | ||
| + </li> | ||
| + </ul> | ||
| + </div> | ||
| +</template> | ||
| + | ||
| +<script> | ||
| +export default { | ||
| + name: 'Sidebar', | ||
| +}; | ||
| +</script> | ||
| + | ||
| +<style lang="scss" module> | ||
| +@import '../../scss/components/light-component'; | ||
| + | ||
| +.component { | ||
| + @include light-component; | ||
| + margin-top: 65px; | ||
| + | ||
| + ul { | ||
| + border-bottom: 1px solid $light-component-border; | ||
| + margin-bottom: 20px; | ||
| + padding-bottom: 10px; | ||
| + | ||
| + li a { | ||
| + color: #000; | ||
| + } | ||
| + | ||
| + li a:hover { | ||
| + background: $blue-component-link-hover; | ||
| + } | ||
| + | ||
| + li a.selected { | ||
| + background: $light-component-border; | ||
| + } | ||
| + } | ||
| +} | ||
| +</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| diff --git a/assets/js/app.js b/assets/js/app.js | ||
| index 5a9d6ce..88da001 100644 | ||
| --- a/assets/js/app.js | ||
| +++ b/assets/js/app.js | ||
| @@ -6,4 +6,4 @@ | ||
| */ | ||
|
|
||
| // any CSS you import will output into a single css file (app.css in this case) | ||
| -import '../scss/app.scss'; | ||
| +import 'styles/app.scss'; | ||
| diff --git a/assets/js/components/catalog.vue b/assets/js/components/catalog.vue | ||
| index c5ae437..8390a30 100644 | ||
| --- a/assets/js/components/catalog.vue | ||
| +++ b/assets/js/components/catalog.vue | ||
| @@ -13,7 +13,7 @@ | ||
| </template> | ||
|
|
||
| <script> | ||
| -import LegendComponent from './legend'; | ||
| +import LegendComponent from '@/components/legend'; | ||
|
|
||
| export default { | ||
| name: 'Catalog', | ||
| diff --git a/assets/js/components/sidebar.vue b/assets/js/components/sidebar.vue | ||
| index 5d53b96..31793e1 100644 | ||
| --- a/assets/js/components/sidebar.vue | ||
| +++ b/assets/js/components/sidebar.vue | ||
| @@ -22,7 +22,7 @@ export default { | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| -@import '../../scss/components/light-component'; | ||
| +@import '~styles/components/light-component'; | ||
|
|
||
| .component { | ||
| @include light-component; | ||
| diff --git a/assets/js/products.js b/assets/js/products.js | ||
| index 290a2d1..8597d51 100644 | ||
| --- a/assets/js/products.js | ||
| +++ b/assets/js/products.js | ||
| @@ -1,5 +1,5 @@ | ||
| import Vue from 'vue'; | ||
| -import App from './products.vue'; | ||
| +import App from '@/products.vue'; | ||
|
|
||
| new Vue({ | ||
| render: (h) => h(App), | ||
| diff --git a/assets/js/products.vue b/assets/js/products.vue | ||
| index 4861a96..7408b68 100644 | ||
| --- a/assets/js/products.vue | ||
| +++ b/assets/js/products.vue | ||
| @@ -13,8 +13,8 @@ | ||
| </template> | ||
|
|
||
| <script> | ||
| -import CatalogComponent from './components/catalog'; | ||
| -import SidebarComponent from './components/sidebar'; | ||
| +import CatalogComponent from '@/components/catalog'; | ||
| +import SidebarComponent from '@/components/sidebar'; | ||
|
|
||
| export default { | ||
| name: 'Products', | ||
| diff --git a/assets/scss/app.scss b/assets/scss/app.scss | ||
| index 8197ff3..21e2e7a 100644 | ||
| --- a/assets/scss/app.scss | ||
| +++ b/assets/scss/app.scss | ||
| @@ -1,6 +1,6 @@ | ||
| -@import './components/black-component'; | ||
| -@import './components/light-component'; | ||
| -@import './variables/colors'; | ||
| +@import '~styles/components/black-component'; | ||
| +@import '~styles/components/light-component'; | ||
| +@import '~styles/variables/colors'; | ||
| @import '~bootstrap'; | ||
|
|
||
| .header { | ||
| diff --git a/assets/scss/components/black-component.scss b/assets/scss/components/black-component.scss | ||
| index dc43766..a658b27 100644 | ||
| --- a/assets/scss/components/black-component.scss | ||
| +++ b/assets/scss/components/black-component.scss | ||
| @@ -1,4 +1,4 @@ | ||
| -@import '../variables/colors'; | ||
| +@import '~styles/variables/colors'; | ||
|
|
||
| @mixin black-component { | ||
| background-color: $black-component-background; | ||
| diff --git a/assets/scss/components/light-component.scss b/assets/scss/components/light-component.scss | ||
| index 814d931..154982a 100644 | ||
| --- a/assets/scss/components/light-component.scss | ||
| +++ b/assets/scss/components/light-component.scss | ||
| @@ -1,4 +1,4 @@ | ||
| -@import '../variables/colors'; | ||
| +@import '~styles/variables/colors'; | ||
|
|
||
| @mixin light-component { | ||
| border: 1px solid $light-component-border; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| diff --git a/assets/js/products.vue b/assets/js/products.vue | ||
| index 2b8212c..4861a96 100644 | ||
| --- a/assets/js/products.vue | ||
| +++ b/assets/js/products.vue | ||
| @@ -2,74 +2,25 @@ | ||
| <div class="container-fluid"> | ||
| <div class="row row-no-wrap"> | ||
| <aside class="col-xs-12 col-lg-3"> | ||
| - <div :class="[$style.aside, 'p-3', 'mt-5', 'mb-5']"> | ||
| - <h5 class="text-center"> | ||
| - Categories | ||
| - </h5> | ||
| - | ||
| - <ul class="nav flex-column"> | ||
| - <li class="nav-item"> | ||
| - <a | ||
| - class="nav-link" | ||
| - href="/" | ||
| - >All Products</a> | ||
| - </li> | ||
| - </ul> | ||
| - </div> | ||
| + <sidebar-component /> | ||
| </aside> | ||
|
|
||
| <div class="col-xs-12 col-lg-9"> | ||
| - <div class="row"> | ||
| - <h2 class="p-3"> | ||
| - Products | ||
| - </h2> | ||
| - </div> | ||
| - | ||
| - <div class="row"> | ||
| - <legend-component :title="legend" /> | ||
| - </div> | ||
| + <catalog-component /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| -import LegendComponent from './components/legend'; | ||
| +import CatalogComponent from './components/catalog'; | ||
| +import SidebarComponent from './components/sidebar'; | ||
|
|
||
| export default { | ||
| name: 'Products', | ||
| components: { | ||
| - LegendComponent, | ||
| + CatalogComponent, | ||
| + SidebarComponent, | ||
| }, | ||
| - data: () => ({ | ||
| - legend: 'Shipping takes 10-12 weeks, and products probably won\'t work', | ||
| - }), | ||
| }; | ||
| </script> | ||
| - | ||
| -<style lang="scss" module> | ||
| -@import '../scss/components/light-component'; | ||
| - | ||
| -.aside { | ||
| - @include light-component; | ||
| - margin-top: 65px; | ||
| - | ||
| - ul { | ||
| - border-bottom: 1px solid $light-component-border; | ||
| - margin-bottom: 20px; | ||
| - padding-bottom: 10px; | ||
| - | ||
| - li a { | ||
| - color: #000; | ||
| - } | ||
| - | ||
| - li a:hover { | ||
| - background: $blue-component-link-hover; | ||
| - } | ||
| - | ||
| - li a.selected { | ||
| - background: $light-component-border; | ||
| - } | ||
| - } | ||
| -} | ||
| -</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters