templates/base/tutos_list.html.twig line 1

Open in your IDE?
  1. {% extends 'layout.html.twig' %}
  3. {% block layout %}
  4. <div class="row">
  5.     <div class="d-lg-block col-lg-3">
  6.         <div class="list-group">
  7.                 <a href="{{ path('la_base', {category: null}) }}" class="list-group-item list-group-item-action {{ (null == categoryRequest) ? "active" : "" }}">
  8.                     Toutes les catégories
  9.                 </a>
  10.             {% for category in categories %}
  11.                 <a href="{{ path('la_base', {category: category.id}) }}" class="list-group-item list-group-item-action color color-{{category.id}} {{ (categoryRequest != null and category.id == categoryRequest.id) ? "active" : "" }}">
  12.                     {{ category.name }}
  13.                 </a>
  14.             {% endfor %}
  15.         </div>
  16.     </div>
  18.     <div class="col-lg-9 col-12">
  19.         <h2><strong>Les derniers articles dans La Base</strong></h2>
  20.         <div class="row" style="padding-top:20px">
  21.             {% for data in tutos %}
  22.                 <div class="col-sm-12 col-lg-6 liste">
  23.                     <div class="card" style="border: 1px solid black;height: 100%;min-height:215px">
  24.                         <h5 class="card-header color color-{{ data.category.id }}">
  25.                             <strong>
  26.                                 {{ data.title }}
  27.                             </strong>
  28.                         </h5>
  29.                         <div class="card-body">
  30.                             <p class="card-text">
  31.                                 <i>
  32.                                     {% if data.chapo != null %}
  33.                                         {{ data.chapo|length > 200 ? data.chapo|slice(0,200)|raw : data.chapo|raw }}
  34.                                         {{ data.chapo|length > 200 ? '...' : ''}}
  35.                                     {% else %}
  36.                                         {{ data.content|length > 200 ? data.content|slice(0,200)|raw : data.content|raw }}
  37.                                         {{ data.content|length > 200 ? '...' : ''}}
  38.                                     {% endif %}
  39.                                 </i>
  40.                             </p>
  41.                         </div>
  42.                         <div class="card-footer" style="display:flex; align-items:center;">
  43.                             <span> {{data.createdAt|date('d/m/Y')}} </span>
  44.                             <a style="margin-left:auto; background-color:{{data.category.color}}; border-color:{{data.category.color}};" href="{{ path('tuto_read', {tutoId: data.id}) }}" class="btn btn-primary">
  45.                                 Lire l'article
  46.                             </a>
  47.                         </div>
  48.                     </div>
  49.                 </div>
  50.             {% endfor %}
  51.         </div>
  52.         <div class="navigation">
  53.             {{ knp_pagination_render(tutos) }}
  54.         </div>
  55.     </div>
  56. </div>
  57. {% endblock %}
  59. {% block stylesheets %}
  60.     {{ parent() }}
  61.     <style>
  62.         .color::before {
  63.             content: '';
  64.             display: inline-block;
  65.             width: .5em;
  66.             height: .5em;
  67.             -moz-border-radius: .25em;
  68.             -webkit-border-radius: .25em;
  69.             border-radius: .25em;
  70.         }
  72.         {% for category in categories %}
  73.             .color.color-{{ category.id }}::before {
  74.                 background-color:{{ category.color }};
  75.             }
  76.         {% endfor %}
  77.     </style>
  78. {% endblock %}