Add new region for single column pages
authorKostas Papadimitriou <kpap@grnet.gr>
Wed, 14 Mar 2012 11:09:19 +0000 (13:09 +0200)
committerKostas Papadimitriou <kpap@grnet.gr>
Wed, 14 Mar 2012 11:09:19 +0000 (13:09 +0200)
Add ``bottom content`` region for single column pages to be able to append
extra content at the bottom of the page, cleared by floated elements tha may
exist in main region.

cloudcms/cms.py
cloudcms/static/cloudcms/css/styles.css
cloudcms/static/cloudcms/less/styles.less
cloudcms/synnefo_settings.py
cloudcms/templates/cms/pages/onecol.html

index fbc11d4..4cf9d5f 100644 (file)
@@ -104,6 +104,7 @@ TEMPLATES = [{
     'path': 'cms/pages/onecol.html',
     'regions': (
         ('main', 'Main region'),
+        ('bottom', 'Bottom region'),
         ),
     },
     {
index d2d9c55..bd9a366 100644 (file)
@@ -604,6 +604,17 @@ a.button:hover {
   box-sizing: border-box;
   *behavior: url(boxsizing.htc);
 }
+.clearme {
+  zoom: 1;
+}
+.clearme:before, .clearme:after {
+  display: table;
+  content: "";
+  zoom: 1;
+}
+.clearme:after {
+  clear: both;
+}
 body {
   font-family: 'Antic', sans-serif;
   font-size: 14px;
@@ -651,7 +662,8 @@ section a,
 p a,
 form a,
 .section a,
-.styledlinks a {
+.styledlinks a,
+a.styled {
   color: #000000;
   text-decoration: none;
   border-bottom: 1px solid #f89a1c;
@@ -660,21 +672,24 @@ section a:hover,
 p a:hover,
 form a:hover,
 .section a:hover,
-.styledlinks a:hover {
+.styledlinks a:hover,
+a.styled:hover {
   color: #f89a1c;
 }
 section a.noborder,
 p a.noborder,
 form a.noborder,
 .section a.noborder,
-.styledlinks a.noborder {
+.styledlinks a.noborder,
+a.styled.noborder {
   border: none;
 }
 section a em,
 p a em,
 form a em,
 .section a em,
-.styledlinks a em {
+.styledlinks a em,
+a.styled em {
   color: #3582ac;
 }
 a.simple {
@@ -858,6 +873,7 @@ div.page .page-inner {
   position: relative;
 }
 .maincol {
+  position: relative;
   display: inline;
   float: left;
   margin-left: 22px;
@@ -896,6 +912,25 @@ div.page .page-inner {
 .maincol.full:after {
   clear: both;
 }
+.maincol .nextlink {
+  margin-top: 60px;
+  text-align: right;
+  float: right;
+  margin-right: 50px;
+  font-size: 1.1em;
+}
+.maincol .content-bottom {
+  position: relative;
+  zoom: 1;
+}
+.maincol .content-bottom:before, .maincol .content-bottom:after {
+  display: table;
+  content: "";
+  zoom: 1;
+}
+.maincol .content-bottom:after {
+  clear: both;
+}
 .appbar {
   height: 30px;
   background-color: #3582ac;
index e76fbbe..63ee506 100644 (file)
@@ -14,6 +14,8 @@
     *behavior: url(boxsizing.htc);
 }
 
+.clearme { .clearfix() }
+
 @gradCol: #ddd;
 body {
     #font.main();
@@ -46,7 +48,7 @@ body {
 }
 
 // default link styles
-section a, p a, form a, .section a, .styledlinks a {
+section a, p a, form a, .section a, .styledlinks a, a.styled {
     color: @black;
     text-decoration: none;
     border-bottom: 1px solid @linkColor;
@@ -217,6 +219,7 @@ div.page {
 
 // columnlayout
 .maincol {
+    position: relative;
     .makeColumn(5);
     
     &.wide {
@@ -228,6 +231,16 @@ div.page {
         margin-left: 0;
         .makeColumn(10);
     }
+
+    .nextlink {
+         margin-top: 60px;
+         text-align: right;
+         float: right;
+         margin-right: 50px;
+         font-size: 1.1em;
+    }   
+
+    .content-bottom { position: relative; .clearfix(); }
 }
 
 .appbar {
index 3eac1eb..fbf2a73 100644 (file)
@@ -66,6 +66,7 @@ cloudcms_staticfiles = {
         'feincms': '',
         'django.contrib.admin': ('media', 'admin_media'),
 }
+
 cloudcms_context_processors = [
     'cloudcms.context_processors.application',
     'synnefo.lib.context_processors.cloudbar'
index b1a7029..1623e49 100644 (file)
@@ -2,9 +2,20 @@
 
 {% block page.body %}
 <div class="maincol full">
-    {% for content in feincms_page.content.main %}
-        {{ content.render }}
-    {% endfor %}
+    <div class="clearme">
+        {% block page.maincol.content %}
+            {% for content in feincms_page.content.main %}
+                {{ content.render }}
+            {% endfor %}
+        {% endblock %}
+    </div>
+    <div class="content-bottom">
+        {% block page.bottom.content %}
+            {% for content in feincms_page.content.bottom %}
+                {{ content.render }}
+            {% endfor %}
+        {% endblock %}
+    </div>
 </div>
 {% endblock %}