article_list_public.html 4.12 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 11
    <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
    la presse francophone et internationale.</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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
<div class="col-md-12 white-bg shadow-effect">

  <div class="row">
  <div class="col-md-10 offset-1">

    <ul class="nav nav-compressed my-4">
      <li class="nav-item">
        <a class="nav-link active" href="#">
          <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" href="#">
          <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>

      <li class="nav-item ml-auto">
        <a class="nav-link disabled" href="#">
          <span class="fa-stack fa-md">
            <i class="fa fa-circle-thin fa-stack-2x"></i>
            <i class="fa fa-search fa-stack-1x"></i>
          </span>
          Rechercher
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link disabled" href="#">
          <span class="fa-stack fa-md">
            <i class="fa fa-circle-thin fa-stack-2x"></i>
            <i class="fa fa-tags fa-stack-1x"></i>
          </span>
          Tags
        </a>
      </li>
64 65

    {% if is_paginated %}
66 67
      <li class="nav-item pagination">
        <span class="nav-text page-links">
68
          {% if page_obj.has_previous %}
69
            <a href="?page={{ page_obj.previous_page_number }}" class="mr-2"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
70 71 72 73 74
          {% endif %}
          <span class="page-current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
          </span>
          {% if page_obj.has_next %}
75
            <a href="?page={{ page_obj.next_page_number }}" class="ml-2"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
76 77
          {% endif %}
        </span>
78
      </li>
79 80
    {% endif %}

81 82
    </ul>

83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144

    {% for article in object_list %}
    <section class="article-card d-flex">
      <div class="article-card-img">
        {% 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 %}
          <a href="#" class="">{{t}}</a>
          {% 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>
    </section>
    {% 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 %}