new repo ui

- copy link button: #1396, #1168, #1668,
- synxtax highlight: #1712, #1549, #1315, #670
- z-index: #1942

5 files changed, 230 insertions, 222 deletions

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 0be1b84de7..d15e7b30ef 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -1,81 +1,117 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-<div id="repo-wrapper">
-    {{template "repo/header_old" .}}
-    <div id="repo-content" class="clear container">
-        <div id="repo-main" class="left grid-5-6">
-            <p id="repo-desc">
-                {{if .Repository.DescriptionHtml}}<span class="description">{{.Repository.DescriptionHtml}}</span>{{else}}<span class="no-description text-italic">{{.i18n.Tr "repo.no_desc"}}</span>{{end}}
-                <a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
-            </p>
-            <ul id="repo-file-nav" class="clear menu menu-line">
-                {{if and .IsRepositoryAdmin .Repository.BaseRepo}}
-                {{ $baseRepo := .Repository.BaseRepo}}
-                <li>
-                    <a href="{{AppSubUrl}}/{{$baseRepo.Owner.Name}}/{{$baseRepo.Name}}/compare/{{$.BaseDefaultBranch}}...{{$.Owner.Name}}:{{$.BranchName}}">
-                        <button class="btn btn-green btn-small btn-radius" id="repo-compare-btn"><i class="octicon octicon-git-compare"></i></button>
-                    </a>
-                </li>
-                {{end}}
-                <li id="repo-branch-switch" class="down drop">
-                    <a>
-                        <button class="btn btn-gray btn-medium btn-radius">
-                            <i class="octicon octicon-git-branch"></i> {{if .IsViewBranch}}{{.i18n.Tr "repo.branch"}}{{else}}{{.i18n.Tr "repo.tree"}}{{end}}:
-                            <strong id="repo-branch-current">{{if .IsViewBranch}}{{.BranchName}}{{else}}{{ShortSha .BranchName}}{{end}}</strong>
-                        </button>
-                    </a>
-                    <div class="drop-down panel">
-                        <p class="panel-header text-bold">{{.i18n.Tr "repo.branch_and_tags"}}</p>
-                        <!-- <input id="repo-branch-filter-ipt" class="ipt ipt-large" type="text" placeholder="find branches / tags"/> -->
-                        <div id="repo-branch-tag">
-                            <ul class="menu menu-line tab-nav clear" id="repo-branch-tab-nav">
-                                <li class="js-tab-nav {{if not .IsTag}}js-tab-nav-show{{end}} left" data-tab-target="#repo-branch-list"><a>{{.i18n.Tr "repo.branches"}}</a></li>
-                                <li class="js-tab-nav {{if .IsTag}}js-tab-nav-show{{end}} left" data-tab-target="#repo-tag-list"><a>{{.i18n.Tr "repo.tags"}}</a></li>
-                            </ul>
-                            <ul class="menu menu-vertical switching-list {{if .IsTag}}hide{{end}}" id="repo-branch-list">
-                                {{range .Branches}}
-                                <li {{if eq . $.BranchName}}class="checked"{{end}}><a href="{{$.RepoLink}}/src/{{EscapePound .}}"><i class="octicon octicon-check"></i>{{.}}</a></li>
-                                {{end}}
-                            </ul>
-                            <ul class="menu menu-vertical switching-list {{if not .IsTag}}hide{{end}}" id="repo-tag-list">
-                                {{range .Tags}}
-                                <li {{if eq . $.BranchName}}class="checked"{{end}}><a href="{{$.RepoLink}}/src/{{EscapePound .}}"><i class="octicon octicon-check"></i>{{.}}</a></li>
-                                {{end}}
-                            </ul>
-                        </div>
-                    </div>
-                </li>
-                <li id="repo-bread" class="breads">
-                    <a class="title bread" href="{{.RepoLink}}/src/{{EscapePound .BranchName}}">{{.Repository.Name}}</a>
-                    {{ $n := len .Treenames}}
-                    {{ $l := Subtract $n 1}}
-                    {{range $i, $v := .Treenames}}
-                        {{if eq $i $l}}
-                        <span class="bread">{{$v}}</span>
-                        {{else}}
-                        {{ $p := index $.Paths $i}}
-                        <span class="bread"><a href="{{EscapePound $.BranchLink}}/{{EscapePound $p}}">{{$v}}</a></span>
-                        {{end}}
-                    {{end}}
-                </li>
-                <!-- <li id="repo-commits-jump" class="repo-jump right">
-                    <a href="#">
-                        <button class="btn btn-small btn-gray btn-right-radius"><i class="octicon octicon-git-commit"></i></button>
+{{template "base/head" .}}
+<div class="repository file list">
+  {{template "repo/header" .}}
+  <div class="ui container">
+    {{template "repo/sidebar" .}}
+    <div class="ui grid">
+      <div class="ui ten wide column">
+        <p id="repo-desc">
+          {{if .Repository.DescriptionHtml}}<span class="description">{{.Repository.DescriptionHtml}}</span>{{else}}<span class="no-description text-italic">{{.i18n.Tr "repo.no_desc"}}</span>{{end}}
+          <a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
+        </p>
+      </div>
+      <div class="ui six wide column">
+        <div class="ui action small clone input">
+          {{if not $.DisableSSH}}
+          <button class="ui blue basic clone button" id="repo-clone-ssh" data-link="{{.CloneLink.SSH}}">
+            SSH
+          </button>
+          {{end}}
+          <button class="ui {{if $.DisableSSH}}blue{{end}} basic clone button" id="repo-clone-https" data-link="{{.CloneLink.HTTPS}}">
+            HTTPS
+          </button>
+          <input id="repo-clone-url" value="{{if $.DisableSSH}}{{$.CloneLink.HTTPS}}{{else}}{{$.CloneLink.SSH}}{{end}}" readonly>
+          <button class="ui basic icon button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
+            <i class="octicon octicon-clippy"></i>
+          </button>
+          <div class="ui basic jump dropdown icon button">
+            <i class="download icon"></i>
+            <div class="menu">
+              <a class="item" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.zip"><i class="icon octicon octicon-file-zip"></i> ZIP</a>
+              <a class="item" href="{{$.RepoLink}}/archive/{{EscapePound $.BranchName}}.tar.gz"><i class="icon octicon octicon-file-zip"></i> TAR.GZ</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ul class="head meta">
+      {{if and .IsRepositoryAdmin .Repository.BaseRepo}}
+      <li>
+        {{ $baseRepo := .Repository.BaseRepo}}
+        <a href="{{AppSubUrl}}/{{$baseRepo.Owner.Name}}/{{$baseRepo.Name}}/compare/{{$.BaseDefaultBranch}}...{{$.Owner.Name}}:{{$.BranchName}}">
+          <button class="ui green small button"><i class="octicon octicon-git-compare"></i></button>
+        </a>
+      </li>
+      {{end}}
+      <li>
+        <div class="choose reference">
+          <div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
+            <div class="ui basic small button">
+              <span class="text">
+                <i class="octicon octicon-git-branch"></i> 
+                {{if .IsViewBranch}}{{.i18n.Tr "repo.branch"}}{{else}}{{.i18n.Tr "repo.tree"}}{{end}}:
+                <strong>{{if .IsViewBranch}}{{.BranchName}}{{else}}{{ShortSha .BranchName}}{{end}}</strong>
+              </span>
+              <i class="dropdown icon"></i>
+            </div>
+            <div class="menu">
+              <div class="ui icon search input">
+                <i class="filter icon"></i>
+                <input name="search" placeholder="{{.i18n.Tr "repo.filter_branch_and_tag"}}...">
+              </div>
+              <div class="header">
+                <div class="ui grid">
+                  <div class="two column row">
+                    <a class="reference column" href="#" data-target="#branch-list">
+                      <span class="text {{if .IsViewBranch}}black{{end}}">
+                        <i class="icon octicon octicon-git-branch"></i> {{.i18n.Tr "repo.branches"}}
+                      </span>
                     </a>
