templates/post/all_posts.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4.   Статьи и публикации – Николай Макаров
  5. {% endblock %}
  7. {% block body %}
  8.   <div class="flex flex-col md:flex-row">
  9.     <div class="w-full md:w-1/4">
  10.       <!-- Categories -->
  11.       <h2 class="text-3xl font-bold text-gray-800 m-4 text-center">Категории статей</h2>
  12.       <div class="flex justify-center">
  13.         <ul class="space-y-2 mx-auto">
  14.           <li>
  15.             <a href="{{ path('app_posts') }}" class="category-link text-lg font-bold text-blue-500" data-category="all" aria-label="Все категории статей">Все категории</a>
  16.           </li>
  17.           {% for genre, count in genreCounts %}
  18.             {% if genre != 'non-genre' %}
  19.               <li>
  20.                 <a href="{{ path('post_by_genre', {'genre': genre}) }}" class="category-link text-lg font-bold text-blue-500" data-category="{{ genre }}" aria-label="Категория {{ genre }} – {{ count }} статей">
  21.                   {{ genre }} ({{ count }})
  22.                 </a>
  23.               </li>
  24.             {% endif %}
  25.           {% endfor %}
  26.         </ul>
  27.       </div>
  28.     </div>
  30.     <div class="w-full md:w-3/4">
  31.       <!-- Posts -->
  32.       <h2 class="text-3xl font-bold text-gray-800 m-4 text-center">Все статьи и публикации</h2>
  33.       <div class="grid grid-cols-1 justify-items-center md:grid-cols-2 lg:grid-cols-3 gap-4 mx-auto">
  34.         {% for post in pagination %}
  35.           {% set normalizedGenre = post.genre|trim|lower %}
  36.           {% if normalizedGenre != 'non-genre' %}
  37.             <div class="transition-all duration-150 flex flex-col w-full px-4 py-6 category-card min-w-[200px] max-w-[400px] h-full" data-category="{{ post.genre }}">
  38.               <div class="flex flex-col items-stretch min-h-full pb-4 mb-6 transition-all duration-150 bg-white rounded-lg shadow-lg hover:shadow-2xl dark:bg-neutral-700">
  39.                 <div class="md:flex-shrink-0 h-64">
  40.                   {% if post.photo %}
  41.                     <img src="{{ asset('photos/' ~ post.photo) }}" alt="Изображение к статье {{ post.title }}" class="object-cover w-full h-full rounded-lg rounded-b-none">
  42.                   {% else %}
  43.                     <img src="/photos/abstract.jpg" alt="Заглушка для статьи" class="object-cover w-full h-full rounded-lg rounded-b-none">
  44.                   {% endif %}
  45.                 </div>
  46.                 <div class="flex items-center justify-between px-4 py-2 overflow-hidden">
  47.                   <span class="text-xs font-medium text-blue-600 uppercase">{{ post.genre }}</span>
  48.                 </div>
  49.                 <hr class="border-gray-300">
  50.                 <div class="flex flex-wrap items-center flex-1 px-4 py-1 text-center mx-auto">
  51.                   <a href="{{ path('post_by_id', {'id': post.id}) }}" class="hover:underline" aria-label="Читать статью: {{ post.title }}">
  52.                     <h3 class="text-2xl font-bold tracking-normal text-gray-800 dark:text-gray-400">{{ post.title }}</h3>
  53.                   </a>
  54.                 </div>
  55.                 <hr class="border-gray-300">
  56.                 <p class="flex flex-row flex-wrap w-full px-4 py-2 overflow-hidden text-sm text-justify text-gray-700 h-20 md:h-24 lg:h-28 dark:text-gray-400">
  57.                   {% if post.epigraph %}
  58.                     {{ post.epigraph }}
  59.                   {% else %}
  60.                     Откройте и прочитайте полностью этот пост
  61.                   {% endif %}
  62.                 </p>
  63.               </div>
  64.             </div>
  65.           {% endif %}
  66.         {% endfor %}
  67.       </div>
  69.       {% if pagination.totalItemCount > pagination.itemNumberPerPage %}
  70.         <nav aria-label="Навигация по страницам" class="mt-8 mb-8 flex justify-center">
  71.           <ul class="inline-flex -space-x-px">
  72.             {% for page in 1..pagination.pageCount %}
  73.               <li>
  74.                 <a href="{{ path('app_posts', {'page': page}) }}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 {% if pagination.currentPageNumber == page %}text-sky-800 bg-sky-300 border-sky-600 border-2 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white {% else %}hover:bg-gray-100 hover:text-gray-700{% endif %}" aria-label="Страница {{ page }}">
  75.                   {{ page }}
  76.                 </a>
  77.               </li>
  78.             {% endfor %}
  79.           </ul>
  80.         </nav>
  81.       {% endif %}
  82.     </div>
  83.   </div>
  84. {% endblock %}