mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-01-21 07:55:00 +00:00
b166404b0a
- In the app header as well as tag search bar. - De-emphasize the tag buttons in app header so that users won't see them as sections of the page. - Add a bullet Unicode character between the tags in app header to separate them properly with new de-emphasized styling. - Fix vertical alignment of text between tag buttons in app header and the close button in tags in tag search bar. Tests: - In the app header, styling has been de-emphasized and tags now look more like simple text. They are a separated with a bullet Unicode character. Vertical alignment of bullets is accurate. - In the tag search bar, tags continue to look like buttons but more like default buttons. Vertical alignment of close button is accurate. - In both areas tags look properly in dark and light color themes. - In mobile view when there are a lot of tags, tags flow into second line. Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
72 lines
2.0 KiB
HTML
72 lines
2.0 KiB
HTML
{% comment %}
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
{% endcomment %}
|
|
|
|
{% load bootstrap %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
<header class="app-header {% if not app_info.icon_filename %} app-header-single-column {% endif %}">
|
|
|
|
{% if app_info.icon_filename %}
|
|
|
|
{% if app_info.app_id %}
|
|
<img src="{% static app_info.app_id %}/icons/{{ app_info.icon_filename }}.svg" alt="{{ app_info.name }}"/>
|
|
{% else %}
|
|
<img src="{% static 'theme/icons/' %}{{ app_info.icon_filename }}.svg" alt="{{ app_info.name }}"/>
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
<section class="app-description" >
|
|
<section class='app-titles'>
|
|
{% block pagetitle %}
|
|
<div>
|
|
{% if setup %}
|
|
<h2>{% trans "Installation" %}: {{ app_info.name }}</h2>
|
|
{% else %}
|
|
<h2>{{ app_info.name }}</h2>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
{% if app_enable_disable_form %}
|
|
<form class="form form-app-enable-disable" method="post">
|
|
{% csrf_token %}
|
|
|
|
{{ app_enable_disable_form|bootstrap }}
|
|
|
|
<button name="app_enable_disable_button" type="submit"
|
|
class="btn toggle-button {{ is_enabled|yesno:'toggle-button--toggled,' }}">
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if app_info.tags %}
|
|
<div class="app-tags d-flex align-items-center flex-wrap">
|
|
{% for tag in app_info.tags %}
|
|
{% if not forloop.first %}•{% endif %}
|
|
<a href="{{ active_section_url }}?tag={{ tag|urlencode }}"
|
|
class="btn btn-default rounded-pill tag">
|
|
{% trans tag %}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% block description %}
|
|
{% for paragraph in app_info.description %}
|
|
<p>{{ paragraph|safe }}</p>
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|
|
{% if app_info.manual_page %}
|
|
<p class="manual-page">
|
|
<a href="{% url 'help:manual-page' lang='-' page=app_info.manual_page %}">
|
|
{% trans 'Learn more...' %}
|
|
</a>
|
|
</p>
|
|
{% endif %}
|
|
</section>
|
|
</header>
|