-                </li>
-                <li id="repo-find-jump" class="repo-jump right">
-                    <a href="#">
-                        <button class="btn btn-small btn-gray btn-left-radius"><i class="octicon octicon-list-unordered"></i></button>
+                    <a class="reference column" href="#" data-target="#tag-list">
+                      <span class="text {{if .IsTag}}black{{end}}">
+                        <i class="reference tags icon"></i> {{.i18n.Tr "repo.tags"}}
+                      </span>
                     </a>
-                </li> -->
-            </ul>
-            {{if .IsFile}}
-                {{template "repo/view_file" .}}
+                  </div>
+                </div>
+              </div>
+              <div id="branch-list" class="scrolling menu" {{if .IsTag}}style="display: none"{{end}}>
+                {{range .Branches}}
+                <div class="item {{if eq $.BranchName .}}selected{{end}}" data-url="{{$.RepoLink}}/src/{{EscapePound .}}">{{.}}</div>
+                {{end}}
+              </div>
+              <div id="tag-list" class="scrolling menu" {{if .IsViewBranch}}style="display: none"{{end}}>
+                {{range .Tags}}
+                <div class="item {{if eq $.BranchName .}}selected{{end}}" data-url="{{$.RepoLink}}/src/{{EscapePound .}}">{{.}}</div>
+                {{end}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="ui breadcrumb">
+          <a class="section" href="{{.RepoLink}}/src/{{EscapePound .BranchName}}">{{.Repository.Name}}</a>
+          {{ $n := len .Treenames}}
+          {{ $l := Subtract $n 1}}
+          {{range $i, $v := .Treenames}}
+            <div class="divider"> / </div>
+            {{if eq $i $l}}
+            <span class="active section">{{$v}}</span>
             {{else}}
-                {{template "repo/view_list" .}}
+            {{ $p := index $.Paths $i}}
+            <span class="section"><a href="{{EscapePound $.BranchLink}}/{{EscapePound $p}}">{{$v}}</a></span>
             {{end}}
+          {{end}}
         </div>
-        {{template "repo/sidebar" .}}
-    </div>
+      </li>
+    </ul>
+    {{if .IsFile}}
+      {{template "repo/view_file" .}}
+    {{else}}
+      {{template "repo/view_list" .}}
+    {{end}}
+  </div>
 </div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}
