Improve look of git status and operations

html/js/git-status.html

 {% load i18n %}
-
-{% if perms.trans.commit_translation or perms.trans.update_translation %}
 {% with object.git_needs_commit as needs_commit %}
+{% if perms.trans.commit_translation or perms.trans.update_translation %}
+
+<ul class="buttons">
+<li><a href="{{ object.get_commit_url }}" title="{% trans "Commit pending changes" %}"{% if not needs_commit %} class="disabled"{% endif %}>{% trans "Commit" %}</a></li>
+<li><a href="{{ object.get_update_url }}" title="{% trans "Pull changes from remote repository" %}"{% if not perms.trans.update_translation %} class="disabled"{% endif %}>{% trans "Pull" %}</a></li>
+</ul>
+
 {% if needs_commit %}
 <p>{% trans "There are some not commited changes!" %}</p>
 {% endif %}
@@ -11,12 +16,24 @@
 {% if object.git_needs_push %}
 <p>{% trans "There are some new commits in local Git repository!" %}</p>
 {% endif %}
-<ul>
-{% if needs_commit %}
-<li><a href="{{ object.get_commit_url }}">{% trans "Commit pending changes" %}</a></li>
-{% endif %}
-{% endwith %}
-{% if perms.trans.update_translation %}
-<li><a href="{{ object.get_update_url }}">{% trans "Pull changes from remote repository" %}</a></li>
+
+<div class="details-accordion">
+<h3><a href="#">{% trans "Details" %}</a></h3>
+<div>
+{% if object.subproject_set %}
+{% for sp in object.subproject_set.all %}
+<h4>{{ sp }}</h3>
+<pre>
+{{ sp.get_repo.git.status }}
+</pre>
+{% endfor %}
+{% else %}
+<pre>
+{{ object.get_repo.git.status }}
+</pre>
 {% endif %}
+</div>
+</div>
+
 {% endif %}
+{% endwith %}

media/css/style.css

@@ -144,3 +144,11 @@ ul.pages li.active a {
 ul.pages li.disabled span {
     padding: 0.2em;
 }
+ul.buttons {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+ul.buttons li {
+    display: inline-block;
+}

media/js/loader.js

@@ -229,6 +229,9 @@ $(function() {
         cache: true,
         load: function (e, ui) {
             $(ui.panel).find(".tab-loading").remove();
+            $('.buttons').buttonset();
+            $('.buttons .disabled').button('disable');
+            $('.details-accordion').accordion({collapsible: true, active: -1});
         },
         show: function (e, ui) {
             var $panel = $(ui.panel);