From c0f9dc586201bfc3720854ea50fe22479a95d0c5 Mon Sep 17 00:00:00 2001
From: Ben Richter <bri@move-elevator.de>
Date: Sat, 7 Apr 2018 13:27:06 +0200
Subject: [PATCH] Styling

---
 package.json                          |  2 +-
 src/App.vue                           | 15 ++++++++++++---
 src/components/ListView/Todo.vue      |  2 +-
 src/components/ListView/_ListView.vue | 12 +++++++++---
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index d878f8d..212c081 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "todo-app",
   "version": "1.0.0",
   "description": "A Vue.js project",
-  "author": "Jeremy Kithome <jeremy.kithome@andela.com>",
+  "author": "Ben Richter <bri@move-elevator.de>",
   "private": true,
   "scripts": {
     "start": "parcel index.html",
diff --git a/src/App.vue b/src/App.vue
index 463fe07..dffabf6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,19 @@
 <template>
   <div id="app">
-    <h1 class="ui dividing centered header">VueDO</h1>
-    <div class='ui three column centered grid'>
-      <div class='column'>
+    <div class='ui centered grid'>
+      <div class='twelve wide mobile eight wide tablet six wide computer column'>
+
+        <h2 class="ui dividing header">
+          <i class="check square outline icon"></i>
+          <div class="content">
+            VueDO
+            <div class="sub header">Vue2 basic demo</div>
+          </div>
+        </h2>
+
         <todo-list :todos="todos"></todo-list>
         <create-todo @create-todo="createTodo"></create-todo>
+
       </div>
     </div>
   </div>
diff --git a/src/components/ListView/Todo.vue b/src/components/ListView/Todo.vue
index 66b68fe..6479770 100644
--- a/src/components/ListView/Todo.vue
+++ b/src/components/ListView/Todo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ui centered card" :class="{ 'green' :todo.done }">
+  <div class="ui fluid card" :class="{ 'green' :todo.done }">
     <!--yoda, ternary: :class="todo.done ? 'green' : 'red'"  -->
 
 
diff --git a/src/components/ListView/_ListView.vue b/src/components/ListView/_ListView.vue
index 5605a62..4b5ade4 100644
--- a/src/components/ListView/_ListView.vue
+++ b/src/components/ListView/_ListView.vue
@@ -1,9 +1,15 @@
 <template>
   <div>
-    <p class="tasks">Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
-    <p class="tasks">Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
 
-    <todo @delete-todo="deleteTodo" @complete-todo="completeTodo" v-for="todo in todos" :todo.sync="todo"></todo>
+    <div class="four column centered row">
+      <p class="column tasks">Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
+      <p class="column tasks">Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
+    </div>
+
+    <todo @delete-todo="deleteTodo"
+          @complete-todo="completeTodo"
+          v-for="(todo, index) in todos" :key="index"
+          :todo.sync="todo" />
   </div>
 </template>