trello styling

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

Hide file tree

Showing 4 changed files with 111 additions and 47 deletions.
diff --git a/index.css b/index.css
@@ -1,7 +1,8 @@
-body {
-  width: 600px;
-  margin: auto;
-  font-family: Lato, sans-serif;
+html, body, button, input, textarea {
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  color: #4d4d4d;
+  line-height: 18px;
 }
 
 header {
@@ -11,7 +12,7 @@ header {
 button {
   background-color: #0079bf;
   border: 0;
-  border-radius: .25em;
+  border-radius: 3px;
   color: white;
   padding: .5em;
 }
@@ -32,11 +33,41 @@ button {
 
 #content {
   display: none;
+  background: #E2E4E6;
+  border-radius: 3px;
+  box-sizing: border-box;
+  padding: 10px;
+  width: 270px;
+  margin: auto;
+}
+
+#list-title {
+  font-weight: bold;
+  margin: 0 0 9px;
+}
+
+#list {
+  flex: 2;
 }
 
-.new-card {
-  flex: 1;
-  margin-left: 1em;
+.card {
+  padding: 6px 8px;
+  border-bottom: 1px solid #ccc;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-bottom: 6px;
+  background-color: white;
+}
+
+.card:hover {
+  background-color: #fafafa;
+}
+
+.card-desc {
+  background: url(trello-description.svg) no-repeat;
+  width: 14px;
+  background-size: contain;
+  margin-top: 6px;
 }
 
 #new-card-title, 
@@ -45,9 +76,9 @@ button {
   padding: .5em;
   width: 100%;
   box-sizing: border-box;
-  border: 1px solid #ccc;
-  font-family: Lato, sans-serif;
-  border-radius: .25em;
+  border: 0;
+  border-bottom: 1px solid #ccc;
+  border-radius: 3px;
 }
 
 #new-card-desc {
@@ -69,30 +100,6 @@ button {
   background-color: #5ca3cc;
 }
 
-#list {
-  flex: 2;
-}
-
-.card {
-  padding: 1em;
-  border: 1px solid #ccc;
-  border-radius: .25em;
-  cursor: pointer;
-  margin-bottom: 1em;
-}
-
-.card:hover {
-  background-color: #fafafa;
-}
-
-.card-title {
-  font-weight: bold;
-}
-
-.card-desc {
-  margin: 1em 0 0;
-}
-
 /* http://tobiasahlin.com/spinkit/ */
 
 .spinner {

diff --git a/index.html b/index.html
@@ -4,16 +4,15 @@
     <meta charset="UTF-8">
     <title>Trello</title>
     <link rel="stylesheet" href="index.css">
-    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <script src="https://api.trello.com/1/client.js?key=da1cd610f8de5fbba880a1e45dd8f33c"></script>
   </head>
   <body>
     <header>
-      <h1>Research Tasks</h1>
       <button id="login"><img src="trello-mark-white.svg">Connect to Trello</button>
     </header>
     <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"/>

diff --git a/index.js b/index.js
@@ -72,7 +72,9 @@ async function begin() {
   $('#login').hide();
 
   const boardId = await getBoardId();
-  const listId = await getListId(boardId, getFSPersonId());
+  const list = await getList(boardId, getFSPersonId());
+  const listId = list.id;
+  $('#list-title').text(list.name);
   await displayList(listId);
 
   $('#new-card-button').click(() => {
@@ -83,7 +85,7 @@ async function begin() {
       addNewCard(listId);
     }
   });
-  $('#content').css('display', 'flex');
+  $('#content').show();
   notLoading();
 }
 
@@ -145,8 +147,6 @@ async function displayList(listId) {
     cards.forEach(c => {
       $list.append(displayCard(c));
     });
-  } else {
-    $list.append('<p>Use the tools on the right to add a research task.</p>');
   }
 }
 
@@ -161,18 +161,18 @@ function displayCard(card) {
     window.open(card.url, 'fstrello');
   });
   if(card.desc){
-    $card.append(`<p class="card-desc">${card.desc}</p>`);
+    $card.append(`<div class="card-desc">&nbsp;</div>`);
   }
   return $card;
 }
 
 /**
- * Get the ID of the Trello list for this person, or create a new one
+ * Get the Trello list for this person, or create a new one
  * 
  * @param {String} boardId Trello board ID
  * @param {String} pid FamilySearch person ID
  */
-async function getListId(boardId, pid) {
+async function getList(boardId, pid) {
 
   const nameRegex = new RegExp(`${pid}$`);
 
@@ -184,17 +184,16 @@ async function getListId(boardId, pid) {
   });
 
   if(existingList) {
-    return existingList.id;
+    return existingList;
   } 
 
   // Create a new board for this person
   else {
     const personsName = await getFSPersonsName(pid);
-    const response = await trelloRequest('POST', `/board/${boardId}/lists`, {
+    return await trelloRequest('POST', `/board/${boardId}/lists`, {
       name: personsName ? `${personsName} - ${pid}` : pid,
       pos: 'bottom'
     });
-    return response.id;
   }
 }
 

diff --git a/trello-description.svg b/trello-description.svg