realaravinth/bench-forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UI: Repo header tweaks (#5945)

Browse source 
* 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 2019-02-05 22:59:26 +01:00 committed by techknowlogick
parent c20034be31
commit acaf5c96fe
7 changed files with 58 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.editorconfig
View file

@ -15,7 +15,7 @@ indent_size = 8
indent_style = tab
indent_size = 4
[*.{less}]
[*.less]
indent_style = space
indent_size = 4

2
public/css/index.css
View file

File diff suppressed because one or more lines are too long

2
public/js/index.js
View file

@ -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'),

3
public/less/_base.less
View file

@ -12,6 +12,9 @@ img {
table {
border-collapse: collapse;
}
a {
cursor: pointer;
}
.rounded {
border-radius: .28571429rem !important;
}

30
public/less/_repository.less
View file

@ -48,7 +48,6 @@
display: flex;
justify-content: space-between;
.ui.label {
margin-top: -2px;
margin-left: 7px;
padding: 3px 5px;
}
@ -1839,12 +1838,37 @@ tbody.commit-list {
margin-top: 5px;
}
#repo-topic {
#repo-topics {
margin-top: 5px;
}
.new-dependency-drop-list {
.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;
}

21
templates/repo/header.tmpl
View file

@ -1,9 +1,8 @@
<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">
<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>
@ -12,19 +11,17 @@
{{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>
<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">

6
templates/repo/home.tmpl
View file

@ -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">