Refactor page and base templates to work with patterns

diff --git a/app/static/src/sass/global/_helpers.scss b/app/static/src/sass/global/_helpers.scss
index fcfd9ef4bd6d3e15275af37de0824309b7854ff8..616ea8cf98cfb98f2ac0f84cf060f20a31706332 100755 (executable)
--- 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 5549ec01b2e09347d4c65d6dff354b58fee2f30b..18b56cc046990e090ee4bba0a40c52b157f7707b 100755 (executable)
--- 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 57f7c5fe858ee423cc40f9dd7d66cfe4d5545873..a3a67f7fdda07358902c4c81f51bd3c32d777f95 100644 (file)
--- 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 fc03006b72f1a6db88f9a70affa40e1e72b9c824..7099b8b7e1bd5a61412bf7e4c61f281c6df10873 100644 (file)
--- 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 d95eaafd9a931f7a9d55259b0ab26993e41a10c0..6e12aaeab479c3218ec482ba4df16adc6f901656 100644 (file)
--- 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 c07fb9ce9f59b33dadfcaa29d88d514ff940f3c6..bd9daae069387adf91c6d9eca62aafce677efdab 100644 (file)
--- 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>