Add the briefs, articles and custompages to the homepage

diff --git a/app/static/src/sass/config/_config.scss b/app/static/src/sass/config/_config.scss
index 6346c5afc87a0534f8e231397caf775ccdfff778..11d703c0fbe9dbc65e81fd11eb386fce94b227ee 100644 (file)
--- a/app/static/src/sass/config/_config.scss
+++ b/app/static/src/sass/config/_config.scss
@@ -6,3 +6,10 @@ $header-height: 78px;
 // Home
 
 $home-slider-height: 760px;
+
+// Brief box
+
+$brief-box-background: #5F5F5E;
+$brief-box-background-head: #868686;
+$brief-box-color-head: #000000;
+$brief-box-color: #FFFFFF;

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index 3a90e37508eedb79a97793e332d3122d56e0e719..48d5e0d7145e6f6e3fcb9fdb86eb8a4f2e10c30a 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -7,6 +7,7 @@
 // Boxes
 @import 'boxes/article-box';
 @import 'boxes/page-box';
+@import 'boxes/brief-box';
 
 // Sliders
 @import 'sliders/slider-page';

diff --git a/app/static/src/sass/modules/boxes/_brief-box.scss b/app/static/src/sass/modules/boxes/_brief-box.scss
new file mode 100644 (file)
index 0000000..635082d
--- /dev/null
+++ b/app/static/src/sass/modules/boxes/_brief-box.scss
@@ -0,0 +1,68 @@
+$module: ".brief-box";
+
+#{$module} {
+
+    position: relative;
+    @include padding(1);
+    @include margin-bottom(1);
+    text-align: center;
+
+    background: $brief-box-background;
+
+    &__head {
+
+        text-transform: uppercase;
+        display: inline-block;
+        background: $brief-box-background-head;
+        color: $brief-box-color-head;
+
+        @include padding(0 1);
+
+        @include font-size(m);
+        @include line-height(1.25);
+        @include typeface(sans-serif);
+        font-weight: weight(regular);
+
+    }
+
+    &__title {
+
+        display: block;
+        margin: 0 auto;
+        color: $brief-box-color;
+
+        @include margin-top(3);
+        @include margin-bottom(1);
+
+        @include font-size(xl);
+        @include line-height(1.25);
+        @include typeface(serif);
+        font-weight: weight(heavy);
+
+    }
+
+    &__desc {
+
+        display: block;
+        margin: 0 auto;
+        color: $brief-box-color;
+
+        @include margin-bottom(1);
+
+        @include font-size(xl);
+        @include line-height(1.25);
+        @include typeface(serif);
+        font-weight: weight(light);
+
+    }
+
+    &__button {
+
+        @extend .button;
+        @extend .button--small;
+
+        @include margin-bottom(3);
+
+    }
+
+}

diff --git a/app/templates/home/inc/body.html b/app/templates/home/inc/body.html
index 92b41113dd809c93866f1b78e64124f8af57b647..5bcfdfa4419ea24740b537f6cc56a8bb529b689b 100644 (file)
--- a/app/templates/home/inc/body.html
+++ b/app/templates/home/inc/body.html
@@ -1,13 +1,13 @@
-<hr/>
-<h1>Body</h1>
-<br/>
-{% for body in home.dynamiccontenthomebody_set.all %}
-  {% if body.content_type.model == "brief" %}
-    {% include "home/inc/brief_card.html" %}
-  {% else %}
-    {% include "home/inc/generic_card.html" %}
-  {% endif %}
-{% endfor %}
-
-<br/>
-<hr/>
+<div class="container">
+    <div class="row">
+        {% for body in home.dynamiccontenthomebody_set.all %}
+            <div class="col-xs-4">
+                {% if body.content_type.model == "brief" %}
+                    {% include "home/inc/brief_card.html" %}
+                {% else %}
+                    {% include "home/inc/generic_card.html" %}
+                {% endif %}
+            </div>
+        {% endfor %}
+    </div>
+</div>

