Skip to content

Commit acaf5c9

Browse files
silverwindtechknowlogick
silverwind
authored and
techknowlogick
committed
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
1 parent c20034b commit acaf5c9

File tree

7 files changed

+56
-32
lines changed

7 files changed

+56
-32
lines changed

‎.editorconfig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ indent_size = 8
1515
indent_style = tab
1616
indent_size = 4
1717

18-
[*.{less}]
18+
[*.less]
1919
indent_style = space
2020
indent_size = 4
2121

‎public/css/index.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2605,7 +2605,7 @@ function initNavbarContentToggle() {
26052605
function initTopicbar() {
26062606
var mgrBtn = $("#manage_topic"),
26072607
editDiv = $("#topic_edit"),
2608-
viewDiv = $("#repo-topic"),
2608+
viewDiv = $("#repo-topics"),
26092609
saveBtn = $("#save_topic"),
26102610
topicDropdown = $('#topic_edit .dropdown'),
26112611
topicForm = $('#topic_edit.ui.form'),

‎public/less/_base.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ img {
1212
table {
1313
border-collapse: collapse;
1414
}
15+
a {
16+
cursor: pointer;
17+
}
1518
.rounded {
1619
border-radius: .28571429rem !important;
1720
}

‎public/less/_repository.less

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
display: flex;
4949
justify-content: space-between;
5050
.ui.label {
51-
margin-top: -2px;
5251
margin-left: 7px;
5352
padding: 3px 5px;
5453
}
@@ -1836,15 +1835,40 @@ tbody.commit-list {
18361835
}
18371836

18381837
#topic_edit {
1839-
margin-top:5px;
1838+
margin-top: 5px;
18401839
}
18411840

1842-
#repo-topic {
1841+
#repo-topics {
18431842
margin-top: 5px;
18441843
}
18451844

1846-
.new-dependency-drop-list {
1847-
@media only screen and (max-width: 768px) {
1848-
width: 100%;
1849-
}
1845+
.repo-topic {
1846+
cursor: pointer;
1847+
}
1848+
1849+
@media only screen and (max-width: 768px) {
1850+
.new-dependency-drop-list {
1851+
width: 100%;
1852+
}
1853+
}
1854+
1855+
#manage_topic {
1856+
font-size: 12px;
1857+
}
1858+
1859+
.label + #manage_topic {
1860+
margin-left: 5px;
1861+
}
1862+
1863+
.repo-header {
1864+
display: flex;
1865+
align-items: center;
1866+
justify-content: space-between;
1867+
flex-wrap: wrap;
1868+
}
1869+
1870+
.repo-header .repo-title,
1871+
.repo-header .repo-buttons {
1872+
display: flex;
1873+
align-items: center;
18501874
}

‎templates/repo/header.tmpl

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,36 @@
11
<div class="header-wrapper">
22
{{with .Repository}}
33
<div class="ui container">
4-
<div class="ui stackable grid header-grid">
5-
<div class="nine wide column">
6-
<div class="ui huge breadcrumb">
7-
<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
8-
<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
9-
<div class="divider"> / </div>
10-
<a href="{{$.RepoLink}}">{{.Name}}</a>
11-
{{if .IsArchived}}<i class="archive icon archived-icon"></i>{{end}}
12-
{{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}}
13-
{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
14-
</div>
4+
<div class="repo-header">
5+
<div class="ui huge breadcrumb repo-title">
6+
<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
7+
<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
8+
<div class="divider"> / </div>
9+
<a href="{{$.RepoLink}}">{{.Name}}</a>
10+
{{if .IsArchived}}<i class="archive icon archived-icon"></i>{{end}}
11+
{{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}}
12+
{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
1513
</div>
16-
17-
<div class="ui seven wide right aligned column">
18-
<div class="ui compact labeled button" tabindex="0">
19-
<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
14+
<div class="repo-buttons">
15+
<div class="ui labeled button" tabindex="0">
16+
<a class="ui compact basic button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
2017
<i class="icon fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}}
2118
</a>
2219
<a class="ui basic label" href="{{.Link}}/watchers">
2320
{{.NumWatches}}
2421
</a>
2522
</div>
26-
<div class="ui compact labeled button" tabindex="0">
27-
<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
23+
<div class="ui labeled button" tabindex="0">
24+
<a class="ui compact basic button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
2825
<i class="icon star{{if not $.IsStaringRepo}} outline{{end}}"></i>{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
2926
</a>
3027
<a class="ui basic label" href="{{.Link}}/stars">
3128
{{.NumStars}}
3229
</a>
3330
</div>
3431
{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}}
35-
<div class="ui compact labeled button" tabindex="0">
36-
<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">
32+
<div class="ui labeled button" tabindex="0">
33+
<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">
3734
<i class="octicon octicon-repo-forked"></i>{{$.i18n.Tr "repo.fork"}}
3835
</a>
3936
<a class="ui basic label" href="{{.Link}}/forks">

‎templates/repo/home.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@
2323
</div>
2424
{{end}}
2525
</div>
26-
<div class="ui repo-topic" id="repo-topic">
27-
{{range .Topics}}<a class="ui green basic label topic" style="cursor:pointer;" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
28-
{{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}}
26+
<div class="ui" id="repo-topics">
27+
{{range .Topics}}<a class="ui repo-topic green basic label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
28+
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
2929
</div>
3030
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
3131
<div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none">

0 commit comments

Comments
 (0)