article_list_public.html 5.5 KB
Newer Older
1 2 3 4 5 6 7 8
{% extends "base.html" %}
{% load md2 %}
{% load thumbnail %}


{% block content-header %}
<div class="row justify-content-left">
  <div class="col-md-6 offset-md-1">
9 10
    <p>La revue de presse recense les articles de presse relatifs aux sujets de
    la Quadrature. Elle est compilée chaque jour par ses bénévoles, à partir de
11
    la presse francophone et internationale. Bonne lecture !</p>
12 13 14 15 16 17 18 19
  </div>
  <div class="col-md-4">
  </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
20 21 22 23
<div class="col-md-12 white-bg shadow-effect">

  <div class="row">
  <div class="col-md-10 offset-1">
24
    <header class="my-4">
25

26
    <ul class="nav nav-compressed">
27
      {% if view.filter_lang == 'EN' %}
28
      <li class="nav-item">
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
        <a class="nav-link" href="{% url 'rp:public-article-list' %}">
          <span class="fa-stack fa-md">
            <i class="fa fa-circle-thin fa-stack-2x"></i>
            <i class="fa fa-map-marker fa-stack-1x"></i>
          </span>
          Presse francophone
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="{% url 'rp:public-article-list-international' %}">
          <span class="fa-stack fa-md">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-globe fa-stack-1x color-white"></i>
          </span>
          Presse internationale
        </a>
      </li>
      {% else %}
      <li class="nav-item">
        <a class="nav-link active" href="{% url 'rp:public-article-list' %}">
49
          <span class="fa-stack fa-md">
50 51
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-map-marker fa-stack-1x color-white"></i>
52 53 54 55 56
          </span>
          Presse francophone
        </a>
      </li>
      <li class="nav-item">
57
        <a class="nav-link" href="{% url 'rp:public-article-list-international' %}">
58 59 60 61 62 63 64
          <span class="fa-stack fa-md">
            <i class="fa fa-circle-thin fa-stack-2x"></i>
            <i class="fa fa-globe fa-stack-1x"></i>
          </span>
          Presse internationale
        </a>
      </li>
65 66
      {% endif %}

67
      <li class="nav-item ml-auto">
Thibaut Broggi's avatar
Thibaut Broggi committed
68 69
	<form method="get" action="{% url 'rp:public-article-list' %}">
	  <div class="input-group">
70
	    <input type="search" placeholder="Rechercher" name="q" class="fa fa-search" value="{{ search }}" />
Thibaut Broggi's avatar
Thibaut Broggi committed
71 72 73
	     <button type="submit" class="btn btn-default input-group-addon"><i class="fa fa-search"></i></button>
	  </div>
	</form>
74 75 76
      </li>

      <li class="nav-item">
cynddl's avatar
cynddl committed
77
        <a class="nav-link" data-toggle="collapse" href="#collapseTags" aria-expanded="false" aria-controls="collapseTags">
78
          <i class="fa fa-tags"></i>
79 80 81
          Tags
        </a>
      </li>
82 83

    {% if is_paginated %}
84 85
      <li class="nav-item pagination">
        <span class="nav-text page-links">
86
          {% if page_obj.has_previous %}
87
            <a href="?page={{ page_obj.previous_page_number }}" class="mr-2"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
88 89 90 91 92
          {% endif %}
          <span class="page-current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
          </span>
          {% if page_obj.has_next %}
93
            <a href="?page={{ page_obj.next_page_number }}" class="ml-2"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
94 95
          {% endif %}
        </span>
96
      </li>
97
    {% endif %}
98 99
    </ul>

cynddl's avatar
cynddl committed
100 101
    <div class="collapse" id="collapseTags">
      {% for t in tags %}
102 103
      <a class="badge badge-tag" href="{% url 'rp:public-article-list-tag' filter_tag=t.name %}">
        <span>{{t}}</span>
cynddl's avatar
cynddl committed
104 105 106
      </a>
      {% endfor %}
    </div>
107

108 109
    </header>

110
    {% for article in object_list %}
cynddl's avatar
cynddl committed
111
    <article class="article-card d-flex">
112
      <div class="article-card-img">
cynddl's avatar
cynddl committed
113 114 115 116
        <p class="article-card-meta">
          <span class="article-date">{{ article.created_at|date:"d/m" }}</span> via
          <span class="article-source">{{ article.website }}</span>
        </p>
117 118 119 120 121 122 123 124
        {% thumbnail article.screenshot "800x400" crop="smart" as im %}
        <img src="{{ im.url }}" width="400" height="200">
        {% endthumbnail %}
        <a href="{{article.url}}"><span class="fa fa-external-link fa-2x"></span></a>
      </div>
      <div class="article-card-content">
        <p class="tags-list">
          {% for t in article.tags.all %}
cynddl's avatar
cynddl committed
125
          <a href="{% url 'rp:public-article-list-tag' filter_tag=t.name %}" class="">{{t}}</a>
126 127 128 129 130 131 132 133 134 135
          {% endfor %}
        </p>
        <h4><a href="{{article.url}}">{{article.title}}</a></h4>
        {% comment %} <p class="subtitle">via Le Monde le {{article.created_at |date:'d/m'}}</p> {% endcomment %}

        <div class="read-more-box">
          {{ article.extracts |markdown }}
          <p class="read-more"><a href="#" class="btn btn-secondary">Read More</a></p>
        </div>
      </div>
cynddl's avatar
cynddl committed
136
    </article>
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174
    {% endfor %}
  </div>

  </div>
  </div>
</div>
</div>

<script>
  $(".read-more-box .btn").click(function() {
    var totalHeight = 0;

    var el = $(this);
    var p  = el.parent();
    var up = p.parent();
    var ps = up.find("p:not('.read-more')");

    // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
    ps.each(function() {
      totalHeight += $(this).outerHeight(true);
    });

    up.css({
      // Set height to prevent instant jumpdown when max height is removed
      "height": up.height(),
      "max-height": 9999
    }).animate({
      "height": totalHeight
    });

    // fade out read-more
    p.fadeOut();

    // prevent jump-down
    return false;
  });
</script>
{% endblock %}