diff --git a/plinth/templates/setup.html b/plinth/templates/setup.html index a79d3f414..03f75ca67 100644 --- a/plinth/templates/setup.html +++ b/plinth/templates/setup.html @@ -36,18 +36,42 @@ {% block content %} -
{{ paragraph|safe }}
+ {% endfor %} - {% for paragraph in setup_helper.module.description %} -{{ paragraph|safe }}
- {% endfor %} + {% if setup_helper.module.manual_page %} + + {% endif %} +- - {% trans 'Learn more...' %} - -
+ {% for paragraph in setup_helper.module.description %} +{{ paragraph|safe }}
+ {% endfor %} + + {% if setup_helper.module.manual_page %} + + {% endif %} {% endif %} {% include "toolbar.html" with clients=setup_helper.module.clients %} diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css index b38a3e28c..2ea12ad95 100644 --- a/static/themes/default/css/plinth.css +++ b/static/themes/default/css/plinth.css @@ -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; +}