WIP - adding some style and such

donal

2018-04-01 875958efd3c90e0d3cffa084f01ff045bacf6b77

WIP - adding some style and such

 jsconfig.json

New file
@@ -0,0 +1,13 @@
{
    "include": [
      "./src/**/*"
    ],
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
          "components/*": [
              "src/components/*"
          ]
      }
  }
}

 src/App.vue

@@ -2,13 +2,17 @@
  <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;

 src/components/Header.vue

New file
@@ -0,0 +1,107 @@
<!-- 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>

 src/components/ListOfTodos.vue

@@ -24,15 +24,15 @@
  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
      }]

 src/components/NewTodo.vue

@@ -26,7 +26,7 @@
          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 = ''

 src/components/TodoItem.vue

@@ -4,7 +4,7 @@
      @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>

 src/router.js

@@ -1,7 +1,7 @@
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);
@@ -14,9 +14,9 @@
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: About
      path: "/todo",
      name: "todo",
      component: Todo
    },
    {
      path: "/component-catalog",

 src/scss/custom.scss

New file
@@ -0,0 +1,3 @@
// 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';

 src/views/About.vue

File was deleted

 src/views/Home.vue

@@ -1,7 +1,7 @@
<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>


 src/views/Todo.vue

New file
@@ -0,0 +1,37 @@
<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>