trello like add card behavior

york-solutions · Aug 14, 2017 · d34d79c · d34d79c
1 parent a6565d0
commit d34d79c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 41 deletions.
diff --git a/index.css b/index.css
@@ -1,4 +1,4 @@
-html, body, button, input, textarea {
+html, body, button, textarea {
   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #4d4d4d;
@@ -9,12 +9,20 @@ header {
   text-align: center;
 }
 
+a {
+  text-decoration: none;
+}
+
 button {
-  background-color: #0079bf;
   border: 0;
   border-radius: 3px;
-  color: white;
-  padding: .5em;
+  color: #fff;
+  padding: 4px 16px;
+  background: linear-gradient(to bottom,#61BD4F 0,#5AAC44 100%);
+  box-shadow: 0 1px 0 #3F6F21;
+  font-weight: bold;
+  line-height: 22px;
+  cursor: pointer;
 }
 
 #login {
@@ -43,7 +51,7 @@ button {
 
 #list-title {
   font-weight: bold;
-  margin: 0 0 9px;
+  margin: 0;
 }
 
 #list {
@@ -55,7 +63,7 @@ button {
   border-bottom: 1px solid #ccc;
   border-radius: 3px;
   cursor: pointer;
-  margin-bottom: 6px;
+  margin-top: 6px;
   background-color: white;
 }
 
@@ -65,35 +73,38 @@ button {
 
 .card-desc {
   background: url(trello-description.svg) no-repeat;
-  width: 14px;
+  width: 12px;
   background-size: contain;
   margin-top: 6px;
+  margin-left: 4px;
 }
 
-#new-card-title, 
-#new-card-desc {
-  margin-bottom: .5em;
-  padding: .5em;
-  width: 100%;
-  box-sizing: border-box;
-  border: 0;
-  border-bottom: 1px solid #ccc;
-  border-radius: 3px;
+#new-card-link {
+  color: #8c8c8c;
+  display: block;
+  margin-top: 8px;
 }
 
-#new-card-desc {
-  height: 100px;
+#new-card-link:hover {
+  color: #4d4d4d;
+  text-decoration: underline;
 }
 
-#new-card-title.error {
-  border: 1px solid #c52323;
+#new-card {
+  display: none;
 }
 
-#new-card-title-error {
-  color: #c52323;
-  display: none;
-  margin: 0 0 .5em 0;
-  font-size: .8em;
+#new-card-title {
+  margin: 6px 0 3px 0;
+  padding: 6px;
+  width: 100%;
+  box-sizing: border-box;
+  border: 0;
+  border-bottom: 1px solid #ccc;
+  border-radius: 3px;
+  height: 70px;
+  resize: none;
+  outline: 0;
 }
 
 #new-card-button[disabled] {

diff --git a/index.html b/index.html
@@ -14,11 +14,10 @@
     <div id="content">
       <div id="list-title"></div>
       <div id="list"></div>
-      <div class="new-card">
-        <input id="new-card-title" type="text" placeholder="Task title"/>
-        <p id="new-card-title-error">Title is required.</p>
-        <textarea id="new-card-desc" placeholder="Task description"></textarea>
-        <button id="new-card-button">Add New Task</button>
+      <a id="new-card-link" href="#">Add a card…</a>
+      <div id="new-card">
+        <textarea id="new-card-title"></textarea>
+        <button id="new-card-button">Add</button>
       </div>
     </div>
     <div id="loading" class="spinner">

diff --git a/index.js b/index.js
@@ -77,12 +77,28 @@ async function begin() {
   $('#list-title').text(list.name);
   await displayList(listId);
 
-  $('#new-card-button').click(() => {
+  $('#new-card-link').click(function(e){
+    $(this).hide();
+    $('#new-card').show();
+    $('#new-card-title').focus();
+    e.preventDefault();
+    e.stopPropagation();
+  });
+
+  $(document.body).click(() => {
+    $('#new-card-link').show();
+    $('#new-card').hide();
+  });
+
+  $('#new-card-button').click((e) => {
     addNewCard(listId);
+    e.stopPropagation();
   });
   $('#new-card-title').keypress(function(e) {
     if(e.which == 13) {
       addNewCard(listId);
+      e.stopPropagation();
+      e.preventDefault();
     }
   });
   $('#content').show();
@@ -106,25 +122,16 @@ function addNewCard(listId) {
   const title = $title.val().trim();
 
   if(!title) {
-    $title.addClass('error');
-    $('#new-card-title-error').show();
     return;
-  } else {
-    $title.removeClass('error');
-    $('#new-card-title-error').hide();
   }
 
-  const $desc = $('#new-card-desc');
-  $('#new-card-button').prop('disabled', true);
-
   trelloRequest('POST', `/cards`, {
     name: title,
-    desc: $desc.val().trim(),
     idList: listId
   }).then(() => {
     $title.val('');
-    $desc.val('');
     $('#new-card-button').prop('disabled', false);
+    $('#new-card-title').focus();
     loading();
     displayList(listId);
     notLoading();