From af19f702d2e75f28d3033fa5f4eb2b6625655107 Mon Sep 17 00:00:00 2001
From: Adam Strzelecki <ono@java.pl>
Date: Mon, 30 Nov 2015 15:24:00 +0100
Subject: [PATCH] UI: Gray SHA1 next to message, file list collapse

1. File icons are labels for file names (same column)
2. SHA1 are labels for commit messages (same column)
3. SHA1 labels are now gray and bit smaller (less intrusive)
4. Use more generic .ui .sha.label CSS class
---
 public/css/gogs.css               | 30 ++++++++++++-----------------
 templates/repo/commits_table.tmpl |  9 +++++----
 templates/repo/view_list.tmpl     | 32 ++++++++++++-------------------
 3 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 8060946b8..7a15cb3af 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -916,6 +916,16 @@ pre.raw {
 .ui.status.buttons .octicon {
   margin-right: 4px;
 }
+.ui .sha.label {
+  font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
+  font-size: 13px;
+  padding: 6px 10px 4px 10px;
+  font-weight: normal;
+  margin: 0 6px;
+}
+.ui .white.label {
+  background-color: white;
+}
 .overflow.menu .items {
   max-height: 300px;
   overflow-y: auto;
@@ -1865,20 +1875,10 @@ footer .container .links > *:first-child {
   margin-bottom: 5px;
 }
 .repository.file.list #repo-files-table tbody .icon {
-  margin-left: 5px;
-}
-.repository.file.list #repo-files-table tbody .name {
-  max-width: 120px;
-}
-.repository.file.list #repo-files-table tbody .message {
-  max-width: 300px;
-}
-.repository.file.list #repo-files-table tbody .age {
-  min-width: 150px;
+  margin-right: 5px;
 }
 .repository.file.list #repo-files-table tbody .text.truncate {
-  margin-bottom: -5px;
-  max-width: 100%;
+  max-width: 88%;
 }
 .repository.file.list #repo-files-table td {
   padding-top: 8px;
@@ -2262,12 +2262,6 @@ footer .container .links > *:first-child {
 .repository .commits.table .date {
   width: 120px;
 }
-.repository .sha.label {
-  font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
-  font-size: 14px;
-  padding: 6px 10px 4px 10px;
-  font-weight: normal;
-}
 .repository .diff-detail-box {
   margin: 15px 0;
   line-height: 30px;
diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl
index 58ab1ebb1..77d0b0219 100644
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@@ -20,8 +20,7 @@
     <thead>
       <tr>
         <th>{{.i18n.Tr "repo.commits.author"}}</th>
-        <th>SHA1</th>
-        <th>{{.i18n.Tr "repo.commits.message"}}</th>
+        <th class="message"><span class="ui sha white label">&nbsp;&nbsp;&nbsp;SHA1&nbsp;&nbsp;&nbsp;</span> {{.i18n.Tr "repo.commits.message"}}</th>
         <th>{{.i18n.Tr "repo.commits.date"}}</th>
       </tr>
     </thead>
@@ -36,8 +35,10 @@
           <img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
           {{end}}
         </td>
-        <td class="sha"><a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.ID}} ">{{SubStr .ID.String 0 10}} </a></td>
-        <td class="message"><span class="text truncate">{{RenderCommitMessage .Summary $.RepoLink}}</span></td>
+        <td class="message">
+          <a rel="nofollow" class="ui sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.ID}}">{{ShortSha .ID.String}}</a>
+          <span class="text truncate">{{RenderCommitMessage .Summary $.RepoLink}}</span>
+        </td>
         <td class="date">{{TimeSince .Author.When $.Lang}}</td>
       </tr>
     {{end}}
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 9edbd687c..d1747299a 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -1,28 +1,26 @@
 <table id="repo-files-table" class="ui table">
   <thead>
     <tr>
-      <th colspan="5" class="clear">
+      <th colspan="2">
         <span>
           {{if .LastCommitUser}}
           <img class="ui avatar image img-12" src="{{.LastCommitUser.AvatarLink}}" />
-          <a href="{{AppSubUrl}}/{{.LastCommitUser.Name}}"><strong>{{.LastCommit.Author.Name}}</strong></a>:
+          <a href="{{AppSubUrl}}/{{.LastCommitUser.Name}}"><strong>{{.LastCommit.Author.Name}}</strong></a>
           {{else}}
           <img class="ui avatar image img-12" src="{{AvatarLink .LastCommit.Author.Email}}" />
-          <strong>{{.LastCommit.Author.Name}}</strong>:
+          <strong>{{.LastCommit.Author.Name}}</strong>
           {{end}}
         </span>
-        <a class="text black" href="{{.RepoLink}}/commit/{{.LastCommit.ID}}" rel="nofollow">
-        <strong>{{ShortSha .LastCommit.ID.String}}</strong></a>
-        <span class="text truncate grey" id="last-commit-message">{{RenderCommitMessage .LastCommit.Summary .RepoLink}}</span>
-        <span class="ui right text grey age">{{TimeSince .LastCommit.Author.When $.Lang}}</span>
+        <a rel="nofollow" class="ui sha label" href="{{.RepoLink}}/commit/{{.LastCommit.ID}}" rel="nofollow">{{ShortSha .LastCommit.ID.String}}</a>
+        <span class="text truncate grey">{{RenderCommitMessage .LastCommit.Summary .RepoLink}}</span>
       </th>
+      <th class="text grey right age four wide">{{TimeSince .LastCommit.Author.When $.Lang}}</th>
     </tr>
   </thead>
   <tbody>
     {{if .HasParentPath}}
     <tr class="has-parent">
-      <td><span class="octicon octicon-mail-reply"></span></td>
-      <td><a href="{{EscapePound .BranchLink}}{{.ParentPath}}">..</a></td>
+      <td colspan="3"><i class="icon octicon octicon-mail-reply"></i><a href="{{EscapePound .BranchLink}}{{.ParentPath}}">..</a></td>
     </tr>
     {{end}}
     {{range $item := .Files}}
@@ -30,10 +28,8 @@
       {{$commit := index $item 1}}
       <tr>
         {{if $entry.IsSubModule}}
-        <td>
+        <td class="four wide">
           <span class="icon octicon octicon-file-submodule"></span>
-        </td>
-        <td>
           {{if $commit.RefUrl}}
           <a href="{{$commit.RefUrl}}" class="text truncate">{{$entry.Name}}</a> @ <a href="{{$commit.RefUrl}}/commit/{{$commit.RefId}}">{{ShortSha $commit.RefId}}</a>
           {{else}}
@@ -41,20 +37,16 @@
           {{end}}
         </td>
         {{else}}
-        <td>
+        <td class="name four wide">
           <span class="icon octicon octicon-file-{{if or $entry.IsDir}}directory{{else}}text{{end}}"></span>
-        </td>
-        <td class="name">
           <a href="{{EscapePound $.BranchLink}}/{{EscapePound $.TreePath}}{{EscapePound $entry.Name}}" class="text truncate">{{$entry.Name}}</a>
         </td>
         {{end}}
-        <td class="sha">
-          <a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.ID}} ">{{SubStr $commit.ID.String 0 10}} </a>
-        </td>
-        <td class="message">
+        <td class="message collapsing eight wide">
+          <a rel="nofollow" class="ui sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.ID}}">{{ShortSha $commit.ID.String}}</a>
           <span class="text truncate">{{RenderCommitMessage $commit.Summary $.RepoLink}}</span>
         </td>
-        <td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>
+        <td class="text grey right age four wide">{{TimeSince $commit.Committer.When $.Lang}}</td>
       </tr>
     {{end}}
   </tbody>