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

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;
-}
-
-#repo-topic {
     margin-top: 5px;
 }
 
-.new-dependency-drop-list {
-	@media only screen and (max-width: 768px) {
-		width: 100%;
-	}
+#repo-topics {
+    margin-top: 5px;
+}
+
+.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;
 }