From 8e6b80359f41c140c3895d76b679a9e367c5702a Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <blackmagik88@gmail.com>
Date: Mon, 25 Jul 2016 16:30:27 +0200
Subject: [PATCH] Refactor page and base templates to work with patterns

---
 app/static/src/sass/global/_helpers.scss      | 15 +++++
 app/static/src/sass/layout/_global.scss       |  4 +-
 app/static/src/sass/modules/_pattern.scss     | 41 +++++++++---
 app/templates/base.html                       |  8 +--
 .../magazine/article/article_detail.html      |  3 -
 app/templates/pages/page.html                 | 62 +++++++++++--------
 6 files changed, 86 insertions(+), 47 deletions(-)

diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss
index fcfd9ef4..616ea8cf 100755
--- a/app/static/src/sass/global/_helpers.scss
+++ b/app/static/src/sass/global/_helpers.scss
@@ -1,3 +1,15 @@
+.m0 {
+    @include margin(0);
+}
+.mt0 {
+    @include margin-top(0);
+}
+.mb0 {
+    @include margin-bottom(0);
+}
+.mr0 {
+    @include margin-right(0);
+}
 .m1 {
     @include margin(1);
 }
@@ -121,3 +133,6 @@
     margin: 0;
     padding: 0;
 }
+.white-bg {
+    background: white;
+}
diff --git a/app/static/src/sass/layout/_global.scss b/app/static/src/sass/layout/_global.scss
index 5549ec01..18b56cc0 100755
--- a/app/static/src/sass/layout/_global.scss
+++ b/app/static/src/sass/layout/_global.scss
@@ -1,6 +1,4 @@
 .main {
-    @include margin(3 0 3 0);
+    @include margin(3 0 0 0);
     @include padding(1 0 0 0);
-
-    background: white;
 }
diff --git a/app/static/src/sass/modules/_pattern.scss b/app/static/src/sass/modules/_pattern.scss
index 57f7c5fe..a3a67f7f 100644
--- a/app/static/src/sass/modules/_pattern.scss
+++ b/app/static/src/sass/modules/_pattern.scss
@@ -1,6 +1,29 @@
 $module: ".pattern";
 
-#{$module} {
+#{$module}-bg {
+
+    background-repeat: repeat;
+    background-position: top left;
+
+    &--circles {
+        background-image: url(../img/patterns/circles.png);
+    }
+
+    &--squares {
+        background-image: url(../img/patterns/squares.png);
+    }
+
+    &--stripes {
+        background-image: url(../img/patterns/stripes.png);
+    }
+
+    &--triangles {
+        background-image: url(../img/patterns/triangles.png);
+    }
+
+}
+
+#{$module}-over {
 
     position: relative;
 
@@ -17,27 +40,27 @@ $module: ".pattern";
         opacity: 0.2;
     }
 
-    &--creation {
+    &--circles {
         &:after {
-            background-image: url(../img/patterns/creation.png);
+            background-image: url(../img/patterns/circles.png);
         }
     }
 
-    &--innovation {
+    &--squares {
         &:after {
-            background-image: url(../img/patterns/innovation.png);
+            background-image: url(../img/patterns/squares.png);
         }
     }
 
-    &--recherche {
+    &--stripes {
         &:after {
-            background-image: url(../img/patterns/recherche.png);
+            background-image: url(../img/patterns/stripes.png);
         }
     }
 
-    &--transmission {
+    &--triangles {
         &:after {
-            background-image: url(../img/patterns/transmission.png);
+            background-image: url(../img/patterns/triangles.png);
         }
     }
 
diff --git a/app/templates/base.html b/app/templates/base.html
index fc03006b..7099b8b7 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -105,11 +105,9 @@
     {% endif %}
 
     <main class="main" role="main">
-        <div class="container">
-            {% block content_header %}{% endblock %}
-            {% block main %}{% endblock %}
-            {% block content_footer %}{% endblock %}
-        </div>
+        {% block content_header %}{% endblock %}
+        {% block main %}{% endblock %}
+        {% block content_footer %}{% endblock %}
     </main>
 
     <footer class="footer" role="footer">
diff --git a/app/templates/magazine/article/article_detail.html b/app/templates/magazine/article/article_detail.html
index d95eaafd..6e12aaea 100644
--- a/app/templates/magazine/article/article_detail.html
+++ b/app/templates/magazine/article/article_detail.html
@@ -43,15 +43,12 @@
     Don't know why this doesn't work :(
     {% endcomment %}
     {% if related_posts %}
-        <hr />
         <h2 class="dashed dashed--center">{% trans "Also discover" %}</h2>
         {% for post in related_posts %}
             {% include 'magazine/article/includes/article_card.html' %}
         {% endfor %}
     {% endif %}
 
-    <hr />
-
     <div class="tac">
         <h2 class="dashed dashed--center">{% trans "Also discover" %}</h2>
         <div class="row">
diff --git a/app/templates/pages/page.html b/app/templates/pages/page.html
index c07fb9ce..bd9daae0 100644
--- a/app/templates/pages/page.html
+++ b/app/templates/pages/page.html
@@ -17,40 +17,48 @@
 
 {% block main %}
     <div class="page page--{% spaceless %}{% block page_class %}{% endblock %}{% endspaceless %}">
+        <div class="container">
 
-        <div class="row">
-            <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
-                {% block page_title %}
-                    {{ page.title }}
-                {% endblock %}
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-3 col-lg-2">
-                <div class="page__sidebar">
-                    {% block page_sidebar %}
-                        {% if page.get_ascendants|length < 2 %}
-                            {% page_menu "pages/menus/current_tree_primary.html" %}
-                        {% endif %}
-                        {% if page.get_ascendants|length == 2 %}
-                            {% page_menu "pages/menus/current_tree_secondary.html" %}
-                        {% endif %}
+            <div class="row">
+                <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2 white-bg">
+                    {% block page_title %}
+                        {{ page.title }}
                     {% endblock %}
                 </div>
             </div>
-            <div class="col-sm-9 col-lg-8">
-                <div class="page__content" data-summary-content>
-                    {% block page_content %}
-                        {{ page.content }}
-                    {% endblock %}
+
+            <div class="row">
+                <div class="col-sm-3 col-lg-2">
+                    <div class="page__sidebar">
+                        {% block page_sidebar %}
+                            {% if page.get_ascendants|length < 2 %}
+                                {% page_menu "pages/menus/current_tree_primary.html" %}
+                            {% endif %}
+                            {% if page.get_ascendants|length == 2 %}
+                                {% page_menu "pages/menus/current_tree_secondary.html" %}
+                            {% endif %}
+                        {% endblock %}
+                    </div>
+                </div>
+                <div class="col-sm-9 col-lg-8 white-bg">
+                    <div class="page__content" data-summary-content>
+                        {% block page_content %}
+                            {{ page.content }}
+                        {% endblock %}
+                    </div>
                 </div>
             </div>
+
         </div>
-        <div class="row">
-            <div class="col-sm-12">
-                {% block page_sub_content %}
-                    {{ page.content }}
-                {% endblock %}
+
+        <div class="white-bg">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-12">
+                        <hr class="mt0" />
+                        {% block page_sub_content %}{% endblock %}
+                    </div>
+                </div>
             </div>
         </div>
 
-- 
2.39.5