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 %}
<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 %}