Use doublequotes in templates, looks

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

Hide file tree

Showing 2 changed files with 43 additions and 30 deletions.
diff --git a/src/components/CreateTodo.vue b/src/components/CreateTodo.vue
@@ -1,26 +1,29 @@
 <template>
   <div class='ui basic content center aligned segment'>
-    <button class='ui basic button icon' @click="openForm" v-show="!isCreating">
-      <i class='plus icon'></i>
+    <!--Add button-->
+    <button class="ui circular positive icon button" @click="openForm" v-show="!isCreating">
+      <i class="plus icon"></i>
     </button>
-    <div class='ui centered card' v-show="isCreating">
-      <div class='content'>
-        <div class='ui form'>
-          <div class='field'>
+
+    <!--form-->
+    <div class="ui centered card" v-show="isCreating">
+      <div class="content">
+        <div class="ui form">
+          <div class="field">
             <label>Title</label>
-            <input v-model="titleText" type='text'>
+            <input v-model="titleText" type="text">
           </div>
-          <div class='field'>
+          <div class="field">
             <label>Project</label>
-            <input v-model="projectText" type='text'>
+            <input v-model="projectText" type="text">
           </div>
 
-          <div class='ui buttons'>
-            <button class='ui icon button' @click="closeForm">
+          <div class="ui buttons">
+            <button class="ui icon button" @click="closeForm">
               Cancel
             </button>
             <div class="or"></div>
-            <button class="ui right labeled icon button positive" @click="sendForm()">
+            <button class="ui positive right labeled icon button" @click="sendForm()">
               <i class="add icon"></i>
               New
             </button>

diff --git a/src/components/Todo.vue b/src/components/Todo.vue
@@ -1,21 +1,32 @@
 <template>
-  <div class='ui centered card'>
+  <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'>
+      <div class="header">
           {{ todo.title }}
       </div>
-      <div class='meta'>
+      <div class="meta">
           {{ todo.project }}
       </div>
-      <div class='extra content'>
-          <span class='right floated edit icon' @click="showForm">
-          <i class='edit icon'></i>
+      <div class="extra content">
+          <span class="right floated edit icon" @click="showForm">
+          <i class="edit icon"></i>
         </span>
-        <span class='right floated trash icon' @click="deleteTodo(todo)">
-          <i class='trash icon'></i>
+        <span class="right floated trash icon" @click="deleteTodo(todo)">
+          <i class="trash icon"></i>
         </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
+    </div>
+
+
+    <!-- Editing mode -->
     <div class="content" v-show="isEditing">
       <div class='ui form'>
         <div class='field'>
@@ -26,19 +37,18 @@
           <label>Project</label>
           <input type='text' v-model="todo.project" >
         </div>
-        <div class='ui two button attached buttons'>
-          <button class='ui basic blue button' @click="hideForm">
-            Close X
-          </button>
-        </div>
       </div>
     </div>
-    <div class='ui bottom attached green basic button' v-show="!isEditing &&todo.done" disabled>
-        Completed
-    </div>
-    <div class='ui bottom attached red basic button' @click="completeTodo(todo)" v-show="!isEditing && !todo.done">
-        Pending
+    <div class='ui bottom attached buttons' v-show="isEditing">
+      <button class='ui icon button' @click="hideForm">
+        <i class="close icon"></i>
+        Cancel
+      </button>
     </div>
+
+
+
+
   </div>
 </template>