From fec995d7e0095f084322789f6ed9e309ca7844de Mon Sep 17 00:00:00 2001
From: Alice Kile <buoyantair@protonmail.com>
Date: Mon, 18 Nov 2019 14:29:13 +0530
Subject: [PATCH] app: Make the toggle-button responsive

Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
---
 plinth/templates/app.html            | 28 ++++++++++++++++------------
 static/themes/default/css/plinth.css | 12 +++++++++++-
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/plinth/templates/app.html b/plinth/templates/app.html
index 7be43e9be..e50f3f12b 100644
--- a/plinth/templates/app.html
+++ b/plinth/templates/app.html
@@ -26,17 +26,21 @@
 {% load static %}
 
 {% 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>
-    {% block pagetitle %}
-      <h2>{{ name }}</h2>
-    {% endblock %}
+    <section class='header-bar'>
+      {% block pagetitle %}
+        <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 %}
       {% for paragraph in description %}
@@ -44,7 +48,7 @@
       {% endfor %}
     {% endblock %}
   </header>
-  
+
   {% if manual_page %}
     <p class="manual-page">
       <a href="{% url 'help:manual-page' lang='-' page=manual_page %}">
@@ -117,6 +121,6 @@
             value="{% trans "Update setup" %}"/>
     </form>
   {% endblock %}
-  
+
   <script src="{% static 'theme/js/app.template.js' %}"></script>
 {% endblock %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index ce9f98599..60a71d872 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -483,7 +483,7 @@ a.menu_link_active {
 .toggle-button::before {
     content: '';
     display: block;
-    height: 18px;       
+    height: 18px;
     width: 18px;
     border-radius: 100%;
     background: #fff;
@@ -503,3 +503,13 @@ a.menu_link_active {
     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;
+}