WIP - adding some style and such
1 files deleted
4 files added
6 files modified
New file |
| | |
| | | { |
| | | "include": [ |
| | | "./src/**/*" |
| | | ], |
| | | "compilerOptions": { |
| | | "baseUrl": ".", |
| | | "paths": { |
| | | "components/*": [ |
| | | "src/components/*" |
| | | ] |
| | | } |
| | | } |
| | | } |
| | |
| | | <div id="app"> |
| | | <div id="nav"> |
| | | <router-link to="/">Home</router-link> | |
| | | <router-link to="/about">About</router-link> |
| | | <router-link to="/todo">Todo</router-link> | |
| | | <router-link to="/component-catalog">Components</router-link> | |
| | | </div> |
| | | <router-view/> |
| | | </div> |
| | | </template> |
| | | |
| | | <style lang="scss"> |
| | | |
| | | @import "scss/custom.scss"; |
| | | |
| | | #app { |
| | | font-family: "Avenir", Helvetica, Arial, sans-serif; |
| | | -webkit-font-smoothing: antialiased; |
New file |
| | |
| | | <!-- Todo Header --> |
| | | <template id="todo-header"> |
| | | <div class="todo-header"> |
| | | <div class="overlay"></div> |
| | | <time class="clearfix"> |
| | | <span class="day">{{ date }}</span> |
| | | <span class="dayofweek">{{ weekDay }}</span> |
| | | <span class="month">{{ month }}, {{ year }}</span> |
| | | </time> |
| | | <div class="add-circle" @click="add"> |
| | | <i class="fa fa-plus"></i> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | // Array of Month |
| | | const month = [ |
| | | "January", |
| | | "February", |
| | | "Mach", |
| | | "April", |
| | | "May", |
| | | "June", |
| | | "July", |
| | | "August", |
| | | "September", |
| | | "October", |
| | | "November", |
| | | "September" |
| | | ]; |
| | | const weekday = [ |
| | | "Sunday", |
| | | "Monday", |
| | | "Tuesday", |
| | | "Wednesday", |
| | | "Thursday", |
| | | "Friday", |
| | | "Saturday" |
| | | ]; |
| | | |
| | | export default { |
| | | name: "Header", |
| | | props: { |
| | | name: String |
| | | }, |
| | | data: function() { |
| | | return { |
| | | date: "", |
| | | weekDay: "", |
| | | month: "", |
| | | year: "" |
| | | }; |
| | | }, |
| | | created: function() { |
| | | const d = new Date(); |
| | | this.date = d.getDate(); |
| | | this.weekDay = weekday[d.getDay()]; |
| | | this.month = month[d.getMonth()]; |
| | | this.year = d.getFullYear(); |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style scoped lang="scss"> |
| | | // https://github.com/tatthien/vue-todo/blob/master/src/sass/style.scss |
| | | @import "../scss/custom.scss"; |
| | | // .clearfix { |
| | | // overflow: auto; |
| | | // zoom: 1; |
| | | // } |
| | | .todo-header { |
| | | border-radius: 6px 6px 0 0; |
| | | background: url($header_image) no-repeat; |
| | | background-size: cover; |
| | | padding: 55px 20px; |
| | | position: relative; |
| | | .overlay { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0,0,0,0.2); /* fallback for old browsers */ |
| | | //background: -webkit-linear-gradient(to left, rgba(85,98,112,0.5) , rgba(255,107,107,0.5)); /* Chrome 10-25, Safari 5.1-6 */ |
| | | //background: linear-gradient(to left, rgba(85,98,112,0.5) , rgba(255,107,107,0.5)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ |
| | | border-radius: 6px 6px 0 0; |
| | | } |
| | | time { |
| | | color: white; |
| | | display: block; |
| | | position: relative; |
| | | .day { |
| | | font-size: 4em; |
| | | float: left; |
| | | margin-right: 10px; |
| | | } |
| | | .dayofweek { |
| | | display: block; |
| | | margin-top: 13px; |
| | | font-size: 1.4em; |
| | | font-weight: 700; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | data () { |
| | | return { |
| | | todos: [{ |
| | | msg: 'Have a poop', |
| | | title: 'Have a poop', |
| | | id: '123', |
| | | complete: false |
| | | },{ |
| | | msg: 'Learn Vue JS', |
| | | title: 'Learn Vue JS', |
| | | id: '132', |
| | | complete: false |
| | | },{ |
| | | msg: 'Love DevOps', |
| | | title: 'Love DevOps', |
| | | id: '321', |
| | | complete: false |
| | | }] |
| | |
| | | console.info('INFO - ', this.newTodo) |
| | | EventBus.$emit('NEWTODOADDED', { |
| | | completed: false, |
| | | msg: this.newTodo, |
| | | title: this.newTodo, |
| | | id: Math.floor(1 + (9999 - 1) * Math.random()) |
| | | }) |
| | | this.newTodo = '' |
| | |
| | | @click="markDone" |
| | | > |
| | | <md-checkbox :value="isActive" /> |
| | | <span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.msg }}</span> |
| | | <span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.title }}</span> |
| | | </md-list-item> |
| | | </div> |
| | | </template> |
| | |
| | | import Vue from "vue"; |
| | | import Router from "vue-router"; |
| | | import Home from "./views/Home.vue"; |
| | | import About from "./views/About.vue"; |
| | | import Todo from "./views/Todo.vue"; |
| | | import Catalog from "./views/Catalog.vue"; |
| | | |
| | | Vue.use(Router); |
| | |
| | | component: Home |
| | | }, |
| | | { |
| | | path: "/about", |
| | | name: "about", |
| | | component: About |
| | | path: "/todo", |
| | | name: "todo", |
| | | component: Todo |
| | | }, |
| | | { |
| | | path: "/component-catalog", |
New file |
| | |
| | | // vars and global css |
| | | |
| | | $header_image: 'https://images.unsplash.com/photo-1440613905118-99b921706b5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=255b304482a2f50d0917f3de7b06251e'; |
| | |
| | | <template> |
| | | <div class="home"> |
| | | <img src="../assets/logo.png"> |
| | | <HelloWorld msg="Welcome to Your Vue.js App"/> |
| | | <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> |
| | | </div> |
| | | </template> |
| | | |
New file |
| | |
| | | <template> |
| | | <div> |
| | | <md-card> |
| | | <md-card-header class="remove-padding"> |
| | | <Header/> |
| | | </md-card-header> |
| | | |
| | | <md-card-content> |
| | | </md-card-content> |
| | | </md-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | // @ is an alias to /src |
| | | import HelloWorld from "@/components/HelloWorld.vue"; |
| | | import Header from "@/components/Header.vue"; |
| | | |
| | | export default { |
| | | name: "Todo", |
| | | components: { |
| | | Header, |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .remove-padding { |
| | | padding: 0px |
| | | } |
| | | .md-card { |
| | | width: 480px; |
| | | margin: 4px; |
| | | display: inline-block; |
| | | vertical-align: top; |
| | | } |
| | | </style> |