diff --git a/app/templates/home/inc/brief_card.html b/app/templates/home/inc/brief_card.html
index 9303afb515ab2105480575a8a6bb6a4b61bd00fe..e9b6626545b4cc83b9eed01509a14a65981f827e 100644 (file)
--- a/app/templates/home/inc/brief_card.html
+++ b/app/templates/home/inc/brief_card.html
@@ -1,10 +1,21 @@
-<h2>{{ body.content_object.title }}<h2><br/>
-<p>{{ body.content_object.description|slice:":500" }}</p>
-{% if body.content_object.external_content %}
-<a href="{{ body.content_object.external_content }}" title="{{ body.content_object.text_button }}">{{ body.content_object.text_button }}</a><br/>
-{% elif body.content_object.content_object %}
-<a href="{{ body.content_object.content_object.get_absolute_url }}" title="{{ body.content_object.text_button }}">{{ body.content_object.text_button }}</a><br/>
-{% endif %}
-<a href="{{ body.content_object.get_absolute_url }}" title="{{ body.content_object.title }}">{{ body.content_object.title }}</a><br/>
-
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br/>
+{% load i18n %}
+
+<div class="brief-box">
+
+    <div class="brief-box__head">
+        {% trans 'Brief !' %}
+    </div>
+
+    <h3 class="brief-box__title">{{ body.content_object.title }}</h3>
+    <div class="brief-box__desc">
+        {{ body.content_object.description|slice:":500" }}
+    </div>
+    {% if body.content_object.external_content %}
+        <a class="brief-box__button" href="{{ body.content_object.external_content }}" title="{{ body.content_object.text_button }}">{{ body.content_object.text_button }}</a>
+    {% elif body.content_object.content_object %}
+        <a class="brief-box__button" href="{{ body.content_object.content_object.get_absolute_url }}" title="{{ body.content_object.text_button }}">{{ body.content_object.text_button }}</a>
+    {% else %}
+        <a class="brief-box__button" href="{{ body.content_object.get_absolute_url }}" title="{{ body.content_object.title }}">{{ body.content_object.title }}</a>
+    {% endif %}
+
+</div>

diff --git a/app/templates/home/inc/generic_card.html b/app/templates/home/inc/generic_card.html
index b74bb8f4fa2428982a8c24219340be34fea430dc..3594b48fa5c8266cfed27eb4ed40e1a79e09f993 100644 (file)
--- a/app/templates/home/inc/generic_card.html
+++ b/app/templates/home/inc/generic_card.html
@@ -1,10 +1,46 @@
-{% load organization_tags i18n %}
-<h2>{{ body.content_object.title }}<h2><br/>
-<p>{{ body.content_object.description|slice:":500" }}</p>
-{% with body.content_object.images.all|get_type:'card' as image %}
-  {% if image %}
-    <img src="{{ MEDIA_URL }}{{ image.first.file }}" title="" /><br/>
-  {% endif %}
-{% endwith %}
-<a href="{{ body.content_object.get_absolute_url }}" title="{{ body.content_object.title }}">{{ body.content_object.title }}</a><br/>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br/>
+{% load i18n pages_tags mezzanine_tags media_tags organization_tags %}
+
+<a class="article-box" href="{{ body.content_object.get_absolute_url }}" title="{{ body.content_object.title }}">
+    <div class="article-box__header">
+        <figure class="article-box__image">
+            {% with body.content_object.images.all|get_type:'card' as image %}
+                {% if image %}
+                    <img src="{{ MEDIA_URL }}{% thumbnail image.first.file 427 286 %}" data-src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 %}" class="lazyload" alt="" />
+                {% endif %}
+            {% endwith %}
+        </figure>
+        {% if body.content_type.model == 'article' %}
+            <div class="article-box__tags">
+                <div class="tag tag--small tag--category">
+                    {% trans 'News' %}
+                </div>
+                {% if body.content_object.department %}
+                    <div class="tag tag--small dashed dashed--gray">
+                      {{ body.content_object.department.name }}
+                    </div>
+                {% endif %}
+            </div>
+        {% elif body.content_type.model == 'event' %}
+            <!-- TODO: Add event type tags -->
+        {% endif %}
+    </div>
+
+    <div class="article-box__content tal">
+        <h3 class="article-box__title">{{ body.content_object.title }}</h3>
+        <div class="article-box__subtitle">
+            {% if body.content_type.model == 'article' %}
+                {{ body.content_object.publish_date|date:"DATE_FORMAT" }}
+                {% for category in body.content_object.categories.all %}
+                    {% if forloop.first %} | {% endif %}
+                    {% if not forloop.first %}, {% endif %}
+                    <strong>{{ category }}</strong>
+                {% endfor %}
+            {% elif body.content_type.model == 'event' %}
+                <!-- TODO: Add event type categories -->
+            {% endif %}
+        </div>
+        <div class="article-box__desc">
+             {{ body.content_object.description|richtext_filters|safe|truncatechars_html:200 }}
+        </div>
+    </div>
+</a>

diff --git a/app/templates/magazine/article/includes/article_card.html b/app/templates/magazine/article/includes/article_card.html
index 5794e821f501b16ddf2f66c820c7839269c9ce2b..1e30eb5adf71f2dce947c287947208c55c290992 100644 (file)
--- a/app/templates/magazine/article/includes/article_card.html
+++ b/app/templates/magazine/article/includes/article_card.html
@@ -3,11 +3,11 @@
 <a class="article-box" href="{% url 'magazine-article-detail' article.slug %}">
     <div class="article-box__header">
         <figure class="article-box__image">
-          {% with article.images.all|get_type:'card' as images %}
-           {% if images %}
-            <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" data-src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 %}" class="lazyload" />
-           {% endif %}
-          {% endwith %}
+            {% with article.images.all|get_type:'card' as images %}
+                {% if images %}
+                    <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" data-src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 %}" class="lazyload" />
+                {% endif %}
+            {% endwith %}
         </figure>
         <div class="article-box__tags">
             <div class="tag tag--small tag--category">