ui: Fix top margin for content containers

Currently, when a message is shown at the top or in users and groups page, The
top margin is too short. Increase it to 25px from 5px. Also:

- Don't use the .thumbnail class for containers as this does not match the
  semantics. Create and use class .contain-container.

- Also create class .card-container for all container containing cards. Unused
  for now.

- Indentation fixes.

- Remove duplicated rule.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>

plinth/modules/help/templates/help_index.html

@@ -22,44 +22,44 @@
 {% load firstboot_extras %}
 {% load static %}
 
-{% block content %}
+{% block content-container %}
-<div id="container-wrapper" class="container thumbnail">
+  <div class="container content-container">
-  <h2>{% trans "Help" %}</h2>
+    <h2>{% trans "Help" %}</h2>
 
-  <p>
+    <p>
-    {% url 'help:manual' as manual_url %}
+      {% url 'help:manual' as manual_url %}
-    {% blocktrans trimmed %}
+      {% blocktrans trimmed %}
-      The <a href="{{ manual_url }}">{{ box_name }} Manual</a> is the
+        The <a href="{{ manual_url }}">{{ box_name }} Manual</a> is the
-      best place to start for information regarding {{ box_name }}.
+        best place to start for information regarding {{ box_name }}.
-    {% endblocktrans %}
+      {% endblocktrans %}
-  </p>
+    </p>
 
-  <p>
+    <p>
-    {% blocktrans trimmed %}
+      {% blocktrans trimmed %}
-      <a href="http://wiki.debian.org/FreedomBox" target="_blank">
+        <a href="http://wiki.debian.org/FreedomBox" target="_blank">
-        {{ box_name }} project wiki </a> contains further information.
+          {{ box_name }} project wiki </a> contains further information.
-    {% endblocktrans %}
+      {% endblocktrans %}
-  </p>
+    </p>
 
-  <p>
+    <p>
-    {% blocktrans trimmed %}
+      {% blocktrans trimmed %}
-      To seek help from {{ box_name }} community, queries may be posted on
+        To seek help from {{ box_name }} community, queries may be posted on
-      the
+        the
-      <a href="https://lists.alioth.debian.org/mailman/listinfo/freedombox-discuss">
+        <a href="https://lists.alioth.debian.org/mailman/listinfo/freedombox-discuss">
-      mailing list</a>.  The list archives also contain information
+        mailing list</a>.  The list archives also contain information
-      about problems faced by other users and possible solutions.
+        about problems faced by other users and possible solutions.
-    {% endblocktrans %}
+      {% endblocktrans %}
-  </p>
+    </p>
 
-  <p>
+    <p>
-    {% blocktrans trimmed %}
+      {% blocktrans trimmed %}
-      Many {{ box_name }} contributors and users are also available on
+        Many {{ box_name }} contributors and users are also available on
-      the irc.oftc.net IRC network.  Join and request help on the
+        the irc.oftc.net IRC network.  Join and request help on the
-      <a href="https://webchat.oftc.net/?randomnick=1&channels=freedombox&prompt=1">
+        <a href="https://webchat.oftc.net/?randomnick=1&channels=freedombox&prompt=1">
-      #freedombox</a> channel using the IRC web interface.
+        #freedombox</a> channel using the IRC web interface.
-    {% endblocktrans %}
+      {% endblocktrans %}
-  </p>
+    </p>
-</div>
+  </div>
 {% endblock %}
 
 

plinth/templates/base.html

@@ -219,7 +219,7 @@
   </div>
 
   {% block container %}
-    <div id="container-wrapper" class="container thumbnail">
+    <div class="container content-container">
         {% block content_row %}
             {% block subsubmenu %}
               {% if subsubmenu %}

plinth/templates/cards.html

@@ -30,7 +30,7 @@
     </div>
   </div>
 
-  <div class="container-fluid">
+  <div class="container-fluid card-container">
     <div class="row">
       <div class="card-list">
 
@@ -54,12 +54,7 @@
     </div>
   </div>
 
-  <div id="container-wrapper" class="container">
+  {% block content-container %}
-
+  {% endblock %}
-        {% block content %}
-        {# main content goes here #}
-        {% endblock %}
-
-  </div>
 
 {% endblock %}

plinth/templates/index.html

@@ -71,7 +71,7 @@
   </div>
 
   {% if shortcuts %}
-    <div id="container-wrapper" class="container-fluid">
+    <div class="container-fluid card-container">
       <div class="row">
         <div class="card-list">
           {% for shortcut in shortcuts %}

plinth/templates/service-subsubmenu.html

@@ -24,7 +24,7 @@
 {% load static %}
 
 {% block container %}
-  <div id="container-wrapper" class="container thumbnail">
+  <div class="container content-container">
     {% block content_row %}
 
       {% include 'messages.html' %}

static/themes/default/css/plinth.css

@@ -176,8 +176,11 @@ html {
   max-width: 1000px;
 }
 
-.container.thumbnail {
+.content-container {
-    padding: 5px 50px 50px;
+    padding: 25px 50px 50px;
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 4px;
 }
 
 footer {
@@ -371,10 +374,6 @@ 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;