use styled checkboxes

www/todo/main.js

@@ -41,6 +41,20 @@ define([
         };
         scrollTo = scrollTo;
 
+        var makeCheckbox = function (id, cb) {
+            var entry = APP.lm.proxy.data[id];
+            var checked = entry.state === 1? 'fa-check-square-o': 'fa-square-o';
+
+            return $('<span>', {
+                'class': 'cp-task-checkbox fa ' + checked,
+            }).on('click', function () {
+                entry.state = (entry.state + 1) % 2;
+                if (typeof(cb) === 'function') {
+                    cb(entry.state);
+                }
+            });
+        };
+
         var display = APP.display = function () {
             var $list = $iframe.find('#tasksList');
 
@@ -51,19 +65,11 @@ define([
                     'class': 'cp-task'
                 }).appendTo($list);
 
-                var entry = APP.lm.proxy.data[el];
-
-                var $check = $('<input>',  {
-                    type: 'checkbox',
-                })
-                .on('change', function (e) {
-                    var checked = $check[0].checked;
-                    entry.state = checked? 1: 0;
-                    entry.mtime = +new Date();
-                })
-                .appendTo($taskDiv);
-                $check[0].checked = entry.state? true: false;
+                makeCheckbox(el, function (state) {
+                    display();
+                }).appendTo($taskDiv);
 
+                var entry = APP.lm.proxy.data[el];
                 $('<span>', { 'class': 'cp-task-text' })
                     .text(entry.task)
                     .appendTo($taskDiv);

www/todo/todo.less

@@ -47,6 +47,13 @@ body {
 
 .cp-create-form {
     margin: @spacing;
+    min-width: 40%;
+    display: flex;
+
+    #newTodoName {
+        flex: 1;
+        margin-right: 15px;
+    }
 }
 
 .cp-task {
@@ -66,4 +73,8 @@ body {
     .cp-task-remove {
         margin: @spacing;
     }
+    .cp-task-checkbox {
+        font-size: 45px;
+        width: 45px;
+    }
 }