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

fix toggle buttle html layout and responsive design css

Browse Source 
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Alice Kile 2019-11-26 12:12:28 +05:30 committed by James Valleroy
parent 0dd4d1acf2
commit 9cd203411d
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
2 changed files with 47 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
plinth/templates/header.html
View File

@ -3,6 +3,7 @@
{% load static %}
<header class="app-header {% if not icon_filename %} app-header-single-column {% endif %}">
{% if icon_filename %}
<img src="{% static 'theme/icons/' %}{{ icon_filename }}.svg" alt="{{ name }}"/>
@ -10,13 +11,22 @@
{% endif %}
<section class="app-description" >
{% block pagetitle %}
{% if setup %}
<h2>{% trans "Installation" %}: {{ short_description|default:'' }} ({{ name }})</h2>
{% else %}
<h2>{{ name }}</h2>
{% endif %}
{% endblock %}
<section class='header-bar'>
{% block pagetitle %}
{% if setup %}
<h2>{% trans "Installation" %}: {{ short_description|default:'' }} ({{ name }})</h2>
{% else %}
<h2>{{ name }}</h2>
{% endif %}
{% endblock %}
<div id='app-toggle-container' class="app-toggle-container">
{% if is_enabled %}
<button id="app-toggle-button" value="False" class="btn toggle-button toggle-button--toggled"></button>
{% else %}
<button id="app-toggle-button" value="True" class="btn toggle-button"></button>
{% endif %}
</div>
</section>
{% block description %}
{% for paragraph in description %}

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

@ -579,4 +579,34 @@ a.menu_link_active {
padding: 10px;
transition: height 0.5s width 0.5s;
}
.header-bar {
display: flex;
flex-flow: column-reverse;
justify-content: center;
height: auto;
}
.header-bar h2 {
margin: 0 0 15px 0;
}
.header-bar .app-toggle-container {
display: flex;
flex-flow: row;
justify-content: center;
margin: 30px 0;
}
.header-bar .toggle-button {
transform: scale(1.2);
}
.content-container {
margin: 0 10vw;
}
.card-list {
margin: 20px 10vw;
}
}