From 62cf6a11e09ac22fc319ee8f024f2cb393d84846 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Tue, 18 Feb 2020 12:04:24 -0800
Subject: [PATCH] app: cosmetic: Minor refactoring of header styling

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

diff --git a/plinth/templates/header.html b/plinth/templates/header.html
index 686cfa47a..348d12ba5 100644
--- a/plinth/templates/header.html
+++ b/plinth/templates/header.html
@@ -24,11 +24,13 @@
         {% 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 %}
+        {% 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>
 
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 58806f52f..b1651ec0c 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -487,12 +487,6 @@ a.menu_link_active {
     width: 50%;
 }
 
-.app-toggle-container {
-    display: none;
-    flex-flow: row;
-    justify-content: flex-end;
-}
-
 /*
  * Toggle button
  */
@@ -526,17 +520,9 @@ a.menu_link_active {
     transform: translateY(-50%) translateX(-100%)
 }
 
-.header-bar {
-    display: flex;
-    flex-flow: row;
-    justify-content: space-between;
-    height: 70px;
-}
-
-.header-bar .app-toggle-container, .header-bar h2 {
-    margin: auto 0;
-}
-
+/*
+ * Button toolbar
+ */
 .btn-toolbar {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -546,6 +532,9 @@ a.menu_link_active {
     float: right;
 }
 
+/*
+ * App's header
+ */
 .app-header {
     display: grid;
     grid-template-columns: 0.2fr 1fr;
@@ -569,13 +558,22 @@ a.menu_link_active {
     grid-column: 1;
 }
 
-/* Help manual - anchor is below navbar */
-*[id^='idm']:before {
-  display: block;
-  content: " ";
-  margin-top: -60px;
-  height: 60px;
-  visibility: hidden;
+.header-bar {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    height: 70px;
+}
+
+.header-bar .app-toggle-container,
+.header-bar h2 {
+    margin: auto 0;
+}
+
+.app-toggle-container {
+    display: none;
+    flex-flow: row;
+    justify-content: flex-end;
 }
 
 @media screen and (max-width: 767px) {
@@ -613,6 +611,15 @@ a.menu_link_active {
     }
 }
 
+/* Help manual - anchor is below navbar */
+*[id^='idm']:before {
+    display: block;
+    content: " ";
+    margin-top: -60px;
+    height: 60px;
+    visibility: hidden;
+}
+
 /*
  * Notifications
  */