Article detail and article card first implementation

diff --git a/app/templates/magazine/article/article_detail.html b/app/templates/magazine/article/article_detail.html
index 66ad853f5d5d0723e5ebd6819e9f65fb0075734e..d95eaafd9a931f7a9d55259b0ab26993e41a10c0 100644 (file)
--- a/app/templates/magazine/article/article_detail.html
+++ b/app/templates/magazine/article/article_detail.html
@@ -1,5 +1,5 @@
-{% extends "magazine/article/article_list.html" %}
-{% load mezzanine_tags comment_tags keyword_tags rating_tags i18n disqus_tags featured_tags %}
+{% extends "pages/page.html" %}
+{% load mezzanine_tags keyword_tags i18n featured_tags %}
 
 {% block meta_title %}{{ article.meta_title }}{% endblock %}
 
@@ -9,139 +9,68 @@
 {% endmetablock %}{% endblock %}
 
 {% block meta_description %}{% metablock %}
-{{ article.description }}
+    {{ article.description }}
 {% endmetablock %}{% endblock %}
 
-{% block title %}
-{% editable article.title %}{{ article.title }}{% endeditable %}
+{% block page_class %}
+    article
 {% endblock %}
 
 {% block breadcrumb_menu %}
-{{ block.super }}
-<li class="active">{{ article.title }}</li>
+    {{ block.super }}
+    <li class="active">{{ article.title }}</li>
 {% endblock %}
 
-{% block main %}
-{% block blog_post_detail_postedby %}
-{% editable article.publish_date %}
-<h6 class="post-meta">
-    {% trans "published on" %} {{ article.publish_date|date:"DATE_FORMAT" }}
-</h6>
-{% endeditable %}
-{% endblock %}
-{% block blog_post_detail_commentlink %}
-<p>
-    {% if article.allow_comments %}
-        {% if settings.COMMENTS_DISQUS_SHORTNAME %}
-            (<a href="{{ article.get_absolute_url }}#disqus_thread"
-                data-disqus-identifier="{% disqus_id_for article %}">{% spaceless %}
-                {% trans "Comments" %}
-            {% endspaceless %}</a>)
-        {% else %}(<a href="#comments">{% spaceless %}
-            {% blocktrans count comments_count=article.comments_count %}{{ comments_count }} comment{% plural %}{{ comments_count }} comments{% endblocktrans %}
-            {% endspaceless %}</a>)
-        {% endif %}
-    {% endif %}
-</p>
-{% endblock %}
-
-{% comment %}
-{% block blog_post_detail_featured_image %}
-{% if settings.BLOG_USE_FEATURED_IMAGE and article.featured_image %}
-<p><img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail article.featured_image 600 0 %}"></p>
-{% endif %}
-{% endblock %}
-{% endcomment %}
+{% block page_title %}
 
-{% if settings.COMMENTS_DISQUS_SHORTNAME %}
-{% include "generic/includes/disqus_counts.html" %}
-{% endif %}
+    {% editable article.title %}
+        <h1>{{ article.title }}</h1>
+    {% endeditable %}
 
-{% block blog_post_detail_content %}
-{% editable article.content %}
-{{ article.content|richtext_filters|safe }}
-{% endeditable %}
 {% endblock %}
 
-{% block blog_post_detail_keywords %}
-{% keywords_for article as tags %}
-{% if tags %}
-{% spaceless %}
-<ul class="list-inline tags">
-    <li>{% trans "Tags" %}:</li>
-    {% for tag in tags %}
-    <li><a href="{% url "blog_post_list_tag" tag.slug %}">{{ tag }}</a>{% if not forloop.last %}, {% endif %}</li>
-    {% endfor %}
-</ul>
-{% endspaceless %}
-{% endif %}
-{% endblock %}
+{% block page_content %}
 
-{% comment %}
-{% block blog_post_detail_rating %}
-<div class="panel panel-default rating">
-    <div class="panel-body">
-    {% rating_for article %}
-    </div>
-</div>
-{% endblock %}
-{% endcomment %}
+    {% editable article.content %}
+        {{ article.content|richtext_filters|safe }}
+    {% endeditable %}
 
-{% block event_detail_sharebuttons %}
-  {% with article as object %}
-    {% include "includes/share_buttons.html" %}
-  {% endwith %}
 {% endblock %}
 
-{% block blog_post_previous_next %}
-<ul class="pager">
-{% with article.get_previous_by_publish_date as previous %}
-{% if previous %}
-<li class="previous">
-    <a href="{{ previous.get_absolute_url }}">&larr; {{ previous }}</a>
-</li>
-{% endif %}
-{% endwith %}
-{% with article.get_next_by_publish_date as next %}
-{% if next %}
-<li class="next">
-    <a href="{{ next.get_absolute_url }}">{{ next }} &rarr;</a>
-</li>
-{% endif %}
-{% endwith %}
-</ul>
-{% endblock %}
+{% block page_sub_content %}
 
