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.
This commit is contained in:
Iwasa Kazmi 2018-09-29 15:28:47 +09:00 committed by Lauris BH
parent e6d54d511d
commit 6780661192
4 changed files with 5 additions and 6 deletions

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

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