Minor style fix in gallery view.

[redakcja.git] / src / wiki / templates / wiki / tabs / gallery_view.html

diff --git a/src/wiki/templates/wiki/tabs/gallery_view.html b/src/wiki/templates/wiki/tabs/gallery_view.html
index 7e14e6e..9864448 100644 (file)
--- a/src/wiki/templates/wiki/tabs/gallery_view.html
+++ b/src/wiki/templates/wiki/tabs/gallery_view.html
@@ -2,20 +2,30 @@
 <div id="side-gallery">
     <!-- gallery toolbar -->
   <div class="navbar navbar-dark bg-secondary">
-    <div class="nav">
-      <button class="btn btn-info mr-2 start-page" alt="{% trans "Go to first image of this part" %}" title="{% trans "Go to first image of this part" %}">
-        ⇤
+    <div class="btn-toolbar">
+      <div class="btn-group">
+        <button class="btn btn-info start-page" alt="{% trans "Go to first image of this part" %}" title="{% trans "Go to first image of this part" %}">
+          ⇤
         </button>
-        <button class="btn btn-info mr-2 previous-page" title="{% trans "Previous" %}">
+        <button class="btn btn-info previous-page" title="{% trans "Previous" %}">
           ⯇
         </button>
-        <input type="text" size="3" maxlength="3" value="0" class="page-number " />
-        <span class="navbar-text ml-1 mr-2" id="imagesCount">/0</span>
-        <button class="btn btn-info mr-2 next-page" title="{% trans "Next" %}">
+      </div>
+      <div class="input-group">
+        <input type="text" size="1" maxlength="3" value="0" class="page-number form-control" />
+        <div class="input-group-append">
+          <div class="input-group-text" id="imagesCount">/0</div>
+        </div>
+      </div>
+      <div class="btn-group">
+        <button class="btn btn-info next-page" title="{% trans "Next" %}">
           ⯈
         </button>
-        <button class="btn btn-info mr-2 zoom-in">＋</button>
-        <button class="btn btn-info mr-2 zoom-out">&mdash;</button>
+      </div>
+      <div class="btn-group ml-2">
+        <button class="btn btn-info zoom-in">＋</button>
+        <button class="btn btn-info zoom-out">&mdash;</button>
+      </div>
     </div>
   </div>
     <div class="error_message alert alert-danger ml-4 mr-4 mt-4">