ui: Consistently use the btn-toolbar class for all toolbars

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/modules/backups/templates/backups.html

@@ -27,33 +27,35 @@
 
 {% block configuration %}
 
-  <a title="{% trans 'Create a new backup' %}"
+  <div class="btn-toolbar">
-     role="button" class="btn btn-primary"
+    <a title="{% trans 'Create a new backup' %}"
-     href="{% url 'backups:create' %}">
+       role="button" class="btn btn-primary"
-    <span class="fa fa-plus" aria-hidden="true"></span>
+       href="{% url 'backups:create' %}">
-    {% trans 'Create Backup' %}
+      <span class="fa fa-plus" aria-hidden="true"></span>
-  </a>
+      {% trans 'Create Backup' %}
+    </a>
 
-  <a title="{% trans 'Upload and restore a backup archive' %}"
+    <a title="{% trans 'Upload and restore a backup archive' %}"
-     role="button" class="btn btn-default"
+       role="button" class="btn btn-default"
-     href="{% url 'backups:upload' %}">
+       href="{% url 'backups:upload' %}">
-    <span class="fa fa-upload" aria-hidden="true"></span>
+      <span class="fa fa-upload" aria-hidden="true"></span>
-    {% trans 'Upload and Restore' %}
+      {% trans 'Upload and Restore' %}
-  </a>
+    </a>
 
-  <a title="{% trans 'Add a backup location' %}"
+    <a title="{% trans 'Add a backup location' %}"
-     role="button" class="btn btn-default"
+       role="button" class="btn btn-default"
-     href="{% url 'backups:add-repository' %}">
+       href="{% url 'backups:add-repository' %}">
-    <span class="fa fa-plus" aria-hidden="true"></span>
+      <span class="fa fa-plus" aria-hidden="true"></span>
-    {% trans 'Add Backup Location' %}
+      {% trans 'Add Backup Location' %}
-  </a>
+    </a>
 
-  <a title="{% trans 'Add a remote backup location' %}"
+    <a title="{% trans 'Add a remote backup location' %}"
-     role="button" class="btn btn-default"
+       role="button" class="btn btn-default"
-     href="{% url 'backups:add-remote-repository' %}">
+       href="{% url 'backups:add-remote-repository' %}">
-    <span class="fa fa-plus" aria-hidden="true"></span>
+      <span class="fa fa-plus" aria-hidden="true"></span>
-    {% trans 'Add Remote Backup Location' %}
+      {% trans 'Add Remote Backup Location' %}
-  </a>
+    </a>
+  </div>
 
   <h3>{% trans 'Existing Backups' %}</h3>
 

plinth/modules/bind/templates/bind.html

@@ -32,11 +32,11 @@
       </tbody>
     </table>
   </div>
-  <div>
+  <div class="btn-toolbar">
-  <a href="{% url 'bind:index' %}" class="btn btn-default"
+    <a href="{% url 'bind:index' %}" class="btn btn-default"
-     role="button" title="{% trans 'Refresh IP address and domains' %}">
+       role="button" title="{% trans 'Refresh IP address and domains' %}">
-    <span class="fa" aria-hidden="true"></span>
+      <span class="fa" aria-hidden="true"></span>
-      {% trans 'Refresh IP address and domains' %}
+        {% trans 'Refresh IP address and domains' %}
-  </a>
+    </a>
   </div>
 {% endblock %}

plinth/modules/networks/templates/connection_show.html

@@ -22,7 +22,7 @@
 
   <div class="row">
     <div class="col-md-8 offset-md-2">
-      <div>
+      <div class="btn-toolbar">
         <a href="{% url 'networks:edit' connection.uuid %}"
            class="btn btn-primary" role="button"
            title="{% trans "Edit connection" %}">{% trans "Edit" %}</a>

plinth/modules/pagekite/templates/pagekite_configure.html

@@ -24,13 +24,13 @@
 
   <h3>{% trans "Custom Services" %}</h3>
 
-  <p>
+  <div class="btn-toolbar">
     <a href="{% url 'pagekite:add-custom-service' %}" class="btn btn-default"
        role="button" title="{% trans 'Add Custom Service' %}">
       <span class="fa fa-plus" aria-hidden="true"></span>
       {% trans 'Add Custom Service' %}
     </a>
-  </p>
+  </div>
 
   {% if custom_services %}
     <div class="list-group custom-services">

plinth/modules/power/templates/power.html

@@ -17,12 +17,12 @@
     </div>
   {% endif %}
 
-  <p>
+  <div class="btn-toolbar">
     <a class="btn btn-default btn-md" href="{% url 'power:restart' %}">
       {% trans "Restart &raquo;" %}</a>
 
     <a class="btn btn-default btn-md" href="{% url 'power:shutdown' %}">
       {% trans "Shut Down &raquo;" %}</a>
-  </p>
+  </div>
 
 {% endblock %}

plinth/modules/security/templates/security.html

@@ -7,11 +7,13 @@
 {% load i18n %}
 
 {% block status %}
