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
tokarchuk/v1.17
silverwind 6 years ago committed by techknowlogick
parent c20034be31
commit acaf5c96fe
  1. 2
      .editorconfig
  2. 2
      public/css/index.css
  3. 2
      public/js/index.js
  4. 3
      public/less/_base.less
  5. 38
      public/less/_repository.less
  6. 35
      templates/repo/header.tmpl
  7. 6
      templates/repo/home.tmpl

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

File diff suppressed because one or more lines are too long

@ -2605,7 +2605,7 @@ function initNavbarContentToggle() {
function initTopicbar() { function initTopicbar() {
var mgrBtn = $("#manage_topic"), var mgrBtn = $("#manage_topic"),
editDiv = $("#topic_edit"), editDiv = $("#topic_edit"),
viewDiv = $("#repo-topic"), viewDiv = $("#repo-topics"),
saveBtn = $("#save_topic"), saveBtn = $("#save_topic"),
topicDropdown = $('#topic_edit .dropdown'), topicDropdown = $('#topic_edit .dropdown'),
topicForm = $('#topic_edit.ui.form'), topicForm = $('#topic_edit.ui.form'),

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

@ -48,7 +48,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.ui.label { .ui.label {
margin-top: -2px;
margin-left: 7px; margin-left: 7px;
padding: 3px 5px; padding: 3px 5px;
} }
@ -1836,15 +1835,40 @@ tbody.commit-list {
} }
#topic_edit { #topic_edit {
margin-top:5px; margin-top: 5px;
} }
#repo-topic { #repo-topics {
margin-top: 5px; margin-top: 5px;
} }
.new-dependency-drop-list { .repo-topic {
@media only screen and (max-width: 768px) { cursor: pointer;
width: 100%; }
}
@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"> <div class="header-wrapper">
{{with .Repository}} {{with .Repository}}
<div class="ui container"> <div class="ui container">
<div class="ui stackable grid header-grid"> <div class="repo-header">
<div class="nine wide column"> <div class="ui huge breadcrumb repo-title">
<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>
<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>
<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 .IsArchived}}<i class="archive icon archived-icon"></i>{{end}}
{{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 .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}}
{{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>
<div class="repo-buttons">
<div class="ui seven wide right aligned column"> <div class="ui labeled button" tabindex="0">
<div class="ui compact labeled button" tabindex="0"> <a class="ui compact basic button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
<a class="ui compact 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}} <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>
<a class="ui basic label" href="{{.Link}}/watchers"> <a class="ui basic label" href="{{.Link}}/watchers">
{{.NumWatches}} {{.NumWatches}}
</a> </a>
</div> </div>
<div class="ui compact labeled button" tabindex="0"> <div class="ui labeled button" tabindex="0">
<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}"> <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}} <i class="icon star{{if not $.IsStaringRepo}} outline{{end}}"></i>{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
</a> </a>
<a class="ui basic label" href="{{.Link}}/stars"> <a class="ui basic label" href="{{.Link}}/stars">
@ -32,8 +29,8 @@
</a> </a>
</div> </div>
{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}} {{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}}
<div class="ui compact labeled button" tabindex="0"> <div class="ui 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"> <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"}} <i class="octicon octicon-repo-forked"></i>{{$.i18n.Tr "repo.fork"}}
</a> </a>
<a class="ui basic label" href="{{.Link}}/forks"> <a class="ui basic label" href="{{.Link}}/forks">

@ -23,9 +23,9 @@
</div> </div>
{{end}} {{end}}
</div> </div>
<div class="ui repo-topic" id="repo-topic"> <div class="ui" id="repo-topics">
{{range .Topics}}<a class="ui green basic label topic" style="cursor:pointer;" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}} {{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" style="cursor:pointer;margin-left:10px;">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
</div> </div>
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
<div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none"> <div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none">

Loading…
Cancel
Save