Commits & files UI: SUI fixed single line table

Instead using own ellipsis, uses Semantic UI fixed single line table which
effectively applies ellipsis to all overflowing table cells.

NOTE: File list cannot use colspan="2" for 1st "Last commit" elements,
otherwise layout breaks with fixed table.

1 files changed, 21 insertions, 29 deletions

diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 9edbd687c8..9b6c0aaa19 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">
+<table id="repo-files-table" class="ui fixed single line table">
   <thead>
     <tr>
-      <th colspan="5" class="clear">
-        <span>
-          {{if .LastCommitUser}}
-          <img class="ui avatar image img-12" src="{{.LastCommitUser.AvatarLink}}" />
-          <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>:
-          {{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>
+      <th class="four wide">
+        {{if .LastCommitUser}}
+        <img class="ui avatar image img-12" src="{{.LastCommitUser.AvatarLink}}" />
+        <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>
+        {{end}}
+      </th>
+      <th class="nine wide">
+        <a rel="nofollow" class="ui green sha label" href="{{.RepoLink}}/commit/{{.LastCommit.ID}}" rel="nofollow">{{ShortSha .LastCommit.ID.String}}</a>
+        <span class="grey">{{RenderCommitMessage .LastCommit.Summary .RepoLink}}</span>
       </th>
+      <th class="three wide text grey right age">{{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}}
@@ -32,27 +30,21 @@
         {{if $entry.IsSubModule}}
         <td>
           <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>
+          <a href="{{$commit.RefUrl}}">{{$entry.Name}}</a> @ <a href="{{$commit.RefUrl}}/commit/{{$commit.RefId}}">{{ShortSha $commit.RefId}}</a>
           {{else}}
           {{$entry.Name}} @ {{ShortSha $commit.RefId}}
           {{end}}
         </td>
         {{else}}
-        <td>
-          <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>
+          <span class="icon octicon octicon-file-{{if or $entry.IsDir}}directory{{else}}text{{end}}"></span>
+          <a href="{{EscapePound $.BranchLink}}/{{EscapePound $.TreePath}}{{EscapePound $entry.Name}}">{{$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">
-          <span class="text truncate">{{RenderCommitMessage $commit.Summary $.RepoLink}}</span>
+        <td class="message collapsing">
+          <a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.ID}}">{{ShortSha $commit.ID.String}}</a>
+          {{RenderCommitMessage $commit.Summary $.RepoLink}}
         </td>
         <td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>
       </tr>