From 966b2cb36a1bad64d92d12be5756c5dfb99bf8c2 Mon Sep 17 00:00:00 2001
From: Robert Martinez <mail@mray.de>
Date: Fri, 19 Oct 2018 11:50:01 +0200
Subject: [PATCH] Add white Card

This puts pages on white cards.
This lets the footer float underneath content instead of bottom of the page.
This should fix issues with MR !1335

Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
---
 plinth/modules/help/templates/help_index.html |  4 ++--
 plinth/templates/base.html                    |  7 +------
 plinth/templates/cards.html                   |  6 ++----
 static/themes/default/css/plinth.css          | 15 ++++++++++-----
 4 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/plinth/modules/help/templates/help_index.html b/plinth/modules/help/templates/help_index.html
index 16ef9560b..1d08ab091 100644
--- a/plinth/modules/help/templates/help_index.html
+++ b/plinth/modules/help/templates/help_index.html
@@ -23,7 +23,7 @@
 {% load static %}
 
 {% block content %}
-
+<div id="container-wrapper" class="container thumbnail">
   <h2>{% trans "Help" %}</h2>
 
   <p>
@@ -59,7 +59,7 @@
       #freedombox</a> channel using the IRC web interface.
     {% endblocktrans %}
   </p>
-
+</div>
 {% endblock %}
 
 
diff --git a/plinth/templates/base.html b/plinth/templates/base.html
index 51bcf7ab4..241bd9621 100644
--- a/plinth/templates/base.html
+++ b/plinth/templates/base.html
@@ -219,10 +219,8 @@
   </div>
 
   {% block container %}
-    <div id="container-wrapper" class="container">
-      <div class="row">
+    <div id="container-wrapper" class="container thumbnail">
         {% block content_row %}
-          <div class="col-md-8 col-md-offset-2">
             {% block subsubmenu %}
               {% if subsubmenu %}
                 {% show_subsubmenu subsubmenu %}
@@ -234,14 +232,11 @@
             {% block content %}
               {# main content goes here #}
             {% endblock %}
-          </div>
         {% endblock %}
-      </div>
     </div>
   {% endblock %}
 
   <footer>
-    <hr>
     <div class="container">
       {% block footer_block %}
         <div class="license-info">
diff --git a/plinth/templates/cards.html b/plinth/templates/cards.html
index 9bc5ed742..ada6a43f1 100644
--- a/plinth/templates/cards.html
+++ b/plinth/templates/cards.html
@@ -55,13 +55,11 @@
   </div>
 
   <div id="container-wrapper" class="container">
-    <div class="row">
-      <div class="col-md-8 col-md-offset-2">
+
         {% block content %}
         {# main content goes here #}
         {% endblock %}
-      </div>
-    </div>
+
   </div>
 
 {% endblock %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 6a08545e5..ec9cee45a 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -150,7 +150,9 @@ body {
 /* Sticky footer styles
 -------------------------------------------------- */
 footer .license-info {
-    opacity: 0.75;
+    opacity: 0.5;
+    margin-right: 20px;
+    text-align: right;
 }
 
 .footer-logo {
@@ -175,14 +177,13 @@ html {
   max-width: 1000px;
 }
 
-#container-wrapper {
-    /*covers for footer height */
-    padding-bottom: 150px;
+.container.thumbnail {
+    padding: 5px 50px 50px;
 }
 
 footer {
     text-align: center;
-    position: absolute;
+    position: relative;
     bottom: 0;
     width: 100%;
     height: 150px;
@@ -374,6 +375,10 @@ a.menu_link_active {
     font-size: 80px;
 }
 
+.container.thumbnail {
+  padding: 5px 50px 50px;
+}
+
 /* Button table - Tables with a list of actions as buttons on top */
 .button-table > .button-row + .table {
     margin-top: 10px;