Use standard navigation for dictionary

weblate/html/dictionary.html

@@ -15,6 +15,16 @@
 
 <h2>{% trans "Dictionary" %}</h2>
 
+<span id="navi-toolbar" class="ui-widget-header ui-corner-all">
+<span class="navi">
+<a class="button-first{% if words.number == 1 %} button-disabled{% endif %}" href="?page=1">{% trans "First" %}</a>
+<a class="button-prev{% if not words.has_previous %} button-disabled{% endif %}" href="?page={{ words.previous_page_number }}">{% trans "Previous" %}</a>
+<a class="button-pos">{% blocktrans with words.number as position and words.paginator.num_pages as total %}{{ position }} / {{ total }}{% endblocktrans %}</a>
+<a class="button-next{% if not words.has_next %} button-disabled{% endif %}" href="?page={{ words.next_page_number }}">{% trans "Next" %}</a>
+<a class="button-end{% if words.paginator.num_pages == words.number %} button-disabled{% endif %}" href="?page={{ words.paginator.num_pages }}">{% trans "Last" %}</a>
+</span>
+</span>
+
 <table>
 <thead>
 <tr>
@@ -52,21 +62,6 @@
 </tbody>
 </table>
 
-<ul class="pages">
-{% if words.has_previous %}
-<li><a href="?page={{ words.previous_page_number }}">&laquo;</a></li>
-{% else %}
-<li class="disabled"><span>&laquo;</span></li>
-{% endif %}
-{% for page in words.paginator.page_range %}
-<li {% if page = words.number %} class="active" {% endif %}><a href="?page={{ page }}">{{ page }}</a></li>
-{% endfor %}
-{% if words.has_next %}
-<li><a href="?page={{ words.next_page_number }}">&raquo;</a></li>
-{% else %}
-<li class="disabled"><span>&raquo;</span></li>
-{% endif %}
-</ul>
 {% endif %}
 
 <h2>{% trans "Tools" %}</h2>

weblate/media/css/style.css

@@ -121,24 +121,6 @@ ins {
 del {
     background-color: #fc7979;
 }
-ul.pages {
-    display: block;
-    list-style: none;
-    margin: 0.5em;
-    padding: 1em;
-}
-ul.pages li {
-    display: inline-block;
-}
-ul.pages li a {
-    padding: 0.2em;
-}
-ul.pages li.active a {
-    font-weight: bolder;
-}
-ul.pages li.disabled span {
-    padding: 0.2em;
-}
 ul.buttons {
     margin: 0;
     padding: 0;

weblate/media/js/loader.js

@@ -129,6 +129,7 @@ $(function() {
     $('.button-pos').button({text: true});
     $('.button-prev').button({text: false, icons: { primary: "ui-icon-seek-prev" }});
     $('.button-end').button({text: false, icons: { primary: "ui-icon-seek-end" }});
+    $('.navi .button-disabled').button('disable');
     $('textarea.translation').change(text_change).keypress(text_change).autogrow().focus();
     $('#copy-text').button({text: true, icons: { primary: "ui-icon-arrow-1-s" }}).click(function f() {
         get_source_string(function(data) {