From 9cd203411dc4cc3cfbb838acd9c4faa7ab306cb2 Mon Sep 17 00:00:00 2001
From: Alice Kile <buoyantair@protonmail.com>
Date: Tue, 26 Nov 2019 12:12:28 +0530
Subject: [PATCH] fix toggle buttle html layout and responsive design css

Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/header.html         | 24 +++++++++++++++-------
 static/themes/default/css/plinth.css | 30 ++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/plinth/templates/header.html b/plinth/templates/header.html
index 6ae15c022..ecb68be28 100644
--- a/plinth/templates/header.html
+++ b/plinth/templates/header.html
@@ -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 %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 3813af8cd..ee2ed7702 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -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;
+    }
 }
\ No newline at end of file