app: Make the donation button more prominent

This is high visibility to the donation link and almost prompts users to donate
instead of passively providing the information. Given how many free software
struggle to stay alive, this is needed.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Sunil Mohan Adapa 2020-10-11 20:17:23 -07:00 committed by James Valleroy
parent f9fd278e8c
commit 29e3c9eaa8
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
2 changed files with 13 additions and 12 deletions

View File

@ -11,7 +11,7 @@
{% include "clients-button.html" with clients=app_info.clients enabled=is_enabled %}
{% if has_diagnostics or app_info.donation_url %}
{% if has_diagnostics %}
<!-- Single button -->
<div class="btn-group button-extra-actions">
<button type="button" class="btn btn-default dropdown-toggle"
@ -26,20 +26,20 @@
{% include "diagnostics_button.html" with app_id=app_id enabled=is_enabled %}
</li>
{% endif %}
{% if app_info.donation_url %}
<li>
<a target="_blank" rel="noopener noreferrer"
href="{{ app_info.donation_url }}">
{% trans "Donate" %}
<span class="fa fa-external-link"></span>
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% if app_info.donation_url %}
<a target="_blank" rel="noopener noreferrer"
class="btn btn-default button-donate" role="button"
href="{{ app_info.donation_url }}">
<span class="fa fa-heart"></span>
{% trans "Donate" %}
<span class="fa fa-external-link"></span>
</a>
{% endif %}
</div>
<div class="toolbar-collapsed-content">
{% include "clients.html" with clients=app_info.clients enabled=is_enabled %}

View File

@ -554,7 +554,8 @@ input[type='submit'].running-status-button {
margin-bottom: 10px;
}
.btn-toolbar .button-extra-actions {
.btn-toolbar .button-extra-actions,
.btn-toolbar .button-donate {
float: right;
}