diff --git a/templates/repo/sidebar.tmpl b/templates/repo/sidebar.tmpl
index 6859dabf44..df033c0e15 100644
--- a/templates/repo/sidebar.tmpl
+++ b/templates/repo/sidebar.tmpl
@@ -1,30 +1,19 @@
-<div id="repo-sidebar" class="right grid-1-6">
-    <ul class="menu menu-vertical" id="repo-sidebar-nav">
-        <li>
-            <a class="radius" href="{{.RepoLink}}/issues"><i class="octicon octicon-issue-opened"></i>{{.i18n.Tr "repo.issues"}}<span class="num right label label-blue label-radius">{{.Repository.NumOpenIssues}}</span></a>
-        </li>
-        <li>
-            <a class="radius" href="{{.RepoLink}}/pulls"><i class="octicon octicon-git-pull-request"></i>{{.i18n.Tr "repo.pulls"}}<span class="num right label label-blue label-radius">{{.Repository.NumOpenPulls}}</span></a>
-        </li>
-        <li class="border-bottom"></li>
-        <li class="head">{{if .IsViewBranch}}{{.BranchName}}{{else}}{{ShortSha .BranchName}}{{end}}</li>
-        <li>
-            <a class="radius" href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}"><i class="octicon octicon-history"></i>{{.i18n.Tr "repo.commits"}} <span class="num right label label-gray label-radius">{{.CommitsCount}}</span></a>
-        </li>
-        <!-- <li>
-            <a class="radius" href="{{.RepoLink}}/branches"><i class="octicon octicon-git-branch"></i>Branches<span class="num right label label-gray label-radius">{{.BrancheCount}}</span></a>
-        </li> -->
-        <li>
-            <a class="radius" href="{{.RepoLink}}/releases"><i class="octicon octicon-tag"></i>{{.i18n.Tr "repo.releases"}} <span class="num right label label-gray label-radius">{{.Repository.NumTags}}</span></a>
-        </li>
-        <!-- <li>
-            <a class="radius" href="#"><i class="octicon octicon-organization"></i>contributors <span class="num right label label-gray label-radius">43</span></a>
-        </li> -->
-        {{if .IsRepositoryAdmin}}
-        <li class="border-bottom"></li>
-        <li>
-            <a class="radius" href="{{.RepoLink}}/settings"><i class="octicon octicon-tools"></i>{{.i18n.Tr "repo.settings"}}</a>
-        </li>
-        {{end}}
-    </ul>
+<div class="ui five item menu">
+    <a class="item" href="{{.RepoLink}}/issues">
+      <i class="icon octicon octicon-issue-opened"></i> {{.i18n.Tr "repo.issues"}} <span class="ui blue label">{{.Repository.NumOpenIssues}}</span>
+    </a>
+    <a class="item" href="{{.RepoLink}}/pulls">
+      <i class="icon octicon octicon-git-pull-request"></i> {{.i18n.Tr "repo.pulls"}} <span class="ui blue label">{{.Repository.NumOpenPulls}}</span>
+    </a>
+    <a class="item" href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}">
+      <i class="icon octicon octicon-history"></i> {{.i18n.Tr "repo.commits"}} <span class="ui blue label">{{.CommitsCount}}</span>
+    </a>
+    <a class="item" href="{{.RepoLink}}/releases">
+      <i class="icon octicon octicon-tag"></i> {{.i18n.Tr "repo.releases"}} <span class="ui blue label">{{.Repository.NumTags}}</span>
+    </a>
+    {{if .IsRepositoryAdmin}}
+    <a class="item" href="{{.RepoLink}}/settings">
+      <i class="icon octicon octicon-tools"></i> {{.i18n.Tr "repo.settings"}}
+    </a>
+    {{end}}
 </div>
