Merge pull request #1466 from manfer/semantic

modified repo header
This commit is contained in:
无闻 2015-08-12 18:46:19 +08:00
commit 52933932d2
3 changed files with 88 additions and 48 deletions

View file

@ -38,6 +38,9 @@ img {
.top.menu a.item:hover { .top.menu a.item:hover {
color: rgba(0,0,0,.45); color: rgba(0,0,0,.45);
} }
.top.menu .menu {
z-index: 900;
}
.head.link.item { .head.link.item {
padding-right: 0!important; padding-right: 0!important;
.dropdown.icon, .dropdown.icon,
@ -74,12 +77,21 @@ img {
&.right { &.right {
text-align: right; text-align: right;
} }
&.small {
font-size: 0.75em;
}
} }
.message { .message {
text-align: center; text-align: center;
} }
.header > i + .content {
padding-left: 0.75rem;
vertical-align: middle;
}
} }
footer { footer {
margin-top: @footer-margin!important; margin-top: @footer-margin!important;
height: @footer-margin; height: @footer-margin;
@ -125,7 +137,8 @@ footer {
.generate-img(@n, (@i + 1)); .generate-img(@n, (@i + 1));
} }
.octicon.icon { .octicon.icon,
.mega-octicon.icon {
font-family: octicons; font-family: octicons;
} }

View file

@ -3,32 +3,16 @@
padding-top: 15px; padding-top: 15px;
padding-bottom: @footer-margin * 3; padding-bottom: @footer-margin * 3;
.head { .head {
height: 40px; .ui.compact.menu {
background-color: #FCFCFC; margin-left: 1rem;
.mega-octicon {
width: @mega-octicon-width;
font-size: 30px;
} }
a, .ui.header {
.fork-flag { margin-top: 0;
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;
} }
} }
.metas { .metas {
.menu { .menu {
max-height: 300px; max-height: 300px;

View file

@ -1,27 +1,70 @@
{{with .Repository}} {{with .Repository}}
<div class="ui head container"> <div class="ui container"><!-- start container -->
<div class="ui huge breadcrumb">
<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> <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> <a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
<div class="divider"> / </div> <div class="divider"> / </div>
<a href="{{$.RepoLink}}">{{.Name}}</a> <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}} {{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> </div>
<div class="ui right"> {{end}}
<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> </div><!-- end breadcrumb -->
{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}} <span class="num">{{.NumWatches}}</span>
</a> </div><!-- end content -->
<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> </div><!-- end header -->
{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}} <span class="num">{{.NumStars}}</span>
</a> </div><!-- end column -->
<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> </div><!-- end grid -->
{{$.i18n.Tr "repo.fork"}} <span class="num">{{.NumForks}}</span>
</a> </div><!-- end container -->
</div>
</div>
<div class="ui divider"></div> <div class="ui divider"></div>
{{end}} {{end}}