Slightly prettier repository list.

app/digest.go

@@ -44,7 +44,7 @@ func newDigestCommit(commit *github.RepositoryCommit, repo *Repo, location *time
 }
 
 func (commit DigestCommit) DisplayDate() string {
-	// Prefer the date the comit was pushed, since that's what GitHub filters
+	// Prefer the date the commit was pushed, since that's what GitHub filters
 	// and sorts by.
 	return commit.PushDate.Format(CommitDisplayDateFormat)
 }

app/repos.go

@@ -6,6 +6,10 @@ import (
 	"github.com/google/go-github/github"
 )
 
+const (
+	VintageDateFormat = "January 2, 2006"
+)
+
 type Repos struct {
 	AllRepos              []*Repo
 	UserRepos             []*Repo
@@ -38,6 +42,20 @@ func (repo *Repo) TypeAsOcticonName() string {
 	return "repo"
 }
 
+func (repo *Repo) TypeAsClassName() string {
+	if *repo.Fork {
+		return "fork"
+	}
+	if *repo.Private {
+		return "private"
+	}
+	return ""
+}
+
+func (repo *Repo) DisplayVintage() string {
+	return repo.CreatedAt.Format(VintageDateFormat)
+}
+
 func getRepos(githubClient *github.Client, user *github.User) (*Repos, error) {
 	// The username parameter must be left blank so that we can get all of the
 	// repositories the user has access to, not just ones that they own.

app/static/main.css

@@ -3,6 +3,54 @@ body {
   font-size: 10pt;
 }
 
+a {
+  color: #4183c4;
+  text-decoration: none;
+}
+
 #send-form {
   display: inline;
 }
+
+.repos h2 {
+  font-size: 32px;
+  font-weight: bold;
+  position: relative;
+  margin: 15px 0 10px;
+}
+
+.repos h2:after {
+  content: "";
+  position: absolute;
+  bottom: 4px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #ccc;
+}
+
+.repos h2 .avatar {
+  height: 28px;
+}
+
+.repos ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.repos .repo {
+  overflow: hidden;
+  margin: 5px 0;
+  padding: 0;
+}
+
+.repos .repo.private .glyph {
+  color: #baac79;
+}
+
+.repos .repo .vintage {
+  padding-left: 1em;
+  color: #999;
+  font-style: italic;
+}

app/templates/settings.html

@@ -1,9 +1,10 @@
 {{define "title"}}GitHop - Settings{{end}}
 
 {{define "repo"}}
-    <li>
-      <span class="octicon octicon-{{.TypeAsOcticonName}}"></span>
+    <li class="repo {{.TypeAsClassName}}">
+      <span class="glyph octicon octicon-{{.TypeAsOcticonName}}"></span>
       <a href="{{.HTMLURL}}">{{.FullName}}</a>
+      <span class="vintage">{{.DisplayVintage}}</span>
     </li>
 {{end}}
 
@@ -30,54 +31,45 @@
   You have {{len .Repos.AllRepos}} repositories:
 </p>
 
-<ul>
-  <li>
+<div class="repos">
+  <h2>
     <a href="https://github.com/{{.User.Login}}">
-    <img src={{.User.AvatarURL}}
-         width="20"
-         height="20"
-         border="0">{{.User.Login}}</a>
-  </li>
+    <img src="{{.User.AvatarURL}}" class="avatar">{{.User.Login}}</a>
+  </h2>
   <ul>
     {{range .Repos.UserRepos}}
       {{template "repo" .}}
     {{end}}
   </ul>
-</ul>
+</div>
 
-<ul>
-  {{range .Repos.OtherUserRepos}}
-    <li>
+{{range .Repos.OtherUserRepos}}
+  <div class="repos">
+    <h2>
       <a href="https://github.com/{{.User.Login}}">
-      <img src={{.User.AvatarURL}}
-           width="20"
-           height="20"
-           border="0">{{.User.Login}}</a>
-    </li>
+      <img src="{{.User.AvatarURL}}" class="avatar">{{.User.Login}}</a>
+    </h2>
     <ul>
       {{range .Repos}}
         {{template "repo" .}}
       {{end}}
     </ul>
-  {{end}}
-</ul>
+  </div>
+{{end}}
 
-<ul>
-  {{range .Repos.OrgRepos}}
-    <li>
+{{range .Repos.OrgRepos}}
+  <div class="repos">
+    <h2>
       <a href="https://github.com/{{.Org.Login}}">
-      <img src={{.Org.AvatarURL}}
-           width="20"
-           height="20"
-           border="0">{{.Org.Login}}</a>
-    </li>
+      <img src="{{.Org.AvatarURL}}" class="avatar">{{.Org.Login}}</a>
+    </h2>
     <ul>
       {{range .Repos}}
         {{template "repo" .}}
       {{end}}
     </ul>
-  {{end}}
-</ul>
+  </div>
+{{end}}
 
 {{end}}