\ No newline at end of file
diff --git a/templates/repo/sidebar_mini.tmpl b/templates/repo/sidebar_mini.tmpl
deleted file mode 100644
index dfd48c842e..0000000000
--- a/templates/repo/sidebar_mini.tmpl
+++ /dev/null
@@ -1,12 +0,0 @@
-<ul class="menu menu-vertical" id="repo-sidebar-mini">
-    <li><a href="#" class="btn-right-radius"><i class="octicon octicon-code"></i></a></li>
-    <li class="border-bottom"></li>
-    <li><a href="#" class="btn-right-radius"><i class="octicon octicon-issue-opened"></i>
-        <span class="num label label-blue">999</span>
-    </a></li>
-    <li class="current"><a href="#" class="btn-right-radius"><i class="octicon octicon-git-pull-request"></i>
-        <span class="num label label-black">12</span>
-    </a></li>
-    <li class="border-bottom"></li>
-    <li><a href="#" class="btn-right-radius"><i class="octicon octicon-tools"></i></a></li>
-</ul>
\ No newline at end of file
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index a0d6781cbc..827e51931d 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -1,50 +1,50 @@
-<div class="panel panel-radius" id="{{if .ReadmeExist}}repo-readme{{else}}repo-read-file{{end}}">
-    <p class="panel-header">
-        {{if .ReadmeExist}}
-            <i class="icon fa fa-book fa-lg"></i>
-	        {{if .ReadmeInList}}
-	        <strong class="file-name">{{.FileName}}</strong>
-	        {{else}}
-	        <strong>{{.FileName}}</strong><span class="file-size">{{FileSize .FileSize}}</span>
-	        {{end}}
-	    {{else}}
-            <i class="icon fa fa-file-text-o"></i>
-            <strong class="file-name">{{.FileName}}</strong><span class="file-size">{{FileSize .FileSize}}</span>
-	    {{end}}
-        {{if not .ReadmeInList}}
-            {{if not .IsCommit}}
-                <a class="right" href="{{.RepoLink}}/src/{{.CommitID}}/{{EscapePound .TreeName}}">
-                    <button class="btn btn-medium btn-gray btn-right-radius btn-comb">{{.i18n.Tr "repo.file_permalink"}}</button>
-                </a>
-            {{end}}
-            <a class="right" href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}/{{EscapePound .TreeName}}">
-                <button class="btn btn-medium btn-gray btn-right-radius btn-comb">{{.i18n.Tr "repo.file_history"}}</button>
-            </a>
-            <a class="right" href="{{EscapePound .FileLink}}">
-                <button class="btn btn-medium btn-gray btn-left-radius btn-comb">{{.i18n.Tr "repo.file_raw"}}</button>
-            </a>
+<div id="file-content">
+  <h4 class="ui top attached header" id="{{if .ReadmeExist}}repo-readme{{else}}repo-read-file{{end}}">
+    {{if .ReadmeExist}}
+      <i class="book icon ui left"></i>
+      {{if .ReadmeInList}}
+      <strong>{{.FileName}}</strong>
+      {{else}}
+      <strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}</span>
+      {{end}}
+    {{else}}
+      <i class="file text outline icon ui left"></i>
+      <strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}</span>
+    {{end}}
+    {{if not .ReadmeInList}}
+    <div class="ui right">
+      <div class="ui small grey basic buttons">
+        {{if not .IsCommit}}
+          <a class="ui button" href="{{.RepoLink}}/src/{{.CommitID}}/{{EscapePound .TreeName}}">{{.i18n.Tr "repo.file_permalink"}}</a>
         {{end}}
-    </p>
-    <div class="{{if .ReadmeExist}}panel-content markdown{{end}} code-view" id="repo-code-view">
-    	{{if .ReadmeExist}}
-    	{{if .FileContent}}{{.FileContent | Str2html}}{{end}}
+        <a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}/{{EscapePound .TreeName}}">{{.i18n.Tr "repo.file_history"}}</a>
+        <a class="ui button" href="{{EscapePound .FileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
+      </div>
+    </div>
+    {{end}}
+  </h4>
+  <div class="ui attached table segment">
+    <div class="{{if .ReadmeExist}}markdown{{else if .IsFileText}}code-view{{end}}">
+      {{if .ReadmeExist}}
+      {{if .FileContent}}{{.FileContent | Str2html}}{{end}}
         {{else if not .IsFileText}}
         <div class="view-raw">
