UI: Repo header tweaks (#5945)
* UI: Repo header tweaks - Use basic buttons on the header buttons, matching gogs - Make 'Manage topic' text smaller, remove margin-left with no topics present - Move various inline styles to CSS - Use flexbox on header title and buttons * fix indentation * reverse media query wrapping * fix inconsisten whitespace
This commit is contained in:
silverwind
techknowlogick
parent
c20034be31
commit
acaf5c96fe
7 changed files with 58 additions and 34 deletions
|
|
@ -15,7 +15,7 @@ indent_size = 8
|
|||
indent_style = tab
|
||||
indent_size = 4
|
||||
|
||||
[*.{less}]
|
||||
[*.less]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2605,7 +2605,7 @@ function initNavbarContentToggle() {
|
|||
function initTopicbar() {
|
||||
var mgrBtn = $("#manage_topic"),
|
||||
editDiv = $("#topic_edit"),
|
||||
viewDiv = $("#repo-topic"),
|
||||
viewDiv = $("#repo-topics"),
|
||||
saveBtn = $("#save_topic"),
|
||||
topicDropdown = $('#topic_edit .dropdown'),
|
||||
topicForm = $('#topic_edit.ui.form'),
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ img {
|
|||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: .28571429rem !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
.ui.label {
|
||||
margin-top: -2px;
|
||||
margin-left: 7px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
|
@ -1836,15 +1835,40 @@ tbody.commit-list {
|
|||
}
|
||||
|
||||
#topic_edit {
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
#repo-topic {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.new-dependency-drop-list {
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
#repo-topics {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.repo-topic {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.new-dependency-drop-list {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#manage_topic {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.label + #manage_topic {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.repo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.repo-header .repo-title,
|
||||
.repo-header .repo-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,27 @@
|
|||
<div class="header-wrapper">
|
||||
{{with .Repository}}
|
||||
<div class="ui container">
|
||||
<div class="ui stackable grid header-grid">
|
||||
<div class="nine wide column">
|
||||
<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 .IsArchived}}<i class="archive icon archived-icon"></i>{{end}}
|
||||
{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{$.Mirror.Address}}">{{$.Mirror.Address}}</a></div>{{end}}
|
||||
{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
|
||||
</div>
|
||||
<div class="repo-header">
|
||||
<div class="ui huge breadcrumb repo-title">
|
||||
<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 .IsArchived}}<i class="archive icon archived-icon"></i>{{end}}
|
||||
{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{$.Mirror.Address}}">{{$.Mirror.Address}}</a></div>{{end}}
|
||||
{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
|
||||
</div>
|
||||
|
||||
<div class="ui seven wide right aligned column">
|
||||
<div class="ui compact labeled button" tabindex="0">
|
||||
<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
|
||||
<div class="repo-buttons">
|
||||
<div class="ui labeled button" tabindex="0">
|
||||
<a class="ui compact basic button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
|
||||
<i class="icon fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}}
|
||||
</a>
|
||||
<a class="ui basic label" href="{{.Link}}/watchers">
|
||||
{{.NumWatches}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="ui compact labeled button" tabindex="0">
|
||||
<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
|
||||
<div class="ui labeled button" tabindex="0">
|
||||
<a class="ui compact basic button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
|
||||
<i class="icon star{{if not $.IsStaringRepo}} outline{{end}}"></i>{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
|
||||
</a>
|
||||
<a class="ui basic label" href="{{.Link}}/stars">
|
||||
|
|
@ -32,8 +29,8 @@
|
|||
</a>
|
||||
</div>
|
||||
{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}}
|
||||
<div class="ui compact labeled button" tabindex="0">
|
||||
<a class="ui compact button {{if or (not $.IsSigned) (not $.CanSignedUserFork)}}poping up{{end}}" {{if $.CanSignedUserFork}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else if $.IsSigned}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" {{ else }} data-content="{{$.i18n.Tr "repo.fork_guest_user" }}" href="{{AppSubUrl}}/user/login?redirect_to={{AppSubUrl}}/repo/fork/{{.ID}}" {{end}} data-position="top center" data-variation="tiny">
|
||||
<div class="ui labeled button" tabindex="0">
|
||||
<a class="ui compact basic button {{if or (not $.IsSigned) (not $.CanSignedUserFork)}}poping up{{end}}" {{if $.CanSignedUserFork}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else if $.IsSigned}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" {{ else }} data-content="{{$.i18n.Tr "repo.fork_guest_user" }}" href="{{AppSubUrl}}/user/login?redirect_to={{AppSubUrl}}/repo/fork/{{.ID}}" {{end}} data-position="top center" data-variation="tiny">
|
||||
<i class="octicon octicon-repo-forked"></i>{{$.i18n.Tr "repo.fork"}}
|
||||
</a>
|
||||
<a class="ui basic label" href="{{.Link}}/forks">
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="ui repo-topic" id="repo-topic">
|
||||
{{range .Topics}}<a class="ui green basic label topic" style="cursor:pointer;" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
|
||||
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic" style="cursor:pointer;margin-left:10px;">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
|
||||
<div class="ui" id="repo-topics">
|
||||
{{range .Topics}}<a class="ui repo-topic green basic label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
|
||||
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
|
||||
</div>
|
||||
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
|
||||
<div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none">
|
||||
|
|
|
|||
Reference in a new issue