From 88272f766ed4b086e94a7f83e39bd886d57648d7 Mon Sep 17 00:00:00 2001
From: pycat <kkampardi@gmail.com>
Date: Thu, 11 May 2017 13:19:58 +0300
Subject: [PATCH] Plinth footer fixes - UI #840

- Pined footer to the bottom of the viewport
- Introduced a new stylesheet to hold custom responsive css
- Footer bottom fix exluded for smaller viewports
---
 plinth/templates/base.html               | 28 +++++++++++++-----------
 plinth/templates/index.html              | 10 +++++----
 static/themes/default/css/plinth.css     | 25 +++++++++++++++++----
 static/themes/default/css/responsive.css |  9 ++++++++
 4 files changed, 51 insertions(+), 21 deletions(-)
 create mode 100644 static/themes/default/css/responsive.css

diff --git a/plinth/templates/base.html b/plinth/templates/base.html
index cfb4234d9..9e71743e1 100644
--- a/plinth/templates/base.html
+++ b/plinth/templates/base.html
@@ -69,7 +69,7 @@
   <!-- Bootstrap base CSS -->
   <link rel="stylesheet" href="{% static '/javascript/bootstrap/css/bootstrap.min.css' %}"/>
   <link rel="stylesheet" href="{% static 'theme/css/plinth.css' %}"/>
-
+  <link rel="stylesheet" href="{% static 'theme/css/responsive.css' %}"/>
   {% block app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %}
   {% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %}
 </head>
@@ -212,20 +212,22 @@
         {# this center-info should contain help texts but no menus #}
       {% endblock %}
     </div>
-
-    <hr>
-
-    <footer>
-      {% block footer_block %}
-        <p>
-          <a href="{% static 'jslicense.html' %}" data-jslicense="1" style="opacity: 0.75;">
-            {% trans "JavaScript license information" %}</a>
-        </p>
-      {% endblock %}
-    </footer>
-
   </div><!--/.fluid-container-->
 
+  <footer>
+    <hr>
+    <div class="container">
+      {% block footer_block %}
+        <div class="license-info">
+          <p>
+            <a href="{% static 'jslicense.html' %}" data-jslicense="1">
+              {% trans "JavaScript license information" %}</a>
+          </p>
+        </div>
+      {% endblock %}
+    </div>
+  </footer>
+
   <!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads-->
   <!-- Local link to system Modernizr (includes HTML5 Shiv) -->
   <script type="text/javascript" src="{% static '/javascript/modernizr/modernizr.min.js' %}"></script>
diff --git a/plinth/templates/index.html b/plinth/templates/index.html
index 77672dcdf..f9c0f0d41 100644
--- a/plinth/templates/index.html
+++ b/plinth/templates/index.html
@@ -158,9 +158,11 @@
     </div>
   </div>
 
-  <p class="license-info">
-    <a href="{% static 'jslicense.html' %}" data-jslicense="1">
-      {% trans "JavaScript license information" %}</a>
-  </p>
+  <div class="license-info">
+    <p>
+      <a href="{% static 'jslicense.html' %}" data-jslicense="1">
+        {% trans "JavaScript license information" %}</a>
+    </p>
+  </div>
 
 {% endblock %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 68b740730..2b1439b23 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -74,10 +74,8 @@ body {
     width: 60px;
 }
 
-footer {
-    text-align: center;
-}
-
+/* Sticky footer styles
+-------------------------------------------------- */
 footer .license-info {
     opacity: 0.75;
 }
@@ -85,3 +83,22 @@ footer .license-info {
 .footer-logo {
     width: 140px;
 }
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+}
+footer {
+  text-align: center;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
+footer license-info p{
+    margin: 20px 0;
+}
\ No newline at end of file
diff --git a/static/themes/default/css/responsive.css b/static/themes/default/css/responsive.css
new file mode 100644
index 000000000..ebcede839
--- /dev/null
+++ b/static/themes/default/css/responsive.css
@@ -0,0 +1,9 @@
+
+/* Responsive queries */
+/* Smartphone */
+
+@media screen and (max-width: 660px) {
+    footer{
+        position: relative;
+    }
+}
\ No newline at end of file