mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-01-21 07:55:00 +00:00
show app icons in apps page
- restructure the template markup so as to show the icon towards the left of the app heading and description. - if condition to provide backwards compatiblity to system apps using setup.html. - deluge and matrixsynapse modules have a new property that will be used for accessing the icon file name. (to be replicated across all other modules *weew*) Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
parent
3968cefc48
commit
f004939f50
@ -36,18 +36,42 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h2>{% trans "Installation" %}: {{ setup_helper.module.short_description|default:'' }} ({{ setup_helper.module.name }}) </h2>
|
||||
{% if setup_helper.module.icon_filename %}
|
||||
<header class="app-header">
|
||||
<figure>
|
||||
<img src="{% static 'theme/icons/' %}{{ setup_helper.module.icon_filename }}.svg"/>
|
||||
<figcaption>{{ setup_helper.module.name }}</figcaption>
|
||||
</figure>
|
||||
<section class="app-description">
|
||||
<h2>{% trans "Installation" %}: {{ setup_helper.module.short_description|default:'' }} ({{ setup_helper.module.name }}) </h2>
|
||||
|
||||
{% for paragraph in setup_helper.module.description %}
|
||||
<p>{{ paragraph|safe }}</p>
|
||||
{% endfor %}
|
||||
|
||||
{% for paragraph in setup_helper.module.description %}
|
||||
<p>{{ paragraph|safe }}</p>
|
||||
{% endfor %}
|
||||
{% if setup_helper.module.manual_page %}
|
||||
<p class="manual-page">
|
||||
<a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
|
||||
{% trans 'Learn more...' %}
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
</header>
|
||||
{% else %}
|
||||
<h2>{% trans "Installation" %}: {{ setup_helper.module.short_description|default:'' }} ({{ setup_helper.module.name }}) </h2>
|
||||
|
||||
{% if setup_helper.module.manual_page %}
|
||||
<p class="manual-page">
|
||||
<a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
|
||||
{% trans 'Learn more...' %}
|
||||
</a>
|
||||
</p>
|
||||
{% for paragraph in setup_helper.module.description %}
|
||||
<p>{{ paragraph|safe }}</p>
|
||||
{% endfor %}
|
||||
|
||||
{% if setup_helper.module.manual_page %}
|
||||
<p class="manual-page">
|
||||
<a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
|
||||
{% trans 'Learn more...' %}
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% include "toolbar.html" with clients=setup_helper.module.clients %}
|
||||
|
||||
@ -505,9 +505,11 @@ a.menu_link_active {
|
||||
left: 6%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.toggle-button--toggled {
|
||||
background: #337ab7;
|
||||
}
|
||||
|
||||
.toggle-button--toggled::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -535,3 +537,29 @@ a.menu_link_active {
|
||||
.btn-toolbar .button-extra-actions {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: grid;
|
||||
grid-template-columns: 0.2fr 1fr;
|
||||
column-gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.app-header > figure {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.app-header > figure img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-header > figure figcaption {
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.app-description {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user