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

.editorconfig

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

public/js/index.js

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

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

public/less/_repository.less

@@ -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 {
+.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;
 }

templates/repo/header.tmpl

@@ -1,30 +1,27 @@
 <div class="header-wrapper">
 {{with .Repository}}
 	<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 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}}
 					</a>
 					<a class="ui basic label" href="{{.Link}}/watchers">
 						{{.NumWatches}}
 					</a>
 				</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}}
 					</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">
+					<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"}}
 						</a>
 						<a class="ui basic label" href="{{.Link}}/forks">

templates/repo/home.tmpl

@@ -23,9 +23,9 @@
 				</div>
 			{{end}}
 		</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>
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
 		<div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none">