From fd729097126a2db34e43133b24b9675fcc031b37 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Mon, 18 Jun 2018 19:17:20 +0530
Subject: [PATCH] snapshot: Remove unnecessary column sizing

- Implement button-table class for tables with buttons about them.

Signed-off-by: Manish Tripathy <manisht@thougtworks.com>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
---
 .../snapshot/templates/snapshot_delete.html   |  32 +++---
 .../templates/snapshot_delete_all.html        |  40 ++++---
 .../snapshot/templates/snapshot_manage.html   | 100 +++++++++---------
 .../snapshot/templates/snapshot_rollback.html |  32 +++---
 static/themes/default/css/plinth.css          |   5 +
 5 files changed, 99 insertions(+), 110 deletions(-)

diff --git a/plinth/modules/snapshot/templates/snapshot_delete.html b/plinth/modules/snapshot/templates/snapshot_delete.html
index 99af914ff..58d2880dd 100644
--- a/plinth/modules/snapshot/templates/snapshot_delete.html
+++ b/plinth/modules/snapshot/templates/snapshot_delete.html
@@ -26,24 +26,20 @@
 
   <p>{% trans "Delete this snapshot permanently?" %}</p>
 
-  <div class="row">
-    <div class="col-lg-12">
-      <table class="table table-bordered table-condensed table-striped">
-        <thead>
-          <th>{% trans "Number" %}</th>
-          <th>{% trans "Date" %}</th>
-          <th>{% trans "Description" %}</th>
-        </thead>
-        <tbody>
-          <tr>
-            <td>{{ snapshot.number }}</td>
-            <td>{{ snapshot.date }}</td>
-            <td>{{ snapshot.description }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table class="table table-bordered table-condensed table-striped">
+    <thead>
+      <th>{% trans "Number" %}</th>
+      <th>{% trans "Date" %}</th>
+      <th>{% trans "Description" %}</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{ snapshot.number }}</td>
+        <td>{{ snapshot.date }}</td>
+        <td>{{ snapshot.description }}</td>
+      </tr>
+    </tbody>
+  </table>
 
   <p>
     <form class="form" method="post">
diff --git a/plinth/modules/snapshot/templates/snapshot_delete_all.html b/plinth/modules/snapshot/templates/snapshot_delete_all.html
index 7f2d8a69b..2e7e7f23b 100644
--- a/plinth/modules/snapshot/templates/snapshot_delete_all.html
+++ b/plinth/modules/snapshot/templates/snapshot_delete_all.html
@@ -26,28 +26,24 @@
 
   <p>{% trans "Delete the following snapshots permanently?" %}</p>
 
-  <div class="row">
-    <div class="col-lg-12">
-      <table class="table table-bordered table-condensed table-striped">
-        <thead>
-          <th>{% trans "Number" %}</th>
-          <th>{% trans "Date" %}</th>
-          <th>{% trans "Description" %}</th>
-        </thead>
-        <tbody>
-          {% for snapshot in snapshots %}
-            {% if not snapshot.is_default %}
-              <tr>
-                <td>{{ snapshot.number }}</td>
-                <td>{{ snapshot.date }}</td>
-                <td>{{ snapshot.description }}</td>
-              </tr>
-            {% endif %}
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table class="table table-bordered table-condensed table-striped">
+    <thead>
+      <th>{% trans "Number" %}</th>
+      <th>{% trans "Date" %}</th>
+      <th>{% trans "Description" %}</th>
+    </thead>
+    <tbody>
+      {% for snapshot in snapshots %}
+        {% if not snapshot.is_default %}
+          <tr>
+            <td>{{ snapshot.number }}</td>
+            <td>{{ snapshot.date }}</td>
+            <td>{{ snapshot.description }}</td>
+          </tr>
+        {% endif %}
+      {% endfor %}
+    </tbody>
+  </table>
 
   <p>
     <form class="form" method="post">
diff --git a/plinth/modules/snapshot/templates/snapshot_manage.html b/plinth/modules/snapshot/templates/snapshot_manage.html
index 612c6a5e7..3c0ef1741 100644
--- a/plinth/modules/snapshot/templates/snapshot_manage.html
+++ b/plinth/modules/snapshot/templates/snapshot_manage.html
@@ -23,8 +23,9 @@
 
 {% block content %}
   {% block configuration %}
-    <p>
-      <div class="row">
+    <div class="button-table">
+
+      <div class="button-row row">
         <form class="form" method="post">
           {% csrf_token %}
           <div class="col-xs-6 text-left">
@@ -44,62 +45,57 @@
           </a>
         </div>
       </div>
-    </p>
 