-  <a class="btn btn-default" role="button" href="{% url 'security:report' %}"
+  <div class="btn-toolbar">
-     title="{% trans 'Show security report' %}">
+    <a class="btn btn-default" role="button" href="{% url 'security:report' %}"
-    <span class="fa fa-line-chart" aria-hidden="true"></span>
+       title="{% trans 'Show security report' %}">
-    {% trans "Show security report" %}
+      <span class="fa fa-line-chart" aria-hidden="true"></span>
-  </a>
+      {% trans "Show security report" %}
+    </a>
+  </div>
 
   {% if is_backports_requested %}
     <h3>{% trans "Frequent Feature Updates" %}</h3>

plinth/modules/sharing/templates/sharing.html

@@ -20,13 +20,13 @@
 
   {% include "app-header.html" with icon_filename=icon_filename name=title description=description %}
 
-  <p>
+  <div class="btn-toolbar">
     <a title="{% trans 'Add share' %}"
        role="button" class="btn btn-primary"
        href="{% url 'sharing:add' %}">
       {% trans 'Add share' %}
     </a>
-  </p>
+  </div>
 
   {% if not shares %}
     <p>{% trans 'No shares currently configured.' %}</p>

plinth/modules/upgrades/templates/upgrades_configure.html

@@ -108,21 +108,21 @@
 
   <h3>{% trans "Manual Update" %}</h3>
   {% if is_busy %}
-    <p>
+    <div class="btn-toolbar">
       <button type="button" disabled="disabled"
               class="running-status-parent btn btn-default" >
         <span class="running-status loading"></span>
         {% trans "Updating..." %}
       </button>
-    </p>
+    </div>
   {% else %}
-    <p>
+    <div class="btn-toolbar">
       <form class="form" method="post" action="{% url 'upgrades:upgrade' %}">
         {% csrf_token %}
         <input type="submit" class="btn btn-default"
                value="{% trans "Update now" %}"/>
       </form>
-    </p>
+    </div>
   {% endif %}
 
   <p>

plinth/modules/wireguard/templates/wireguard.html

@@ -55,12 +55,14 @@
     {% endif %}
   </p>
 
-  <a title="{% trans 'Add a new peer' %}"
+  <div class="btn-toolbar">
-     role="button" class="btn btn-default"
+    <a title="{% trans 'Add a new peer' %}"
-     href="{% url 'wireguard:add-client' %}">
+       role="button" class="btn btn-default"
-    <span class="fa fa-plus" aria-hidden="true"></span>
+       href="{% url 'wireguard:add-client' %}">
-    {% trans "Add Allowed Client" %}
+      <span class="fa fa-plus" aria-hidden="true"></span>
-  </a>
+      {% trans "Add Allowed Client" %}
+    </a>
+  </div>
 
   <h3>{% trans "As a Client" %}</h3>
   <p>
@@ -103,12 +105,14 @@
     </table>
   </div>
 
-  <a title="{% trans 'Add a new server' %}"
+  <div class="btn-toolbar">
-     role="button" class="btn btn-default"
+    <a title="{% trans 'Add a new server' %}"
-     href="{% url 'wireguard:add-server' %}">
+       role="button" class="btn btn-default"
-    <span class="fa fa-plus" aria-hidden="true"></span>
+       href="{% url 'wireguard:add-server' %}">
-    {% trans "Add Connection to Server" %}
+      <span class="fa fa-plus" aria-hidden="true"></span>
-  </a>
+      {% trans "Add Connection to Server" %}
+    </a>
+  </div>
 
   {{ block.super }}
 

plinth/modules/wireguard/templates/wireguard_show_client.html

@@ -65,7 +65,7 @@
     </table>
   </div>
 
-  <p>
+  <div class="btn-toolbar">
     <a class="btn btn-default"
        href="{% url 'wireguard:edit-client' client.public_key|urlencode:'' %}">
       <span class="fa fa-pencil-square-o" aria-hidden="true"></span>
@@ -76,6 +76,6 @@
       <span class="fa fa-trash-o" aria-hidden="true"></span>
       {% trans "Delete" %}
     </a>
-  </p>
+  </div>
 
 {% endblock %}

plinth/modules/wireguard/templates/wireguard_show_server.html

@@ -66,7 +66,7 @@
     {% endif %}
   {% endfor %}
 
-  <p>
+  <div class="btn-toolbar">
     <a class="btn btn-default"
        href="{% url 'wireguard:edit-server' interface %}">
       <span class="fa fa-pencil-square-o" aria-hidden="true"></span>
@@ -77,6 +77,6 @@
       <span class="fa fa-trash-o" aria-hidden="true"></span>
       {% trans "Delete" %}
     </a>
-  </p>
+  </div>
 
 {% endblock %}

plinth/templates/notifications.html

@@ -36,7 +36,7 @@
             {% endif %}
 
             {% if note.actions %}
-              <p>
+              <div class="btn-toolbar">
                 {% for action in note.actions %}
                   {% if action.type == "dismiss" %}
                     <a href="{% url 'notification_dismiss' id=note.id %}?next={{ request.path|iriencode }}"
@@ -50,7 +50,7 @@
                     </a>
                   {% endif %}
                 {% endfor %}
-              </p>
+              </div>
             {% endif %}
           {% endif %}
         </li>

static/themes/default/css/main.css

@@ -510,10 +510,6 @@ a.menu_link_active {
 }
 
 /* Button table - Tables with a list of actions as buttons on top */
-.button-table > .button-row + .table-responsive {
-    margin-top: 0.625rem;
-}
-
 .index-page .card-list:before,
 .apps-page .card-list:before,
 .system-page .card-list:before {