-
-{% block blog_post_detail_related_posts %}
-{% if related_posts or article.events.all %}
-<div id="related-posts">
-<h3>{% trans "Also discover" %}</h3>
- <div class="msry__container">
-    <div class="msry__sizer"></div>
-    {% for post in related_posts %}
-        {% include 'blog/includes/post_card.html' %}
-    {% endfor %}
-    {% for event in article.events.all|no_parents %}
-        {% for artist in event.artists.all %}
-            {% include "festival/inc/artist_card.html" %}
-        {% endfor %}
-        {% for video in event.videos.all %}
-            {% include 'festival/inc/video_card.html' %}
-        {% endfor %}
-        {% for post in event.blog_posts.all %}
-          {% if post != article %}
-            {% include 'blog/includes/post_card.html' %}
-          {% endif %}
+    {% comment %}
+    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 %}
-    {% endfor %}
- </div>
-</div>
-{% endif %}
-{% endblock %}
+    {% endif %}
 
-{% block blog_post_detail_comments %}
-{% if article.allow_comments %}{% comments_for article %}{% endif %}
+    <hr />
+
+    <div class="tac">
+        <h2 class="dashed dashed--center">{% trans "Also discover" %}</h2>
+        <div class="row">
+            {% include 'magazine/article/includes/article_card.html' %}
+        </div>
+    </div>
 {% endblock %}
 
+{% block page_sidebar %}
+
+    <div class="page__meta">
+        {% editable article.publish_date %}
+            <h6 class="post-meta">
+                {{ article.publish_date|date:"DATE_FORMAT" }}
+            </h6>
+        {% endeditable %}
+        {% with article as object %}
+            {% include "includes/share_buttons.html" %}
+        {% endwith %}
+    </div>
+
 {% endblock %}

diff --git a/app/templates/magazine/article/includes/article_card.html b/app/templates/magazine/article/includes/article_card.html
new file mode 100644 (file)
index 0000000..2ed7e94
--- /dev/null
+++ b/app/templates/magazine/article/includes/article_card.html
@@ -0,0 +1,33 @@
+{% load i18n pages_tags mezzanine_tags %}
+
+<div class="col-md-3 col-sm-4 col-xs-6">
+    <a class="article-box" href="{{ article.get_absolute_url }}">
+        <div class="article-box__header">
+            <figure class="article-box__image">
+                <img src="//placehold.it/710x475" data-src="//placehold.it/710x475" class="lazyload" />
+            </figure>
+            <div class="article-box__tags">
+                <div class="tag tag--small tag--category">
+                    {% trans 'Actualité' %}
+                </div>
+                <div class="tag tag--small dashed dashed--gray">
+                    transmission
+                </div>
+            </div>
+        </div>
+        <div class="article-box__content tal">
+            <h3 class="article-box__title">{{ article.title }}</h3>
+            <div class="article-box__subtitle">
+                {{ article.publish_date|date:"DATE_FORMAT" }}
+                {% if article.categories %}
+                    {% for category in article.categories.all %}
+                        | <strong>{{ category }}</strong>
+                    {% endfor %}
+                {% endif %}
+            </div>
+            <div class="article-box__desc">
+                {{ article.content|richtext_filters|safe }}
+            </div>
+        </div>
+    </a>
+</div>

diff --git a/app/templates/magazine/article/includes/post_card.html b/app/templates/magazine/article/includes/post_card.html
deleted file mode 100644 (file)
index 3c1d432..0000000
--- a/app/templates/magazine/article/includes/post_card.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{% load i18n pages_tags mezzanine_tags %}
-
-<div class="article__item {% if not on_home %}msry__item {% endif %}">
-    <div class="article__item__inner">
-        <a {% if article.content|removetags:"p"|slice:"4" == 'http' %}href="{{ article.content|removetags:'p' }}" target="_blank"{% else %}href="{% url 'magazine-article-detail' article.slug %}"{% endif %} class="article__item__inner">
-            <h3 class="article__item__name">
-                <span>
-                    {{ article.title }}
-                </span>
-            </h3>
-            <p>
-                {{ article.description }}
-            </p>
-
-            {% if article.featured_image %}
-            <figure class="article__item__img">
-                <img src="{{ MEDIA_URL }}{% thumbnail article.featured_image 500 0 %}" alt="Article: {{ article.title }}">
-            </figure>
-            {% endif %}
-        </a>
-    </div>
-</div>