modified repo header

1 files changed, 68 insertions, 25 deletions

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 66e88a0530..aaa671f093 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -1,27 +1,70 @@
 {{with .Repository}}
-<div class="ui head container">
-	<div class="ui huge breadcrumb">
-	<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
-  <a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
-  <div class="divider"> / </div>
-  <a href="{{$.RepoLink}}">{{.Name}}</a>
-  {{if .IsMirror}}<div class="ui label">{{$.i18n.Tr "mirror"}}</div>{{end}}
-  {{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.RepoLink}}">{{SubStr .BaseRepo.RepoLink 1 -1}}</a></div>{{end}}
-	</div>
-	<div class="ui right">
-		<a class="ui black basic button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
-		  <i class="fa fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>
-		  {{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}} <span class="num">{{.NumWatches}}</span>
-		</a>
-		<a class="ui black basic button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
-		  <i class="fa fa-star{{if not $.IsStaringRepo}}-o{{end}}"></i>
-		  {{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}} <span class="num">{{.NumStars}}</span>
-		</a>
-		<a class="ui black basic button {{if $.IsRepositoryOwner}}poping up{{end}}" {{if not $.IsRepositoryOwner}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{end}} {{if $.IsRepositoryOwner}}data-content="{{$.i18n.Tr "repo.fork_from_self"}}" data-position="top right"{{end}}>
-		  <i class="octicon octicon-repo-forked"></i>
-		  {{$.i18n.Tr "repo.fork"}} <span class="num">{{.NumForks}}</span>
-		</a>
-	</div>
-</div>
+<div class="ui container"><!-- start container -->
+
+	<div id="repoheader" class="ui vertically padded grid head"><!-- start grid -->
+
+		<div class="column"><!-- start column -->
+
+			<div class="ui grey small compact menu floated right count labelled">
+				<a class="item{{if $.IsRepositoryOwner}} poping up{{end}}"{{if not $.IsRepositoryOwner}} href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" data-position="top center" data-variation="tiny"{{end}}>
+					<i class="icon octicon octicon-repo-forked"></i>
+					{{$.i18n.Tr "repo.fork"}}
+				</a>
+				<span class="active item num">{{.NumForks}}</span>
+			</div>
+
+			<div class="ui grey small compact menu floated right count labelled">
+				<a class="item" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
+					<i class="icon fa-star{{if not $.IsStaringRepo}}-o{{end}}"></i>
+					{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
+				</a>
+				<span class="active item num">{{.NumStars}}</span>
+			</div>
+
+			<div class="ui grey small compact menu floated right count labelled">
+				<a class="item" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
+					<i class="icon fa fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>
+					{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}}
+				</a>
+				<span class="active item num">{{.NumWatches}}</span>
+			</div>
+
+			<div class="ui header"><!-- start header -->
+
+				<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
+
+				<div class="content">
+
+					<div class="ui huge breadcrumb"><!-- start breadcrumb -->
+
+						<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
+
+						<div class="divider"> / </div>
+
+						<a href="{{$.RepoLink}}">{{.Name}}</a>
+
+						{{if .IsMirror}}
+						<div class="divider"></div>
+						<div class="ui small label">{{$.i18n.Tr "mirror"}}</div>
+						{{end}}
+
+						{{if .IsFork}}
+						<div class="sub header">
+						<span class="ui text small">{{$.i18n.Tr "repo.forked_from"}}</span> <a href="{{.BaseRepo.RepoLink}}">{{SubStr .BaseRepo.RepoLink 1 -1}}</a>
+						</div>
+						{{end}}
+
+					</div><!-- end breadcrumb -->
+
+				</div><!-- end content -->
+
+			</div><!-- end header -->
+
+		</div><!-- end column -->
+
+	</div><!-- end grid -->
+	
+</div><!-- end container -->
+
 <div class="ui divider"></div>
-{{end}}
\ No newline at end of file
+{{end}}