-            {{if .IsImageFile}}
-            <img src="{{EscapePound .FileLink}}">
-            {{else}}
-            <a href="{{EscapePound .FileLink}}" rel="nofollow" class="btn btn-gray btn-radius">{{.i18n.Tr "repo.file_view_raw"}}</a>
-            {{end}}
+          {{if .IsImageFile}}
+          <img src="{{EscapePound .FileLink}}">
+          {{else}}
+          <a href="{{EscapePound .FileLink}}" rel="nofollow" class="btn btn-gray btn-radius">{{.i18n.Tr "repo.file_view_raw"}}</a>
+          {{end}}
         </div>
-    	{{else if .FileSize}}
+      {{else if .FileSize}}
         <table>
-            <tbody>
-                <tr>
-                    <td class="lines-num"></td>
-                    <td class="lines-code"><pre class="prettyprint linenums {{if .FileExt}}lang-{{.FileExt}}{{end}}"><code>{{.FileContent}}</code></pre></td>
-                </tr>
-            </tbody>
+          <tbody>
+            <tr>
+              <td class="lines-num"></td>
+              <td class="lines-code"><pre class="{{if .FileExt}}lang-{{.FileExt}}{{end}}"><code><ol class="linenums">{{.FileContent}}</ol></code></pre></td>
+            </tr>
+          </tbody>
         </table>
-    	{{end}}
+      {{end}}
     </div>
-</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 50d0074be8..9edbd687c8 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -1,69 +1,64 @@
-<table id="repo-files-table" class="table-border table-block table-radius">
-    <thead>
+<table id="repo-files-table" class="ui table">
+  <thead>
     <tr>
-        <th colspan="5" class="clear">
-            <span class="author left">
-                {{if .LastCommitUser}}
-                <img class="avatar-24 radius" src="{{.LastCommitUser.AvatarLink}}" />
-                <a href="{{AppSubUrl}}/{{.LastCommitUser.Name}}"><strong>{{.LastCommit.Author.Name}}</strong></a>:
-                {{else}}
-                <img class="avatar-24 radius" src="{{AvatarLink .LastCommit.Author.Email}}" />
-                <strong>{{.LastCommit.Author.Name}}</strong>:
-                {{end}}
-                &nbsp;
-            </span>
-            <span class="last-commit"><a href="{{.RepoLink}}/commit/{{.LastCommit.ID}}" rel="nofollow">
-                <strong>{{ShortSha .LastCommit.ID.String}}</strong></a>
-                <span class="text-truncate">{{RenderCommitMessage .LastCommit.Summary .RepoLink}}</span>
-            </span>
-            <span class="age right">{{TimeSince .LastCommit.Author.When $.Lang}}</span>
-        </th>
+      <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>
     </tr>
-    </thead>
-    <tbody>
-        {{if .HasParentPath}}
-        <tr class="has-parent">
-            <td class="icon"></td>
-            <td class="name"><a href="{{EscapePound .BranchLink}}{{.ParentPath}}">..</a></td>
-            <th class="sha">SHA1</th>
-            <td class="msg"></td>
-            <td class="age"></td>
-        </tr>
-        {{end}}
-        {{range $item := .Files}}
-            {{$entry := index $item 0}}
-            {{$commit := index $item 1}}
-            <tr>
-            {{if $entry.IsSubModule}}
-            <td class="icon">
-                    <span class="octicon octicon-file-submodule"></span>
-                </td>
-                <td class="name">
-                    {{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}}
-                    {{$entry.Name}} @ {{ShortSha $commit.RefId}}
-                    {{end}}
-                </td>
-            {{else}}
-            <td class="icon">
-                    <span class="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="label label-green" 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>
-                <td class="age">{{TimeSince $commit.Committer.When $.Lang}}</td>
-            </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>
+    </tr>
+    {{end}}
+    {{range $item := .Files}}
+      {{$entry := index $item 0}}
+      {{$commit := index $item 1}}
+      <tr>
+        {{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>
+          {{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>
+        </td>
         {{end}}
-    </tbody>
+        <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>
+        <td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>
+      </tr>
+    {{end}}
+  </tbody>
 </table>
 {{if .ReadmeExist}}
-    {{template "repo/view_file" .}}
+  {{template "repo/view_file" .}}
 {{end}}