nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-09-19 04:59:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

show app icons in apps page

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
plinth/templates/setup.html
View File

@ -36,18 +36,42 @@
{% block content %} {% 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 %} {% for paragraph in setup_helper.module.description %}
<p>{{ paragraph|safe }}</p> <p>{{ paragraph|safe }}</p>
{% endfor %} {% endfor %}
{% if setup_helper.module.manual_page %} {% if setup_helper.module.manual_page %}
<p class="manual-page"> <p class="manual-page">
<a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}"> <a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
{% trans 'Learn more...' %} {% trans 'Learn more...' %}
</a> </a>
</p> </p>
{% endif %}
</section>
</header>
{% else %}
<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 %}
{% 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 %} {% endif %}
{% include "toolbar.html" with clients=setup_helper.module.clients %} {% include "toolbar.html" with clients=setup_helper.module.clients %}

28
static/themes/default/css/plinth.css
View File

@ -505,9 +505,11 @@ a.menu_link_active {
left: 6%; left: 6%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.toggle-button--toggled { .toggle-button--toggled {
background: #337ab7; background: #337ab7;
} }
.toggle-button--toggled::before { .toggle-button--toggled::before {
content: ''; content: '';
position: absolute; position: absolute;
@ -535,3 +537,29 @@ a.menu_link_active {
.btn-toolbar .button-extra-actions { .btn-toolbar .button-extra-actions {
float: right; 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;
}