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>
This commit is contained in:
Sunil Mohan Adapa 2020-03-12 16:15:37 -07:00 committed by Veiko Aasa
parent 23454573e2
commit 312ad2800d
No known key found for this signature in database
GPG Key ID: 478539CAE680674E

View File

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