From 312ad2800d904dbd36bf5990d9502a5b08954f93 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Thu, 12 Mar 2020 16:15:37 -0700
Subject: [PATCH] pagekite: Fix styling issues for custom services section

- Place the add button in a paragraph to remove unnecessary styling.

- De-emphasize the add button by making it default style instead of primary.

- Re-add a missing class on the custom services list to apply the intended style
properly.

- Drop horizontal rule.

- Remove the unnecessary title "Existing custom services". Emphasize the custom
services section by making it <h3> instead of <h4>. Also for consistency across
the interface.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
---
 .../templates/pagekite_configure.html         | 95 +++++++++----------
 1 file changed, 43 insertions(+), 52 deletions(-)

diff --git a/plinth/modules/pagekite/templates/pagekite_configure.html b/plinth/modules/pagekite/templates/pagekite_configure.html
index 706348a1c..ad686a95c 100644
--- a/plinth/modules/pagekite/templates/pagekite_configure.html
+++ b/plinth/modules/pagekite/templates/pagekite_configure.html
@@ -9,68 +9,59 @@
 
 {% block page_head %}
   <style type="text/css">
-   div.custom-services span.service {
-       display: inline-block;
-       padding-top: 6px;
-   }
-   form.pull-right button {
-       margin: 10px 5px;
-   }
-   .add-service input.btn {
-       margin: 10px 0px;
-   }
+    div.custom-services span.service {
+        display: inline-block;
+        padding-top: 6px;
+    }
+    form.pull-right button {
+        margin: 10px 5px;
+    }
   </style>
-
 {% endblock %}
 
 {% block configuration %}
   {{ block.super }}
 
-  <hr/>
+  <h3>{% trans "Custom Services" %}</h3>
 
-  <h4>{% trans "Custom Services" %}</h4>
-
-  <a href="{% url 'pagekite:add-custom-service' %}" class="btn btn-primary"
-     role="button" title="{% trans 'Add Custom Service' %}">
-    <span class="fa fa-plus" aria-hidden="true"></span>
-    {% trans 'Add Custom Service' %}
-  </a>
+  <p>
+    <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>
 
   {% if custom_services %}
-    <div>
-      <h5>{% trans "Existing custom services" %}</h5>
-
-      <div class="list-group">
-        {% for service in custom_services %}
-          <div class="list-group-item clearfix">
-            <span class="service">
-              <span title="Connects {{ service.url }} to {{ service.backend_host }}:{{ service.backend_port }}">
-                {% if service.url|slice:":4" == "http" %}
-                  <a href="{{ service.url }}">{{ service.url }}</a>
-                {% else %}
-                  {{ service.url }}
-                {% endif %}
-                <br>
-                {% blocktrans trimmed with backend_host=service.backend_host backend_port=service.backend_port %}
-                  connected to {{ backend_host }}:{{ backend_port }}
-                {% endblocktrans %}
-              </span>
+    <div class="list-group custom-services">
+      {% for service in custom_services %}
+        <div class="list-group-item clearfix">
+          <span class="service">
+            <span title="Connects {{ service.url }} to {{ service.backend_host }}:{{ service.backend_port }}">
+              {% if service.url|slice:":4" == "http" %}
+                <a href="{{ service.url }}">{{ service.url }}</a>
+              {% else %}
+                {{ service.url }}
+              {% endif %}
+              <br>
+              {% blocktrans trimmed with backend_host=service.backend_host backend_port=service.backend_port %}
+                connected to {{ backend_host }}:{{ backend_port }}
+              {% endblocktrans %}
             </span>
-            <form class="form pull-right" method="post"
-                  action="{% url 'pagekite:delete-custom-service' %}">
-              <div style='display:none'>
-                {% csrf_token %}
-                {{ service.delete_form.as_p }}
-              </div>
-              <button type="submit" class="btn btn-default"
-                      title="{% trans "Delete this service" %}">
-                <span class="fa fa-trash-o" aria-hidden="true">
-                </span>
-              </button>
-            </form>
-          </div>
-        {% endfor %}
-      </div>
+          </span>
+          <form class="form pull-right" method="post"
+                action="{% url 'pagekite:delete-custom-service' %}">
+            <div style='display:none'>
+              {% csrf_token %}
+              {{ service.delete_form.as_p }}
+            </div>
+            <button type="submit" class="btn btn-default"
+                    title="{% trans "Delete this service" %}">
+              <span class="fa fa-trash-o" aria-hidden="true"></span>
+            </button>
+          </form>
+        </div>
+      {% endfor %}
     </div>
   {% endif %}