app: Make the toggle-button responsive

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

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

View File

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