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

app: Make the toggle-button responsive

Browse Source 
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
This commit is contained in:
Alice Kile 2019-11-18 14:29:13 +05:30 committed by Joseph Nuthalapati
parent 1a65c88881
commit fec995d7e0
No known key found for this signature in database
GPG Key ID: 5398F00A2FA43C35
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
plinth/templates/app.html
View File

@ -26,17 +26,21 @@
{% load static %} {% load static %}
{% block content %} {% block content %}
<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>
<header> <header>
{% block pagetitle %} <section class='header-bar'>
<h2>{{ name }}</h2> {% block pagetitle %}
{% endblock %} <h2>{{ name }}</h2>
{% 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 %} {% block description %}
{% for paragraph in description %} {% for paragraph in description %}
@ -44,7 +48,7 @@
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}
</header> </header>
{% if manual_page %} {% if manual_page %}
<p class="manual-page"> <p class="manual-page">
<a href="{% url 'help:manual-page' lang='-' page=manual_page %}"> <a href="{% url 'help:manual-page' lang='-' page=manual_page %}">
@ -117,6 +121,6 @@
value="{% trans "Update setup" %}"/> value="{% trans "Update setup" %}"/>
</form> </form>
{% endblock %} {% endblock %}
<script src="{% static 'theme/js/app.template.js' %}"></script> <script src="{% static 'theme/js/app.template.js' %}"></script>
{% endblock %} {% endblock %}

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

@ -483,7 +483,7 @@ a.menu_link_active {
.toggle-button::before { .toggle-button::before {
content: ''; content: '';
display: block; display: block;
height: 18px; height: 18px;
width: 18px; width: 18px;
border-radius: 100%; border-radius: 100%;
background: #fff; background: #fff;
@ -503,3 +503,13 @@ a.menu_link_active {
transform: translateY(-50%) translateX(-116%) transform: translateY(-50%) translateX(-116%)
} }
.header-bar {
display: flex;
flex-flow: row;
justify-content: space-between;
height: 70px;
}
.header-bar .app-toggle-container, .header-bar h2 {
margin: auto 0;
}