From f069f663d0abab1833c1e874443a88e6023605a8 Mon Sep 17 00:00:00 2001
From: Joseph Nuthalpati <njoseph@thoughtworks.com>
Date: Sun, 6 Aug 2017 00:39:40 +0530
Subject: [PATCH] UI: Make apps and configure pages responsive on small screens

- Hide the listing of apps and configuration options on small screens,
  so that the user doesn't have to navigate to the bottom of the page.
- Closes #921

Reviewed-by: Johannes Keyser <johanneskeyser@posteo.de>
---
 plinth/templates/apps.html   | 8 ++++++++
 plinth/templates/base.html   | 2 +-
 plinth/templates/system.html | 8 ++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/plinth/templates/apps.html b/plinth/templates/apps.html
index 266f6f079..e3977e914 100644
--- a/plinth/templates/apps.html
+++ b/plinth/templates/apps.html
@@ -20,6 +20,14 @@
 
 {% load i18n %}
 
+{% block submenu %}
+  {% if submenu %}
+    <div class="sidebar">
+      {% include "submenu.html" with menu=submenu %}
+    </div>
+  {% endif %}
+{% endblock %}
+
 {% block content %}
 
   <h2>{% trans "Services and Applications" %}</h2>
diff --git a/plinth/templates/base.html b/plinth/templates/base.html
index 77a768bd9..86a709a60 100644
--- a/plinth/templates/base.html
+++ b/plinth/templates/base.html
@@ -205,7 +205,7 @@
         <div class="col-md-3">
           {% block submenu %}
             {% if submenu %}
-              <div class="sidebar">
+              <div class="sidebar visible-lg-block">
                 {% include "submenu.html" with menu=submenu %}
               </div><!--/.sidebar -->
             {% endif %}
diff --git a/plinth/templates/system.html b/plinth/templates/system.html
index b35bfb5e9..89ec01029 100644
--- a/plinth/templates/system.html
+++ b/plinth/templates/system.html
@@ -20,6 +20,14 @@
 
 {% load i18n %}
 
+{% block submenu %}
+  {% if submenu %}
+    <div class="sidebar">
+      {% include "submenu.html" with menu=submenu %}
+    </div>
+  {% endif %}
+{% endblock %}
+
 {% block content %}
 
   <h2>{% trans "System Configuration" %}</h2>