Skip to content

GitLab

Commit acaf5c96 authored by silverwind's avatar silverwind Committed by techknowlogick
Browse files

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
parent c20034be
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 56 additions and 32 deletions
+56 -32
.editorconfig
View file @ acaf5c96
......@@ -15,7 +15,7 @@ indent_size = 8
indent_style = tab
indent_size = 4
[*.{less}]
[*.less]
indent_style = space
indent_size = 4
......
public/css/index.css
View file @ acaf5c96
This diff is collapsed.
public/js/index.js
View file @ acaf5c96
......@@ -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'),
......
public/less/_base.less
View file @ acaf5c96
......@@ -12,6 +12,9 @@ img {
table {
border-collapse: collapse;
}
a {
cursor: pointer;
}
.rounded {
border-radius: .28571429rem !important;
}
......
public/less/_repository.less
View file @ acaf5c96
......@@ -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;
margin-top: 5px;
}
#repo-topic {
#repo-topics {
margin-top: 5px;
}
.new-dependency-drop-list {
@media only screen and (max-width: 768px) {
width: 100%;
}
.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;
}
templates/repo/header.tmpl
View file @ acaf5c96
<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">
......
templates/repo/home.tmpl
View file @ acaf5c96
......@@ -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">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment