slightly better styles

7 years ago · 83f79a3883
parent 180e643af9
commit 83f79a3883
3 changed files with 37 additions and 14 deletions
--- a/www/todo/inner.html
+++ b/www/todo/inner.html
@ -9,13 +9,11 @@
 <body class="loading-hidden">
    <div id="toolbar" class="toolbar-container"></div>
    <div id="container">
-    	<div class="create-form">
-    		<input type="text" id="newTodoName" />
-    		<button class="btn btn-success">Add the task</button>
-    	</div>
-    	<div id="tasksList">
-    		
-    	</div>
+        <div class="cp-create-form">
+            <input type="text" id="newTodoName" />
+            <button class="btn btn-success">Add the task</button>
+        </div>
+        <div id="tasksList"></div>
    </div>
 </body>
 </html>
--- a/www/todo/main.js
+++ b/www/todo/main.js
@ -41,14 +41,14 @@ define([
                    'class': 'cp-task'
                }).appendTo($list);

-                $('<span>', {})
+                $('<span>', { 'class': 'cp-task-text' })
                    .text(APP.lm.proxy.data[el].task)
                    .appendTo($taskDiv);
-                $('<span>', {})
+                $('<span>', { 'class': 'cp-task-date' })
                    .text(new Date(APP.lm.proxy.data[el].ctime).toLocaleString())
                    .appendTo($taskDiv);
                $('<button>', {
-                    'class': 'fa fa-times'
+                    'class': 'fa fa-times cp-task-remove'
                }).appendTo($taskDiv).on('click', function() {
                    deleteTask(el);
                });
@ -67,12 +67,11 @@ define([

            todo.add(Cryptpad.createChannelId(), obj);

-            $input.empty();
-
+            $input.val("");
            display();
        };

-        $iframe.find('.create-form button').on('click', addTask);
+        $iframe.find('.cp-create-form button').on('click', addTask);

        var editTask = function () {

--- a/www/todo/todo.less
+++ b/www/todo/todo.less
@ -32,4 +32,30 @@ body {
    flex-flow: column;
    padding: 20px;
    align-items: center;
+    background-color: lighten(@toolbar-todo-bg, 15%);
+}
+
+@spacing: 15px;
+
+.cp-create-form {
+    margin: @spacing;
+}
+
+.cp-task {
+    border: 1px solid black;
+    padding: @spacing;
+    display: flex;
+    align-items: center;
+    background-color: white;
+
+    .cp-task-text {
+        margin: @spacing;
+        flex: 1;
+    }
+    .cp-task-date {
+        margin: @spacing;
+    }
+    .cp-task-remove {
+        margin: @spacing;
+    }
 }