Merge pull request #2068 from nanoant/patch/repo-file-list-layout

Repo file list layout & misc fixes

28 files changed, 214 insertions, 298 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index d58c4e2540..c3ac5ffce1 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -5,7 +5,9 @@
   font-style: normal;
 }
 .octicon,
-.mega-octicon {
+.mega-octicon,
+.icon.octicon,
+.icon.mega-octicon {
   font: normal normal normal 16px/1 octicons;
   display: inline-block;
   text-decoration: none;
@@ -911,6 +913,13 @@ pre.raw {
 .ui .form .fake {
   display: none !important;
 }
+.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.status.buttons .octicon {
   margin-right: 4px;
 }
@@ -1806,6 +1815,17 @@ footer .container .links > *:first-child {
   margin: 1px;
   padding-right: 0;
 }
+.repository .ui.tabs.container {
+  margin-top: 14px;
+  margin-bottom: 0px;
+}
+.repository .ui.tabs.container .ui.menu {
+  border-bottom: none;
+}
+.repository .ui.tabs.divider {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
 .repository #clone-panel {
   margin-top: -8px;
   width: 100%;
@@ -1834,54 +1854,21 @@ footer .container .links > *:first-child {
 .repository.file.list .choose.reference .header .icon {
   font-size: 1.4em;
 }
-.repository.file.list .head.meta {
-  padding: 0;
-}
-.repository.file.list .head.meta li {
-  list-style: none;
-  display: inline-block;
-}
-.repository.file.list .head.meta li .ui.breadcrumb {
-  margin-top: -5px;
-}
-.repository.file.list .head.meta li .ui.breadcrumb span,
-.repository.file.list .head.meta li .ui.breadcrumb a {
-  font-size: 16px;
-}
-.repository.file.list #repo-files-table .table.list {
-  width: 80% !important;
-}
 .repository.file.list #repo-files-table thead th {
   padding-top: 8px;
   padding-bottom: 5px;
   font-weight: normal;
 }
-.repository.file.list #repo-files-table thead th #last-commit-message {
-  margin-left: 5px;
-  margin-bottom: -4px;
-  width: 400px;
-}
-.repository.file.list #repo-files-table thead th .age {
-  margin-top: 2px;
+.repository.file.list #repo-files-table thead th:first-child {
+  display: block;
+  position: relative;
+  width: 325%;
 }
 .repository.file.list #repo-files-table thead .ui.avatar {
   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;
-}
-.repository.file.list #repo-files-table tbody .text.truncate {
-  margin-bottom: -5px;
-  max-width: 100%;
+  margin-right: 5px;
 }
 .repository.file.list #repo-files-table td {
   padding-top: 8px;
@@ -2246,31 +2233,6 @@ footer .container .links > *:first-child {
   font-weight: normal;
   padding: 5px 10px;
 }
-.repository .commits.table {
-  font-size: 13px;
-}
-.repository .commits.table th:first-child,
-.repository .commits.table td:first-child {
-  padding-left: 15px;
-}
-.repository .commits.table td {
-  line-height: 15px;
-}
-.repository .commits.table .author {
-  min-width: 180px;
-}
-.repository .commits.table .message span {
-  max-width: 500px;
-}
-.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/public/less/_base.less b/public/less/_base.less
index 086c687709..77ed754518 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -219,6 +219,14 @@ pre {
 		}
 	}
 
+	.sha.label {
+		font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
+		font-size: 13px;
+		padding: 6px 10px 4px 10px;
+		font-weight: normal;
+		margin: 0 6px;
+	}
+
 	&.status.buttons {
 		.octicon {
 			margin-right: 4px;
diff --git a/public/less/_octicons.less b/public/less/_octicons.less
index dfd437e6b1..a159dec851 100755
--- a/public/less/_octicons.less
+++ b/public/less/_octicons.less
@@ -14,7 +14,9 @@
 
 // .octicon is optimized for 16px.
 // .mega-octicon is optimized for 32px but can be used larger.
-.octicon, .mega-octicon {
+.octicon, .mega-octicon,
+// ensure Semantic UI .icon of 14px does not apply to .icon.octicon:
+.icon.octicon, .icon.mega-octicon {
   font: normal normal normal 16px/1 octicons;
   display: inline-block;
   text-decoration: none;
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 928d5cf357..ee17177fc1 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -91,6 +91,20 @@
 	 	}
 	}
 
+	.ui.tabs {
+		&.container {
+			margin-top: 14px;
+			margin-bottom: 0px;
+			.ui.menu {
+				border-bottom: none;
+			}
+		}
+		&.divider {
+			margin-top: 0;
+			margin-bottom: 20px;
+		}
+	}
+
 	#clone-panel {
 		margin-top: -8px;
 		width: 100%;
@@ -125,41 +139,17 @@
 				font-size: 1.4em;
 			}
 		}
