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

@@ -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>

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 %}

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;
+}

static/themes/default/css/responsive.css

@@ -0,0 +1,9 @@
+
+/* Responsive queries */
+/* Smartphone */
+
+@media screen and (max-width: 660px) {
+    footer{
+        position: relative;
+    }
+}