From 391d6298c430d91f98d10f037023a79a518b6777 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Mon, 12 May 2014 23:28:15 +0530
Subject: [PATCH] Update firewall page styling

---
 .../installed/system/templates/firewall.html  | 60 +++++++++++--------
 themes/default/css/plinth.css                 |  8 +++
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/modules/installed/system/templates/firewall.html b/modules/installed/system/templates/firewall.html
index 5ef2fa972..19c165a46 100644
--- a/modules/installed/system/templates/firewall.html
+++ b/modules/installed/system/templates/firewall.html
@@ -43,35 +43,47 @@ firewalld'</p>
 
 {% else %}
 
-<ul>
+<table class='table table-autowidth'>
+  <thead>
+    <th>Service/Port</th>
+    <th>Status</th>
+  </thead>
 
-  {% for service in services %}
-  <li>{{ service.name }}:
-    {% if service.is_enabled %}
-    <span class='firewall-permitted'>Enabled</span>
-    {% else %}
-    <span class='firewall-blocked'>Disabled</span>
-    {% endif %}
+  <tbody>
+    {% for service in services %}
+      <tr>
+        <td><strong>{{ service.name }}</strong></td>
+        <td>
+          {% if service.is_enabled %}
+            <span class='label label-success'>Enabled</span>
+          {% else %}
+            <span class='label label-important'>Disabled</span>
+          {% endif %}
+        </td>
+      </tr>
 
-    <ul>
       {% for port in service.ports %}
-      <li> {{ port }}:
-        {% if port in internal_enabled_services and port in external_enabled_services %}
-          <span class='firewall-permitted'>Permitted</span>
-        {% elif port in internal_enabled_services %}
-          <span class='firewall-permitted'>Permitted (internal only)</span>
-        {% elif port in external_enabled_services %}
-          <span class='firewall-permitted'>Permitted (external only)</span>
-        {% else %}
-          <span class='firewall-blocked'>Blocked</span>
-        {% endif %}
-      </li>
+        <tr>
+          <td class='cell-indented'><em>{{ port }}</em></td>
+          <td>
+            {% if port in internal_enabled_services and port in external_enabled_services %}
+              <span class='label label-success'>Permitted</span>
+            {% elif port in internal_enabled_services %}
+              <span class='label label-warning'>Permitted (internal only)</span>
+            {% elif port in external_enabled_services %}
+              <span class='label label-warning'>Permitted (external only)</span>
+            {% else %}
+              <span class='label label-important'>Blocked</span>
+            {% endif %}
+          </td>
+        </tr>
       {% endfor %}
-    </ul>
-  </li>
-  {% endfor %}
 
-</ul>
+    {% endfor %}
+
+  </tbody>
+
+</table>
 
 <p><em>The operation of the firewall is automatic. When you enable a
 service it is automatically permitted in the firewall and you disable
diff --git a/themes/default/css/plinth.css b/themes/default/css/plinth.css
index ce817d11f..c983d7042 100644
--- a/themes/default/css/plinth.css
+++ b/themes/default/css/plinth.css
@@ -47,3 +47,11 @@ body {
     margin-right: 8px;
     padding-right: 5px;
 }
+
+.table-autowidth {
+    width: auto;
+}
+
+.table td.cell-indented {
+    padding-left: 3em;
+}