-		.head.meta {
-			padding: 0;
-			li {
-				list-style: none;
-				display: inline-block;
-
-				.ui.breadcrumb {
-					margin-top: -5px;
-
-					span,
-					a {
-						font-size: 16px;
-					}
-				}
-			}
-		}
 
 		#repo-files-table {
-			.table.list {
-				width: 80% !important;
-			}
-
 			thead {
 				th {
 					padding-top: 8px;
 					padding-bottom: 5px;
 					font-weight: normal;
-
-					#last-commit-message {
-						margin-left: 5px;
-						margin-bottom: -4px;
-						width: 400px;
-					}
-					.age {
-						margin-top: 2px;
+					&:first-child {
+						display: block;
+						position: relative;
+						width: 325%;
 					}
 				}
 				.ui.avatar {
@@ -168,21 +158,7 @@
 			}
 			tbody {
 				.icon {
-					margin-left: 5px;
-				}
-				.name {
-					max-width: 120px;
-				}
-				.message {
-			    max-width: 300px;
-				}
-				.age {
-					min-width: 150px;
-				}
-
-				.text.truncate {
-					margin-bottom: -5px;
-					max-width: 100%;
+					margin-right: 5px;
 				}
 			}
 			td {
@@ -610,32 +586,6 @@
 			}
 		}
 	}
