diff --git a/public/less/_base.less b/public/less/_base.less index 388160a56..ba7163346 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 df0d49fd8..213255f11 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; + .ui.compact.menu { + margin-left: 1rem; } - a, - .fork-flag { - font-weight: 300; - } - .ui.label { - margin-top: 5px; - vertical-align: top; - } - .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 66e88a053..aaa671f09 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}}