Merge pull request #1466 from manfer/semantic

modified repo header

3 files changed, 88 insertions, 48 deletions

diff --git a/public/less/_base.less b/public/less/_base.less
index 388160a565..ba7163346b 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -38,6 +38,9 @@ img {
 	.top.menu a.item:hover {
 		color: rgba(0,0,0,.45);
 	}
+	.top.menu .menu {
+		z-index: 900;
+	}
 	.head.link.item {
 		padding-right: 0!important;
 		.dropdown.icon,
@@ -74,12 +77,21 @@ img {
 		&.right {
 			text-align: right;
 		}
+		&.small {
+			font-size: 0.75em;
+		}
 	}
 
 	.message {
 		text-align: center;
 	}
+
+	.header > i + .content {
+		padding-left: 0.75rem;
+		vertical-align: middle;
+	}
 }
+
 footer {
 	margin-top: @footer-margin!important;
 	height: @footer-margin;
@@ -125,7 +137,8 @@ footer {
   .generate-img(@n, (@i + 1));
 }
 
-.octicon.icon {
+.octicon.icon,
+.mega-octicon.icon {
 	font-family: octicons;
 }
 
diff --git a/public/less/_repository.less b/public/less/_repository.less
index cb33a2a807..48fe8e4a67 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -3,32 +3,16 @@
 
 	padding-top: 15px;
 	padding-bottom: @footer-margin * 3;
+
 	.head {
-		height: 40px;
-		background-color: #FCFCFC;
-		.mega-octicon {
-			width: @mega-octicon-width;
-			font-size: 30px;
-		}
-		a,
-		.fork-flag {
-			font-weight: 300;
-		}
-		.ui.label {
-			margin-top: 5px;
-			vertical-align: top;
+		.ui.compact.menu {
+			margin-left: 1rem;
 		}
-		.fork-flag {
-			margin-left: @mega-octicon-width + 8px;
-			display: block;
-			font-size: 11px;
-			line-height: 10px;
-			white-space: nowrap;
-		}
-		.num {
-			font-weight: bold;
+		.ui.header {
+			margin-top: 0;
 		}
 	}
+
 	.metas {
 		.menu {
 			max-height: 300px;
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}}