-
Notifications
You must be signed in to change notification settings - Fork 0
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
9 changed files
with
821 additions
and
83 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
Large diffs are not rendered by default.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -1,32 +1,26 @@ | ||
| <template> | ||
| <div id="app"> | ||
| <div id="nav"> | ||
| <m-theme> | ||
| <!-- <div class="nav"> | ||
| <router-link to="/">Home</router-link> | | ||
| <router-link to="/about">About</router-link> | ||
| </div> | ||
| <router-view/> | ||
| </div> --> | ||
| <router-view/> | ||
| </m-theme> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| #app { | ||
| font-family: Avenir, Helvetica, Arial, sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| text-align: center; | ||
| color: #2c3e50; | ||
| } | ||
| <script lang="ts"> | ||
| import { Vue } from 'vue-property-decorator' | ||
| // @ts-ignore | ||
| import Theme from 'material-components-vue/dist/theme' | ||
| #nav { | ||
| padding: 30px; | ||
| Vue.use(Theme) | ||
| a { | ||
| font-weight: bold; | ||
| color: #2c3e50; | ||
| export default { } | ||
| </script> | ||
|
|
||
| &.router-link-exact-active { | ||
| color: #42b983; | ||
| } | ||
| } | ||
| } | ||
| <style lang="scss"> | ||
| @import "@/styles/styles"; | ||
| </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
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,26 @@ | ||
| @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500"); | ||
| @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); | ||
|
|
||
| $mdc-theme-primary: #2196f3; | ||
| $mdc-theme-secondary: #ff1744; | ||
| $mdc-theme-background: #f5f5f5; | ||
| @import "material-components-vue/dist/theme/styles"; | ||
|
|
||
| #app { | ||
| font-family: Avenir, Helvetica, Arial, sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
|
|
||
| .nav { | ||
| padding: 30px; | ||
|
|
||
| a { | ||
| font-weight: bold; | ||
| color: #2c3e50; | ||
|
|
||
| &.router-link-exact-active { | ||
| color: #42b983; | ||
| } | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| <template> | ||
| <div class="about"> | ||
| <h1>This is an about page</h1> | ||
| <p>This is the about page</p> | ||
| </div> | ||
| </template> |
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 |
|---|---|---|
| @@ -1,18 +1,151 @@ | ||
| <template> | ||
| <div class="home"> | ||
| <img alt="Vue logo" src="../assets/logo.png"> | ||
| <HelloWorld msg="Welcome to Your Vue.js App"/> | ||
| </div> | ||
| <m-typography class="home"> | ||
| <m-typo-headline :level="2"> | ||
| Sistema ANDON | ||
| </m-typo-headline> | ||
| <div class="selection"> | ||
| <m-select v-model="plant" id="select-plant" enhanced> | ||
| <template slot="default"> | ||
| <m-list-item data-value="planta1">Planta 1</m-list-item> | ||
| <m-list-item data-value="planta2">Planta 2</m-list-item> | ||
| <m-list-item data-value="planta3">Planta 3</m-list-item> | ||
| </template> | ||
| <m-floating-label for="select-plant" id="select-plant--label" slot="label">Planta</m-floating-label> | ||
| <m-line-ripple slot="line"/> | ||
| </m-select> | ||
| <m-select v-model="machine" id="select-machine" enhanced> | ||
| <template slot="default"> | ||
| <m-list-item data-value="machine1">Maquina 1</m-list-item> | ||
| <m-list-item data-value="machine2">Maquina 2</m-list-item> | ||
| <m-list-item data-value="machine3">Maquina 3</m-list-item> | ||
| </template> | ||
| <m-floating-label for="select-machine" id="select-machine--label" slot="label">Máquina</m-floating-label> | ||
| <m-line-ripple slot="line"/> | ||
| </m-select> | ||
| <m-text-field v-model="message" id="select--message" outlined> | ||
| <m-floating-label for="select--message">Mensaje</m-floating-label> | ||
| </m-text-field> | ||
| </div> | ||
| <div class="area"> | ||
| <m-card class="area--card card"> | ||
| <m-icon-button icon="group_work"></m-icon-button> | ||
| <m-typo-headline :level="6">HSE</m-typo-headline> | ||
| </m-card> | ||
| <m-card class="area--card card"> | ||
| <m-icon-button icon="supervisor_account"></m-icon-button> | ||
| <m-typo-headline :level="6">Operaciones</m-typo-headline> | ||
| </m-card> | ||
| <m-card class="area--card card"> | ||
| <m-icon-button icon="build"></m-icon-button> | ||
| <m-typo-headline :level="6">Herramentales</m-typo-headline> | ||
| </m-card> | ||
| <m-card class="area--card card"> | ||
| <m-icon-button icon="construction"></m-icon-button> | ||
| <m-typo-headline :level="6">Mantenimiento</m-typo-headline> | ||
| </m-card> | ||
| <m-card class="area--card card"> | ||
| <m-icon-button icon="local_police"></m-icon-button> | ||
| <m-typo-headline :level="6">Calidad</m-typo-headline> | ||
| </m-card> | ||
| </div> | ||
| </m-typography> | ||
| </template> | ||
|
|
||
| <script> | ||
| // @ is an alias to /src | ||
| import HelloWorld from '@/components/HelloWorld.vue' | ||
| <script lang="ts"> | ||
| import { Component, Vue } from 'vue-property-decorator' | ||
| export default { | ||
| name: 'Home', | ||
| components: { | ||
| HelloWorld | ||
| } | ||
| // @ts-ignore | ||
| import Typography from 'material-components-vue/dist/typography' | ||
| // @ts-ignore | ||
| import Select from 'material-components-vue/dist/select' | ||
| // @ts-ignore | ||
| import List from 'material-components-vue/dist/list' | ||
| // @ts-ignore | ||
| import TextField from 'material-components-vue/dist/text-field' | ||
| // @ts-ignore | ||
| import Card from 'material-components-vue/dist/card' | ||
| // @ts-ignore | ||
| import IconButton from 'material-components-vue/dist/icon-button' | ||
| // @ts-ignore | ||
| import FloatingLabel from 'material-components-vue/dist/floating-label' | ||
| // @ts-ignore | ||
| import LineRipple from 'material-components-vue/dist/line-ripple' | ||
| Vue.use(Typography) | ||
| Vue.use(Select) | ||
| Vue.use(List) | ||
| Vue.use(TextField) | ||
| Vue.use(Card) | ||
| Vue.use(IconButton) | ||
| Vue.use(FloatingLabel) | ||
| Vue.use(LineRipple) | ||
| @Component | ||
| export default class Home extends Vue { | ||
| private plant = '' | ||
| private machine = '' | ||
| private message = '' | ||
| private hseToggle = false | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| @import "material-components-vue/dist/typography/styles"; | ||
| @import "material-components-vue/dist/select/styles"; | ||
| @import "material-components-vue/dist/list/styles"; | ||
| @import "material-components-vue/dist/text-field/styles"; | ||
| @import "material-components-vue/dist/card/styles"; | ||
| @import "material-components-vue/dist/icon-button/styles"; | ||
| @import "material-components-vue/dist/floating-label/styles"; | ||
| @import "material-components-vue/dist/line-ripple/styles"; | ||
| .selection { | ||
| margin-top: 36px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| width: 100%; | ||
| flex-wrap: wrap; | ||
| > * { | ||
| margin-right: 8px; | ||
| margin-bottom: 8px; | ||
| flex-grow: 1; | ||
| } | ||
| > :last-child { | ||
| flex-grow: 2; | ||
| } | ||
| } | ||
| .area { | ||
| margin-top: 24px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| justify-content: space-evenly; | ||
| > * { | ||
| margin-right: 8px; | ||
| margin-bottom: 8px; | ||
| } | ||
| .card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| text-align: center; | ||
| padding: 8px; | ||
| } | ||
| .mdc-icon-button { | ||
| $icon-size: 72px; | ||
| $area-size: calc(#{$icon-size} * 2); | ||
| width: $area-size; | ||
| height: $area-size; | ||
| font-size: $icon-size; | ||
| color: $mdc-theme-primary; | ||
| } | ||
| } | ||
| </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,13 @@ | ||
| module.exports = { | ||
| css: { | ||
| loaderOptions: { | ||
| sass: { | ||
| sassOptions: { | ||
| includePaths: [ | ||
| "./node_modules" | ||
| ] | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; |