From a6565d0d39de459e09013ac6c2c4536548be790e Mon Sep 17 00:00:00 2001 From: Justin Date: Mon, 14 Aug 2017 20:38:17 +0000 Subject: [PATCH] trello styling --- index.css | 77 +++++++++++++++++++++++------------------- index.html | 3 +- index.js | 19 +++++------ trello-description.svg | 59 ++++++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+), 47 deletions(-) create mode 100644 trello-description.svg diff --git a/index.css b/index.css index 632bed2..4dcb2b5 100644 --- 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 index b5b82b3..268d9be 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,15 @@ Trello -
-

Research Tasks

+
diff --git a/index.js b/index.js index 18f956a..71d0aab 100644 --- 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('

Use the tools on the right to add a research task.

'); } } @@ -161,18 +161,18 @@ function displayCard(card) { window.open(card.url, 'fstrello'); }); if(card.desc){ - $card.append(`

${card.desc}

`); + $card.append(`
 
`); } 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 new file mode 100644 index 0000000..851c1f8 --- /dev/null +++ b/trello-description.svg @@ -0,0 +1,59 @@ + + + + + + image/svg+xml + + + + + + + + +