-
-    <div class="row">
-      <div class="col-lg-12">
-        <table class="table table-bordered table-condensed table-striped">
-          <thead>
-            <th>{% trans "Number" %}</th>
-            <th>{% trans "Date" %}</th>
-            <th>{% trans "Description" %}</th>
-            <th>{% trans "Rollback" %}</th>
-            <th>{% trans "Delete" %}</th>
-          </thead>
-          <tbody>
-            {% for snapshot in snapshots %}
-              {% if snapshot.description != "current" %}
-                <tr>
-                  <td>
-                    {{ snapshot.number }}
-                    {% if snapshot.is_default %}
-                      <span class="label label-primary">
-                        {% trans "active" %}
-                      </span>
-                    {% endif %}
-                  </td>
-                  <td>{{ snapshot.date }}</td>
-                  <td>{{ snapshot.description }}</td>
-                  <td>
-                    <a href="{% url 'snapshot:rollback' snapshot.number %}"
+      <table class="table table-bordered table-condensed table-striped">
+        <thead>
+          <th>{% trans "Number" %}</th>
+          <th>{% trans "Date" %}</th>
+          <th>{% trans "Description" %}</th>
+          <th>{% trans "Rollback" %}</th>
+          <th>{% trans "Delete" %}</th>
+        </thead>
+        <tbody>
+          {% for snapshot in snapshots %}
+            {% if snapshot.description != "current" %}
+              <tr>
+                <td>
+                  {{ snapshot.number }}
+                  {% if snapshot.is_default %}
+                    <span class="label label-primary">
+                      {% trans "active" %}
+                    </span>
+                  {% endif %}
+                </td>
+                <td>{{ snapshot.date }}</td>
+                <td>{{ snapshot.description }}</td>
+                <td>
+                  <a href="{% url 'snapshot:rollback' snapshot.number %}"
+                     class="btn btn-default btn-sm" role="button"
+                     title="{% blocktrans trimmed with number=snapshot.number %}
+                           Rollback to snapshot #{{ number }}
+                     {% endblocktrans %}">
+                    <span class="glyphicon glyphicon-repeat"
+                          aria-hidden="true"></span>
+                  </a>
+                </td>
+                <td>
+                  {% if not snapshot.is_default %}
+                    <a href="{% url 'snapshot:delete' snapshot.number %}"
                        class="btn btn-default btn-sm" role="button"
                        title="{% blocktrans trimmed with number=snapshot.number %}
-                             Rollback to snapshot #{{ number }}
+                             Delete snapshot #{{ number }}
                        {% endblocktrans %}">
-                      <span class="glyphicon glyphicon-repeat"
+                      <span class="glyphicon glyphicon-trash"
                             aria-hidden="true"></span>
                     </a>
-                  </td>
-                  <td>
-                    {% if not snapshot.is_default %}
-                      <a href="{% url 'snapshot:delete' snapshot.number %}"
-                         class="btn btn-default btn-sm" role="button"
-                         title="{% blocktrans trimmed with number=snapshot.number %}
-                               Delete snapshot #{{ number }}
-                         {% endblocktrans %}">
-                        <span class="glyphicon glyphicon-trash"
-                              aria-hidden="true"></span>
-                      </a>
-                    {% endif %}
-                  </td>
-                </tr>
-              {% endif %}
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-    </div>
+                  {% endif %}
+                </td>
+              </tr>
+            {% endif %}
+          {% endfor %}
+        </tbody>
+      </table>
 
+    </div>
   {% endblock %}
 {% endblock %}
diff --git a/plinth/modules/snapshot/templates/snapshot_rollback.html b/plinth/modules/snapshot/templates/snapshot_rollback.html
index 30bff99a1..f40911255 100644
--- a/plinth/modules/snapshot/templates/snapshot_rollback.html
+++ b/plinth/modules/snapshot/templates/snapshot_rollback.html
@@ -34,24 +34,20 @@
     {% endblocktrans %}
   </p>
 
-  <div class="row">
-    <div class="col-lg-12">
-      <table class="table table-bordered table-condensed table-striped">
-        <thead>
-          <th>{% trans "Number" %}</th>
-          <th>{% trans "Date" %}</th>
-          <th>{% trans "Description" %}</th>
-        </thead>
-        <tbody>
-          <tr>
-            <td>{{ snapshot.number }}</td>
-            <td>{{ snapshot.date }}</td>
-            <td>{{ snapshot.description }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table class="table table-bordered table-condensed table-striped">
+    <thead>
+      <th>{% trans "Number" %}</th>
+      <th>{% trans "Date" %}</th>
+      <th>{% trans "Description" %}</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{ snapshot.number }}</td>
+        <td>{{ snapshot.date }}</td>
+        <td>{{ snapshot.description }}</td>
+      </tr>
+    </tbody>
+  </table>
 
   <p>
     <form class="form" method="post">
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 2f33d2d93..4f3276af1 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -280,3 +280,8 @@ a.menu_link_active {
     height: 100px;
     font-size: 80px
 }
+
+/* Button table - Tables with a list of actions as buttons on top */
+.button-table > .button-row + .table {
+    margin-top: 10px;
+}