Final tweaks to GitHub n Trello section

app/app/styles/base.scss

@@ -35,6 +35,8 @@ html {
 	background-color: $color-white;
 	font-size: 14px;
 	height: 100%;
+	-webkit-font-smoothing: antialiased;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 }
 
 body {
@@ -46,6 +48,8 @@ a {
 	color: $color-link;
 	text-decoration: none;
 	cursor: pointer;
+	-webkit-font-smoothing: antialiased;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 
 	a:hover, a:focus {
 		text-decoration: underline;

app/app/styles/color.scss

@@ -24,7 +24,7 @@ $color-header: #f3f5f8;
 $color-link: #0092d3;
 $color-border: #e1e1e1;
 
-$color-input: #a1a1a1;
+$color-input: #5a5a5a;
 $color-stroke: #e1e1e1;
 
 $color-tooltip: #a1a1a1;

app/app/styles/font.scss

@@ -1,8 +1,3 @@
-html, html a {
-    -webkit-font-smoothing: antialiased;
-    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-}
-
 .fixed-width-font {
     font-family: 'courier new', courier;
 }

app/app/styles/section/github.scss

@@ -1,4 +1,8 @@
 .section-github-editor {
+	.github-view label {
+		margin: 0 10px;
+	}
+
 	.github-repo {
 		width: 100%;
 		padding: 10px;
@@ -46,7 +50,7 @@
 	}
 
 	.github-table {
-		margin: 0 !important;
+		margin: 10px 0 !important;
 		border: none !important;
 		line-height: 30px;
 
@@ -76,11 +80,15 @@
 
 	.github-table tbody tr td {
 		border: none!important;
-		padding-left: 20px!important;
-		padding-bottom: 0!important;
+		padding: 5px 20px 5px 20px !important;
 	}
 
-	span.dataid {
+	.github-table .right-column {
+		text-align: right;
+		color:#838d94;
+	}
+
+	span.data {
 		color:#838d94;
 	}
 
@@ -93,11 +101,18 @@
         margin-left: 10px;
 	}
 
-	progress[value] {
-		background-color: $color-off-white;
-		border-radius: 3px;
-		height: 15px;
-		width: 150px;
+	.progress-bar {
+		display: inline-block; border-radius: 3px;
+		width: 40%;
+		background-color: #f1f1f1;
+		height: 8px;
+		margin-left: 10px;
+
+		.progress {
+			height: 8px;
+			border-radius: 4px;
+			background-color: #4caf50;
+		}
 	}
 
 	span.issue-state {

app/app/styles/section/trello.scss

@@ -60,20 +60,12 @@
 
     .heading {
 
-        a {
-            color: #3c3c3c!important;
-        }
-
         h3 {
             font-size: 22px;
             margin: 0;
             font-family: "open_sanslight";
         }
 
-        p {
-            font-size: 15px;
-            line-height: 0;
-        }
     }
 
     table.trello-single-board {
@@ -96,8 +88,7 @@
 
     .trello-single-board tbody tr td {
         border: none!important;
-        padding-left: 20px!important;
-        padding-bottom: 0!important;
+        padding: 5px 20px 5px 20px !important;
     }
 
     .trello-label {
@@ -106,7 +97,7 @@
         padding: 4px 6px;
         border-radius: 4px;
         box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
-        margin-left: 10px;
+        margin-left: 14px;
     }
 
 }

app/app/templates/components/section/github/type-editor.hbs

@@ -20,16 +20,16 @@
 					{{input id="branch-since" value=config.branchSince type="text" }}<br>
 				</div>
 				<div class="input-control">
-					<label>Show Milestones</label>
-					{{input id="show-milestone" checked=config.showMilestones type="checkbox"}}<br>
-				</div>
-				<div class="input-control">
-					<label>Show Issues</label>
-					{{input id="show-issues" checked=config.showIssues type="checkbox"}}<br>
-				</div>
-				<div class="input-control">
-					<label>Show Commits</label>
-					{{input id="show-commits" checked=config.showCommits type="checkbox" }}<br>
+					<label>GitHub Views</label>
+					<div class="tip">Select the views you want to show</div>
+					<div class="github-view">
+						{{input id="show-milestone" checked=config.showMilestones type="checkbox"}}
+						<label>Show Milestones</label>
+						{{input id="show-issues" checked=config.showIssues type="checkbox"}}
+						<label>Show Issues</label>
+						{{input id="show-commits" checked=config.showCommits type="checkbox" }}
+						<label>Show Commits</label>
+					</div>
 				</div>
 			</div>
 		</div>

core/section/github/commits_template.go

@@ -71,7 +71,7 @@ const commitsTemplate = `
 		<table class="github-table" style="width: 100%;">
 			<thead>
 				<tr>
-				<th class="title">Commits <span>{{len .BranchCommits}} commits by {{.NumContributors}} contributors</span>
+				<th class="title">Commits <span>&middot; {{len .BranchCommits}} commits by {{.NumContributors}} contributors</span>
 				</th>
 				<th></th>
 				</tr>
@@ -79,11 +79,11 @@ const commitsTemplate = `
 			<tbody>
 				{{range $commit := .BranchCommits}}
 					<tr>
-						<td style="no-width">
+						<td>
 							<a href="{{$commit.URL}}">{{$commit.Message}}</a>
-							<span class="dataid"> {{$commit.Branch}}</span>
+							<span class="data"> {{$commit.Branch}}</span>
 						</td>
-						<td style="text-align:right;">
+						<td class="right-column">
 							<div class="contributor-meta">
 								<img class="github-avatar" alt="@{{$commit.Name}}" src="{{$commit.Avatar}}" />
 								{{$commit.Name}}

core/section/github/issues_template.go

@@ -33,10 +33,9 @@ const (
 		<thead>
 			<tr>
 			<th class="title">
-				Issues <span>{{.ClosedIssues}} closed {{if eq 1 .ClosedIssues}}{{else}}issues{{end}} and {{.OpenIssues}} open
+				Issues <span>&middot; {{.ClosedIssues}} closed {{if eq 1 .ClosedIssues}}{{else}}issues{{end}} and {{.OpenIssues}} open
 				{{if eq 1 .OpenIssues}}issue{{else}}{{end}}</span>
 			</th>
-
 				<th></th>
 			</tr>
 		</thead>
@@ -50,10 +49,10 @@ const (
 					{{else}}
 						` + closedIsvg + `
 					{{end}}
-						<a href="{{$data.URL}}">{{$data.Message}}</a> <span class="dataid">#{{$data.ID}}</span>
+						<a href="{{$data.URL}}">{{$data.Message}}</a> <span class="data">#{{$data.ID}}</span>
 						{{$data.Labels}}
 					</td>
-					<td style="text-align:right;">
+					<td class="right-column">
 						<div class="milestone-meta">
 							<span class="meta-milestone">{{$data.Milestone}}</span> &middot;
 							<span class="meta-creator">{{$data.Creator}}</span> &middot; <span class="meta-date">{{$data.Date}}</span>

core/section/github/milestones.go

@@ -119,7 +119,7 @@ func getMilestones(client *gogithub.Client, config *githubConfig) ([]githubMiles
 							dd := "no due date"
 							if v.DueOn != nil {
 								// TODO refactor to add message in red if the milestone is overdue
-								dd = "due on " + (*v.DueOn).Format(milestonesTimeFormat) + ""
+								dd = "due " + (*v.DueOn).Format(milestonesTimeFormat) + ""
 							}
 							up := ""
 							if v.UpdatedAt != nil {
@@ -210,10 +210,10 @@ func renderMilestones(payload *githubRender, c *githubConfig) error {
 					}
 				}
 				if issuesClosed+issuesOpen > 0 {
-					payload.Milestones = append(payload.Milestones, githubMilestone{
-						Repo: orb.Repo, Private: orb.Private, Name: noMilestone, IsOpen: true,
-						OpenIssues: issuesOpen, ClosedIssues: issuesClosed, URL: template.URL(orb.URL),
-					})
+					//payload.Milestones = append(payload.Milestones, githubMilestone{
+					//	Repo: orb.Repo, Private: orb.Private, Name: noMilestone, IsOpen: true,
+					//	OpenIssues: issuesOpen, ClosedIssues: issuesClosed, URL: template.URL(orb.URL),
+					//})
 				}
 
 				hadRepo[rName] = true

core/section/github/milestones_template.go

@@ -14,15 +14,15 @@ package github
 const (
 	rawMSsvg  = `<path d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z"></path>`
 	openMSsvg = `
-		<span title="Open milestone">
+		<span class="issue-state" title="Open Milestone">
 			<svg height="16" width="14" version="1.1" viewBox="0 0 14 16">
 				` + rawMSsvg + `
 			</svg>
 		</span>
 		`
 	closedMSsvg = `
-		<span title="Closed milestone">
-			<svg aria-hidden="true" class="octicon octicon-check" height="16" version="1.1" viewBox="0 0 12 16" width="12">
+		<span class="issue-state" title="Closed Milestone">
+			<svg aria-hidden="true" class="octicon octicon-check" height="16" height="14" version="1.1" viewBox="0 0 12 16">
 				<path d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"></path>
 			</svg>
 		</span>
@@ -33,7 +33,7 @@ const (
 		<table class="github-table" style="width: 100%;">
 			<thead>
 				<tr>
-				<th class="title">Milestones <span> {{.ClosedMS}} closed and {{.OpenMS}} open</span>
+				<th class="title">Milestones <span>&middot; {{.ClosedMS}} closed and {{.OpenMS}} open</span>
 				</th>
 				<th></th>
 				</tr>
@@ -50,21 +50,20 @@ const (
 									` + closedMSsvg + `
 								{{end}}
 							{{end}}
+							<a class="link" href="{{$data.URL}}">{{$data.Name}}</a>
+							<span class="data"> &middot; {{if $data.IsMilestone}} {{$data.DueDate}}{{end}} </span>
 						</td>
-			            <td>
-							<div class="milestone-name"><a class="link" href="{{$data.URL}}">{{$data.Name}}</a></div>
-							<span class="milestone-meta">{{$data.Repo}}</span>
+			            <td class="right-column">
 							{{if $data.IsMilestone}}
-								<span class="milestone-meta"> &middot; {{$data.DueDate}}</span>
-							{{end}}
-						</td>
-			            <td class="no-width">
-							{{if $data.IsMilestone}}
-								<progress value="{{$data.Progress}}" max="100"></progress>
-								<div class="progress-meta"><span class="bold color-off-black">{{$data.CompleteMsg}}</span> complete &nbsp;&nbsp;&nbsp;<span class="bold color-off-black">{{$data.OpenIssues}}</span> open &nbsp;&nbsp;&nbsp;<span class="bold color-off-black">{{$data.ClosedIssues}}</span> closed</div>
+								<span class="bold color-off-black">{{$data.CompleteMsg}}</span> complete
+								<span class="bold color-off-black">{{$data.OpenIssues}}</span> 	open
+								<span class="bold color-off-black">{{$data.ClosedIssues}}</span> closed
 							{{else}}
-								<div class="progress-meta"><span class="bold color-off-black">{{$data.OpenIssues}}</span> open <span class="bold color-off-black">{{$data.ClosedIssues}}</span> closed</div>
+								<span class="bold color-off-black">{{$data.OpenIssues}}</span> open <span class="bold color-off-black">{{$data.ClosedIssues}}</span> closed
 							{{end}}
+							<div class="progress-bar">
+								<div class="progress" style="width:{{$data.Progress}}%;"></div>
+							</div>
 						</td>
 			        </tr>
 				{{end}}

core/section/trello/trad_template.go

@@ -15,8 +15,7 @@ const tradTemplate = `
 <div class="section-trello-render">
 	{{if ne .Detail.Board.ID ""}}
 		<div class="heading">
-			<h3><a href="{{ .Detail.Board.URL }}">{{.Detail.Board.Name}} Board</a></h3>
-			<p>There are {{ .Detail.CardCount }} cards across {{ .Detail.ListCount }} lists</p>
+			<p>There are {{ .Detail.CardCount }} cards across {{ .Detail.ListCount }} lists on <a href="{{ .Detail.Board.URL }}">{{.Detail.Board.Name}} Board</a></p>
 		</div>
 
 		<p class="non-printable-message">Non-printable</p>
@@ -26,7 +25,7 @@ const tradTemplate = `
 				{{range $data := .Detail.Data}}
 				<thead>
 					<tr>
-						<th class="title">{{ $data.List.Name }} <span>{{len $data.Cards}} cards</span></th>
+						<th class="title">{{ $data.List.Name }} <span>&middot; {{len $data.Cards}} cards</span></th>
 						<th></th>
 					</tr>
 				</thead>