Restructure

scotch-io · Apr 3, 2018 · f1c9989 · f1c9989
1 parent d44f79a
commit f1c9989
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -12,8 +12,8 @@
 
 <script>
 import sweetalert from 'sweetalert';
-import TodoList from './components/TodoList';
-import CreateTodo from './components/CreateTodo';
+import TodoList from './components/ListView/_ListView';
+import CreateTodo from './components/ListView/TodoCreate';
 
 export default {
   name: 'app',

diff --git a/src/components/Todo.vue → src/components/ListView/Todo.vue b/src/components/Todo.vue → src/components/ListView/Todo.vue
@@ -2,6 +2,7 @@
   <div class="ui centered card" :class="{ 'green' :todo.done }">
     <!--yoda, ternary: :class="todo.done ? 'green' : 'red'"  -->
 
+
     <!--View Mode-->
     <div class="content" v-show="!isEditing">
       <div class="header">
@@ -19,7 +20,6 @@
         </span>
       </div>
     </div>
-    <!-- Todo: add checkbox -->
     <div class="ui bottom attached blue basic icon button" @click="completeTodo(todo)" v-show="!isEditing && !todo.done">
       <i class="checkmark sign icon"></i>
       Done
@@ -46,9 +46,6 @@
       </button>
     </div>
 
-
-
-
   </div>
 </template>
 

diff --git a/src/components/CreateTodo.vue → src/components/ListView/TodoCreate.vue b/src/components/CreateTodo.vue → src/components/ListView/TodoCreate.vue
diff --git a/src/components/TodoList.vue → src/components/ListView/_ListView.vue b/src/components/TodoList.vue → src/components/ListView/_ListView.vue
@@ -2,6 +2,7 @@
   <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>
 </template>
@@ -41,9 +42,10 @@ export default {
 };
 </script>
 
+<!--Scoped styles wont leak into other components -->
 <style scoped>
-p.tasks {
-  text-align: center;
-}
+  p.tasks {
+    text-align: center;
+  }
 </style>