-	.commits.table {
-		font-size: 13px;
-		th, td {
-			&:first-child {
-				padding-left: 15px;
-			}
-		}
-		td {
-			line-height: 15px;
-		}
-		.author {
-			min-width: 180px;
-		}
-		.message span {
-			max-width: 500px;
-		}
-		.date {
-	    width: 120px;
-		}
-	}
-	.sha.label {
-		font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
-		font-size: 14px;
-		padding: 6px 10px 4px 10px;
-		font-weight: normal;
-	}
 
 	.diff-detail-box {
     margin: 15px 0;
diff --git a/templates/repo/commits.tmpl b/templates/repo/commits.tmpl
index 769841deea..03a07935c8 100644
--- a/templates/repo/commits.tmpl
+++ b/templates/repo/commits.tmpl
@@ -1,9 +1,9 @@
 {{template "base/head" .}}
 <div class="repository commits">
-	{{template "repo/header" .}}
+  {{template "repo/header" .}}
+  {{template "repo/sidebar" .}}
   <div class="ui container">
-    {{template "repo/sidebar" .}}
-		{{template "repo/commits_table" .}}
-	</div>
+    {{template "repo/commits_table" .}}
+  </div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl
index 58ab1ebb1e..5e207486ff 100644
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@@ -16,13 +16,12 @@
 
 {{if .Commits}}
 <div class="ui attached table segment">
-  <table class="ui very basic striped commits table">
+  <table class="ui very basic striped fixed single line">
     <thead>
       <tr>
-        <th>{{.i18n.Tr "repo.commits.author"}}</th>
-        <th>SHA1</th>
-        <th>{{.i18n.Tr "repo.commits.message"}}</th>
-        <th>{{.i18n.Tr "repo.commits.date"}}</th>
+        <th class="four wide">{{.i18n.Tr "repo.commits.author"}}</th>
+        <th class="nine wide message"><span class="ui sha label">&nbsp;&nbsp;&nbsp;SHA1&nbsp;&nbsp;&nbsp;</span> {{.i18n.Tr "repo.commits.message"}}</th>
+        <th class="three wide right aligned">{{.i18n.Tr "repo.commits.date"}}</th>
       </tr>
     </thead>
     <tbody>
@@ -36,9 +35,11 @@
           <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="date">{{TimeSince .Author.When $.Lang}}</td>
+        <td class="message">
+          <a rel="nofollow" class="ui green sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.ID}}">{{ShortSha .ID.String}}</a>
+          {{RenderCommitMessage .Summary $.RepoLink}}
+        </td>
+        <td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>
       </tr>
     {{end}}
     </tbody>
diff --git a/templates/repo/forks.tmpl b/templates/repo/forks.tmpl
index e3fd90c671..f541cd0a84 100644
--- a/templates/repo/forks.tmpl
+++ b/templates/repo/forks.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository forks">
   {{template "repo/header" .}}
+  {{template "repo/sidebar" .}}
   <div class="ui container">
-    {{template "repo/sidebar" .}}
     <h2 class="ui dividing header">
       {{.i18n.Tr "repo.forks"}}
     </h2>
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 06bd49b9cd..10455db516 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -44,5 +44,4 @@
     </div><!-- end column -->
   </div><!-- end grid -->
 </div><!-- end container -->
-<div class="ui divider"></div>
 {{end}}
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 260f637532..85094104bf 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -1,96 +1,66 @@
 {{template "base/head" .}}
 <div class="repository file list">
   {{template "repo/header" .}}
+  {{template "repo/sidebar" .}}
   <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 input" id="clone-panel">
-          {{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}}">
-            {{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
-          </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">
+    <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 class="ui secondary menu">
       {{if and .IsRepositoryAdmin .Repository.BaseRepo}}
-      <li>
+      <div class="fitted item">
         {{ $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>
+      </div>
       {{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 class="fitted item 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="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>
-                    <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>
-                  </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>
+                  <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>
                 </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 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>
-      </li>
-      <li>
+      </div>
+      <div class="item fitted">
         <div class="ui breadcrumb">
           <a class="section" href="{{.RepoLink}}/src/{{EscapePound .BranchName}}">{{.Repository.Name}}</a>
           {{ $n := len .Treenames}}
@@ -105,8 +75,33 @@
             {{end}}
           {{end}}
         </div>
-      </li>
-    </ul>
+      </div>
+      {{if eq $n 0}}
+      <div class="right fitted item">
+        <div class="ui action small input" id="clone-panel">
+          {{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}}">
+            {{if UseHTTPS}}HTTPS{{else}}HTTP{{end}}
+          </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>
+      {{end}}
+    </div>
     {{if .IsFile}}
       {{template "repo/view_file" .}}
     {{else}}
diff --git a/templates/repo/issue/labels.tmpl b/templates/repo/issue/labels.tmpl
index f622d1a23b..f955973c6d 100644
--- a/templates/repo/issue/labels.tmpl
+++ b/templates/repo/issue/labels.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository labels">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="navbar">
 			{{template "repo/issue/navbar" .}}
 			{{if .IsRepositoryAdmin}}
diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 479de75bc1..b927d80063 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="navbar">
 			{{template "repo/issue/navbar" .}}
 			<div class="ui right">
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index 7a62606514..527a90b4d4 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository milestones">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="navbar">
 			{{template "repo/issue/navbar" .}}
 			{{if .IsRepositoryAdmin}}
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index b8a8dff2f2..5c3aaae7ff 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository release">
   {{template "repo/header" .}}
+  {{template "repo/sidebar" .}}
   <div class="ui container">
-    {{template "repo/sidebar" .}}
     {{template "base/alert" .}}
     <h2 class="ui header">
       {{.i18n.Tr "repo.release.releases"}}
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index b966eb6c0b..fcf030314a 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository new release">
   {{template "repo/header" .}}
+  {{template "repo/sidebar" .}}
   <div class="ui container">
-    {{template "repo/sidebar" .}}
     <h2 class="ui dividing header">
       {{if .PageIsEditRelease}}
       {{.i18n.Tr "repo.release.edit_release"}}
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
index 26009edb69..0fdd397038 100644
--- a/templates/repo/settings/collaboration.tmpl
+++ b/templates/repo/settings/collaboration.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository settings collaboration">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="ui grid">
 			{{template "repo/settings/navbar" .}}
 			<div class="twelve wide column content">
diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl
index 9b37f48893..e0391b0598 100644
--- a/templates/repo/settings/deploy_keys.tmpl
+++ b/templates/repo/settings/deploy_keys.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository settings">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="ui grid">
 			{{template "repo/settings/navbar" .}}
 			<div class="twelve wide column content">
diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl
index 2f79481a2a..f5e80616c1 100644
--- a/templates/repo/settings/githook_edit.tmpl
+++ b/templates/repo/settings/githook_edit.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository settings edit githook">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="ui grid">
 			{{template "repo/settings/navbar" .}}
 			<div class="twelve wide column content">
diff --git a/templates/repo/settings/githooks.tmpl b/templates/repo/settings/githooks.tmpl
index 980b98fde9..910d750559 100644
--- a/templates/repo/settings/githooks.tmpl
+++ b/templates/repo/settings/githooks.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository settings githooks">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="ui grid">
 			{{template "repo/settings/navbar" .}}
 			<div class="twelve wide column content">
diff --git a/templates/repo/settings/hook_new.tmpl b/templates/repo/settings/hook_new.tmpl
index ac69b02f35..1e0fdd22be 100644
--- a/templates/repo/settings/hook_new.tmpl
+++ b/templates/repo/settings/hook_new.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository settings new webhook">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="ui grid">
 			{{template "repo/settings/navbar" .}}
 			<div class="twelve wide column content">
diff --git a/templates/repo/settings/hooks.tmpl b/templates/repo/settings/hooks.tmpl
index 187bd56360..eea165fa8b 100644
--- a/templates/repo/settings/hooks.tmpl
+++ b/templates/repo/settings/hooks.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository settings webhooks">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="ui grid">
 			{{template "repo/settings/navbar" .}}
 			{{template "repo/settings/hook_list" .}}
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index e109ec11c6..b14b223319 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository settings options">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
 	<div class="ui container">
-    {{template "repo/sidebar" .}}
 		<div class="ui grid">
 			{{template "repo/settings/navbar" .}}
 			<div class="twelve wide column content">
diff --git a/templates/repo/sidebar.tmpl b/templates/repo/sidebar.tmpl
index 912b50570b..e00fa3bcfd 100644
--- a/templates/repo/sidebar.tmpl
+++ b/templates/repo/sidebar.tmpl
@@ -1,27 +1,34 @@
 {{if not .IsBareRepo}}
-<div class="ui secondary pointing menu navbar">
-  <a class="{{if .PageIsViewCode}}active{{end}} item" href="{{.RepoLink}}">
-    <i class="icon octicon octicon-code"></i> {{.i18n.Tr "repo.code"}}
-  </a>
-  <a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">
-    <i class="icon octicon octicon-issue-opened"></i> {{.i18n.Tr "repo.issues"}} <span class="ui blue small label">{{.Repository.NumOpenIssues}}</span>
-  </a>
-  <a class="{{if .PageIsPullList}}active{{end}} item" href="{{.RepoLink}}/pulls">
-    <i class="icon octicon octicon-git-pull-request"></i> {{.i18n.Tr "repo.pulls"}} <span class="ui blue small label">{{.Repository.NumOpenPulls}}</span>
-  </a>
-  <a class="{{if .PageIsCommits}}active{{end}} item" href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}">
-    <i class="icon octicon octicon-history"></i> {{.i18n.Tr "repo.commits"}} <span class="ui blue small label">{{.CommitsCount}}</span>
-  </a>
-  <a class="{{if .PageIsReleaseList}}active{{end}} item" href="{{.RepoLink}}/releases">
-    <i class="icon octicon octicon-tag"></i> {{.i18n.Tr "repo.releases"}} <span class="ui blue small label">{{.Repository.NumTags}}</span>
-  </a>
-  <a class="{{if .PageIsWiki}}active{{end}} item" href="{{.RepoLink}}/wiki">
-    <i class="icon octicon octicon-book"></i> {{.i18n.Tr "repo.wiki"}}
-  </a>
-  {{if .IsRepositoryAdmin}}
-  <a class="{{if .PageIsSettings}}active{{end}} item" href="{{.RepoLink}}/settings">
-    <i class="icon octicon octicon-tools"></i> {{.i18n.Tr "repo.settings"}}
-  </a>
-  {{end}}
+<div class="ui tabs container">
+  <div class="ui tabular menu navbar">
+    <a class="{{if .PageIsViewCode}}active{{end}} item" href="{{.RepoLink}}">
+      <i class="icon octicon octicon-code"></i> {{.i18n.Tr "repo.code"}}
+    </a>
+    <a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">
+      <i class="icon octicon octicon-issue-opened"></i> {{.i18n.Tr "repo.issues"}} <span class="ui {{if eq 0 .Repository.NumOpenIssues}}gray{{else}}blue{{end}} small label">{{.Repository.NumOpenIssues}}</span>
+    </a>
+    <a class="{{if .PageIsPullList}}active{{end}} item" href="{{.RepoLink}}/pulls">
+      <i class="icon octicon octicon-git-pull-request"></i> {{.i18n.Tr "repo.pulls"}} <span class="ui {{if eq 0 .Repository.NumOpenPulls}}gray{{else}}blue{{end}} small label">{{.Repository.NumOpenPulls}}</span>
+    </a>
+    <a class="{{if .PageIsCommits}}active{{end}} item" href="{{.RepoLink}}/commits/{{EscapePound .BranchName}}">
+      <i class="icon octicon octicon-history"></i> {{.i18n.Tr "repo.commits"}} <span class="ui {{if eq 0 .CommitsCount}}gray{{else}}blue{{end}} small label">{{.CommitsCount}}</span>
+    </a>
+    <a class="{{if .PageIsReleaseList}}active{{end}} item" href="{{.RepoLink}}/releases">
+      <i class="icon octicon octicon-tag"></i> {{.i18n.Tr "repo.releases"}} <span class="ui {{if eq 0 .Repository.NumTags}}gray{{else}}blue{{end}} small label">{{.Repository.NumTags}}</span>
+    </a>
+    <a class="{{if .PageIsWiki}}active{{end}} item" href="{{.RepoLink}}/wiki">
+      <i class="icon octicon octicon-book"></i> {{.i18n.Tr "repo.wiki"}}
+    </a>
+    {{if .IsRepositoryAdmin}}
+    <div class="right menu">
+      <a class="{{if .PageIsSettings}}active{{end}} item" href="{{.RepoLink}}/settings">
+        <i class="icon octicon octicon-tools"></i> {{.i18n.Tr "repo.settings"}}
+      </a>
+    </div>
+    {{end}}
+  </div>
 </div>
+<div class="ui tabs divider"></div>
+{{else}}
+<div class="ui divider"></div>
 {{end}}
\ No newline at end of file
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 9edbd687c8..4acfa2b676 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}}
+        <a rel="nofollow" class="ui 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="nine wide">
       </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>
diff --git a/templates/repo/watchers.tmpl b/templates/repo/watchers.tmpl
index bfac88bb25..0ad6f58bf3 100644
--- a/templates/repo/watchers.tmpl
+++ b/templates/repo/watchers.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository watchers">
   {{template "repo/header" .}}
+  {{template "repo/sidebar" .}}
   <div class="ui container">
-    {{template "repo/sidebar" .}}
     <h2 class="ui dividing header">
       {{if .PageIsWatchers}}
       {{.i18n.Tr "repo.watchers"}}
diff --git a/templates/repo/wiki/new.tmpl b/templates/repo/wiki/new.tmpl
index 6a2ce43a58..be7a357fe1 100644
--- a/templates/repo/wiki/new.tmpl
+++ b/templates/repo/wiki/new.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository wiki new">
-	{{template "repo/header" .}}
+  {{template "repo/header" .}}
+  {{template "repo/sidebar" .}}
   <div class="ui container">
-    {{template "repo/sidebar" .}}
     {{template "base/alert" .}}
     <div class="ui header">
       {{.i18n.Tr "repo.wiki.new_page"}}
diff --git a/templates/repo/wiki/pages.tmpl b/templates/repo/wiki/pages.tmpl
index f99f6a4ecf..f8bff23221 100644
--- a/templates/repo/wiki/pages.tmpl
+++ b/templates/repo/wiki/pages.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository wiki pages">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
   <div class="ui container">
-    {{template "repo/sidebar" .}}
     <div class="ui header">
     	{{.i18n.Tr "repo.wiki.pages"}}
     	<div class="ui right">
diff --git a/templates/repo/wiki/start.tmpl b/templates/repo/wiki/start.tmpl
index 757ab9bce0..641822ddf3 100644
--- a/templates/repo/wiki/start.tmpl
+++ b/templates/repo/wiki/start.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository wiki start">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
   <div class="ui container">
-    {{template "repo/sidebar" .}}
     <div class="ui center segment">
     	<span class="mega-octicon octicon-book"></span>
     	<h2>{{.i18n.Tr "repo.wiki.welcome"}}</h2>
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index fe8b5b3b36..bfd0a8b601 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .}}
 <div class="repository wiki view">
 	{{template "repo/header" .}}
+	{{template "repo/sidebar" .}}
   <div class="ui container">
-    {{template "repo/sidebar" .}}
     <div class="ui grid">
       <div class="ui ten wide column">
         <div class="choose page">