Automatic translation in new layout

Signed-off-by: Michal Čihař <michal@cihar.com>

weblate/html/translation.html

@@ -17,7 +17,7 @@
 {% include "show-lock.html" %}
 
 <ul class="nav nav-pills">
-  <li class="active"><a href="{{ object.get_absolute_url }}">{% trans "Overview" %}</a></li>
+  <li class="active"><a href="#overview" data-toggle="pill">{% trans "Overview" %}</a></li>
   <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
       {% trans "Download" %} <span class="caret"></span>
@@ -35,6 +35,9 @@
     </a>
     <ul class="dropdown-menu">
       <li><a href="{% url 'data_project' project=object.subproject.project.slug  %}">{% trans "Data exports" %}</a></li>
+      {% if autoform %}
+      <li><a href="#auto" data-toggle="pill">{% trans "Automatic translation" %}</a></li>
+      {% endif %}
     </ul>
   </li>
   <li class="dropdown">
@@ -52,6 +55,9 @@
 </ul>
 
 
+<div class="tab-content">
+<div class="tab-pane active" id="overview">
+
 <div class="row">
 <div class="col-md-6">
 
@@ -170,14 +176,33 @@
 
 </div>
 
+
+</div>
+{% if autoform %}
+<div class="tab-pane" id="auto">
+<form action="{% url 'auto_translation' project=object.subproject.project.slug subproject=object.subproject.slug lang=object.language.code %}" method="post" enctype="multipart/form-data">
+<div class="panel panel-primary">
+<div class="panel-heading">{% trans "Automatic translation" %}</div>
+<div class="panel-body">
+<p>{% trans "Automatic translation takes existing translations in this project and applies it to the current subproject. It can be used to push translations to a different branch, to fix inconsistent translations or to translate new subproject using translation memory." %}</p>
+{% csrf_token %}
+<table>
+{{ autoform.as_table }}
+</table>
+</div>
+<div class="panel-footer">
+<input type="submit" value="{% trans "Process" %}" class="btn btn-default" />
+</div>
+</div>
+</form>
+</div>
+{% endif %}
+
 <h2>{% trans "Tools" %}</h2>
 
 <div class="tabs" id="translation-tabs">
 <ul>
 <li><a href="#files">{% trans "Files" %}</a></li>
-{% if autoform %}
-<li><a href="#auto">{% trans "Automatic translation" %}</a></li>
-{% endif %}
 {% if perms.trans.commit_translation or perms.trans.update_translation %}
 <li><a href="{% url 'git_status_translation' project=object.subproject.project.slug subproject=object.subproject.slug lang=object.language.code %}">{% trans "Git maintenance" %}</a></li>
 {% endif %}
@@ -205,18 +230,6 @@
 {% endif %}
 </div>
 
-{% if autoform %}
-<div id="auto">
-<p>{% trans "Automatic translation takes existing translations in this project and applies it to the current subproject. It can be used to push translations to a different branch, to fix inconsistent translations or to translate new subproject using translation memory." %}</p>
-<form action="{% url 'auto_translation' project=object.subproject.project.slug subproject=object.subproject.slug lang=object.language.code %}" method="post" enctype="multipart/form-data">
-{% csrf_token %}
-<table>
-{{ autoform.as_table }}
-</table>
-<p><input type="submit" value="{% trans "Process" %}" class="button" /></p>
-</form>
-</div>
-{% endif %}
 
 <div id="locking">
 <p>{% trans "Locking the translation will prevent others to work on translation." %}</p>