More tweaks and updates to the Trello design

app/app/styles/section/trello.scss

@@ -36,13 +36,18 @@
 
     table.trello-table {
         border:none!important;
-        margin-left: 0 !important;
+        margin-left: 20px !important;
         margin-bottom: 20px !important;
     }
 
     table.trello-table td {
         border:none!important;
         padding: 20px 20px 0 0  !important;
+        vertical-align: top;
+    }
+
+    tbody.board-stats td {
+        padding-right: 40px!important;
     }
 
     span.trello-label {
@@ -52,8 +57,21 @@
         text-shadow: 0 0 5px rgba(0,0,0,.2),0 0 2px #000;
     }
 
+    span.trello-board {
+        color: white;
+        padding: 20px 20px;
+        width: 190px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+        border-radius: 4px;
+        margin-right: 20px;
+    }
+
     .trello-avatar {
         border-radius: 3px;
+        margin-right: 10px;
     }
 
     h6 {
@@ -61,6 +79,16 @@
         margin: 0;
     }
 
+    p.board-stats {
+        font-size: 18px;
+    }
+
+    span.stat-number {
+        font-family: "open_sanslight";
+        font-size: 50px;
+        margin-right: 15px;
+    }
+
 	> .trello-board {
 		width: 100%;
 		max-height: 600px;

core/section/trello/archive_template.go

@@ -14,19 +14,21 @@ package trello
 const archiveTemplate = `
 <h3>Deleted and Archived Cards</h3>
 <p>Changes since {{.Since}}.</p>
-{{range $b := .Boards}}
+<div class="section-trello-render">
-	<div>
+	<table class="trello-table" class="width-100">
-		<p>For board
+		<tbody class="trello">
+		{{range $b := .Boards}}
+			<tr>
+				<td>
 					<a href="{{ $b.Board.URL }}">
-				<span style="background-color: {{$b.Board.Prefs.BackgroundColor}}">{{$b.Board.Name}}</span>
+						<span class="trello-board" style="background-color: {{$b.Board.Prefs.BackgroundColor}}">{{$b.Board.Name}}</span>
 					</a>
-		</p>
+				</td>
-		<div>
+				<td>
 					{{range $act := $b.Actions}}
 						{{if eq $act.Type "deleteCard" }}
 						Deleted:
-				    {{$act.Data.List.Name}}/{{$act.Data.Card.Name}} - {{$act.Data.Text}}
+							{{$act.Data.List.Name}} : {{$act.Data.Card.Name}} - {{$act.Data.Text}}
-			    	<br>
 						{{end}}
 					{{end}}
 					{{range $arch := $b.Archived}}
@@ -34,9 +36,10 @@ const archiveTemplate = `
 							{{$arch.Name}} - {{$arch.Desc}}
 						<br>
 					{{end}}
-		</div>
+				</td>
-	</div>
+			</tr>
-{{end}}
+		{{end}}
-
+		</tbody>
-<br>
+	</table>
+</div>
 `

core/section/trello/boards_template.go

@@ -15,16 +15,37 @@ const boardsTemplate = `
 
 <h3>All Boards</h3>
 <p>Changes since {{.Since}}.</p>
-
+<div class="section-trello-render">
-<p>{{len .Boards}} Boards, {{.ListTotal}} Lists, {{.CardTotal}} Cards, {{len .MemberBoardAssign}} Members</p>
+	<table class="trello-table" class="width-100">
-
+		<tbody class="board-stats">
-{{range $b := .Boards}}
+			<tr>
-	<div>
+				<td>
+					<span class="stat-number">{{len .Boards}}</span> Boards
+				</td>
+				<td>
+					<span class="stat-number">{{.ListTotal}}</span> Lists
+				</td>
+				<td>
+					<span class="stat-number">{{.CardTotal}}</span> Cards
+				</td>
+				<td>
+					<span class="stat-number">{{len .MemberBoardAssign}}</span> Members
+				</td>
+			</tr>
+		</tbody>
+	</table>
+	<table class="trello-table" class="width-100">
+		<tbody class="trello">
+		{{range $b := .Boards}}
+			<tr>
+				<td>
 					<a href="{{ $b.Board.URL }}">
-			<span style="background-color: {{$b.Board.Prefs.BackgroundColor}}">{{$b.Board.Name}}</span>
+						<span class="trello-board" style="background-color: {{$b.Board.Prefs.BackgroundColor}}">{{$b.Board.Name}}</span>
 					</a>
-		<p>There are {{ len $b.Actions }} actions for board</p>
+				</td>
-		<div>
+				<td>
+					<h6>There are {{ len $b.Actions }} actions for this board.</h6>
+					<p>
 						{{range $act, $tot := $b.ActionSummary}}
 							{{$act}} ({{$tot}}),
 						{{end}}
@@ -32,10 +53,11 @@ const boardsTemplate = `
 							archive card ({{len $b.Archived}}).
 							<br>
 						{{end}}
-		</div>
+					</p>
-	</div>
+				</td>
-{{end}}
+			</tr>
-
+		{{end}}
-
+		</tbody>
-<br>
+	</table>
+</div>
 `

core/section/trello/labels_template.go

@@ -14,7 +14,7 @@ package trello
 const labelsTemplate = `
 <h3>Labels</h3>
 <p>There are {{len .SharedLabels}} common labels across the boards.</p>
-<div class="section-trello-render non-printable">
+<div class="section-trello-render">
 	<table class="trello-table" class="width-100">
 		<tbody class="trello">
 		{{range $l := .SharedLabels}}

core/section/trello/members_template.go

@@ -17,20 +17,22 @@ const membersTemplate = `
 	There are {{len .MemberBoardAssign}} members assigned to {{.CardAssignTotal}} cards	of the total {{.CardTotal}} cards across {{len .Boards}} boards.
 </p>
 
-<div class="section-trello-render non-printable">
+<div class="section-trello-render">
 	<table class="trello-table" class="width-100">
 		<tbody>
 
 		{{range $m := .MemberBoardAssign}}
 			<tr>
-				<td class="width-15">
+				<td>
 					<img class="trello-avatar" src="https://trello-avatars.s3.amazonaws.com/{{$m.AvatarHash}}/50.png" height="50" alt="Member Avatar">
 				</td>
-				<td class="width-85">
+				<td>
 					<h6>{{$m.MemberName}}</h6>
+					<p>
 						{{range $ac := $m.AssignCounts}}
 							{{$ac.BoardName}} ({{$ac.Count}}),
 						{{end}}
+					</p>
 				</td>
 			</tr>
 		{{end}}