Fix layout of the topics editing form (#4971)

* Fix layout of the topic edit.

- made right-hand column wider so that it has enough space for "Done" button.

- fixed issue that jQuery's .show() breaks functionality of the Semantic UI Grid.

* Improve switching visibility of the topic edit

Changes to support old browsers that doesn't support 'flex' keyword.

- Removed style "display: none" from index.css so that
  the grid can be displayed without specifying new "display" style.

- Added style "display:none" to the grid element in HTML template
  as the initial style.

- In index.js, visibility of the grid element is changed by
  set "display:none" style to the element or removing it from the element.

public/js/index.js

@@ -2425,7 +2425,7 @@ function initTopicbar() {
 
     mgrBtn.click(function() {
         viewDiv.hide();
-        editDiv.show();
+        editDiv.css('display', ''); // show Semantic UI Grid
     });
 
     function getPrompts() {
@@ -2456,7 +2456,7 @@ function initTopicbar() {
                 for (var i=0; i < topicArray.length; i++) {
                     $('<div class="ui green basic label topic" style="cursor:pointer;">'+topicArray[i]+'</div>').insertBefore(last)
                 }
-                editDiv.hide();
+                editDiv.css('display', 'none'); // hide Semantic UI Grid
                 viewDiv.show();
             }
         }).fail(function(xhr){

public/less/_repository.less

@@ -1805,7 +1805,6 @@ tbody.commit-list {
 
 #topic_edit {
     margin-top:5px;
-    display: none;
 }
 
 #repo-topic {

templates/repo/home.tmpl

@@ -28,7 +28,7 @@
 		{{if .IsRepositoryAdmin}}<a id="manage_topic" style="cursor:pointer;margin-left:10px;">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
 		</div>
 		{{if .IsRepositoryAdmin}}
-		<div class="ui repo-topic-edit grid form segment error" id="topic_edit" >
+		<div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none">
 			<div class="fourteen wide column">
 				<div class="field">
 					<div class="ui fluid multiple search selection dropdown">
@@ -40,7 +40,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="one wide column">
+			<div class="two wide column">
 				<a class="ui compact button primary" href="javascript:;" id="save_topic"
 				data-link="{{.RepoLink}}/topics">{{.i18n.Tr "repo.topic.done"}}</a>
 			</div>