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:
Alice Kile 2019-11-05 16:03:24 +05:30 committed by James Valleroy
parent 3968cefc48
commit f004939f50
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
2 changed files with 62 additions and 10 deletions

View File

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

View File

@ -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;
}