templates/application/whileresume/website/pagination/pagination.html.twig line 1

Open in your IDE?
  1. {# =========================================================
  2.    PAGINATION WhileResume — design aligné sur le footer
  3.    Compatible KnpPaginator (variables: pageCount, previous, next,
  4.    pagesInRange, current, route, query, pageParameterName)
  5.    ========================================================= #}
  7. <style>
  8.     /* ---------- Pagination WhileResume ---------- */
  9.     .whr-pagination {
  10.         margin: 28px 0 8px;
  11.         padding: 14px 18px;
  12.         display: flex;
  13.         justify-content: center;
  14.     }
  15.     .whr-pagination ul {
  16.         display: inline-flex;
  17.         align-items: center;
  18.         gap: 6px;
  19.         list-style: none;
  20.         padding: 6px;
  21.         margin: 0;
  22.         background: #F9FAFD;
  23.         border-radius: 14px;
  24.         box-shadow: 0 1px 2px rgba(0,0,0,.04);
  25.     }
  26.     .theme-dark .whr-pagination ul {
  27.         background: #2a2a3c;
  28.         box-shadow: none;
  29.     }
  31.     .whr-pagination li { line-height: 1; }
  33.     .whr-pagination a,
  34.     .whr-pagination span.whr-page {
  35.         display: inline-flex;
  36.         align-items: center;
  37.         justify-content: center;
  38.         min-width: 36px;
  39.         height: 36px;
  40.         padding: 0 12px;
  41.         border-radius: 10px;
  42.         font-size: 13px;
  43.         font-weight: 600;
  44.         color: #2c2c46;
  45.         text-decoration: none !important;
  46.         transition: background .2s ease, color .2s ease, transform .15s ease;
  47.     }
  48.     .theme-dark .whr-pagination a,
  49.     .theme-dark .whr-pagination span.whr-page {
  50.         color: #e9e9ef;
  51.     }
  53.     .whr-pagination a:hover {
  54.         background: #fff;
  55.         color: var(--theme-color, #6C3AED);
  56.         transform: translateY(-1px);
  57.     }
  58.     .theme-dark .whr-pagination a:hover {
  59.         background: #34344a;
  60.         color: #fff;
  61.     }
  63.     /* Page active */
  64.     .whr-pagination .whr-active a,
  65.     .whr-pagination a.whr-active {
  66.         background: var(--theme-color, #6C3AED);
  67.         color: #fff !important;
  68.         cursor: default;
  69.         pointer-events: none;
  70.         box-shadow: 0 2px 8px rgba(108, 58, 237, .25);
  71.     }
  73.     /* État disabled (prev/next non disponibles) */
  74.     .whr-pagination .whr-disabled span.whr-page {
  75.         opacity: .35;
  76.         cursor: not-allowed;
  77.     }
  79.     /* Flèches prev / next */
  80.     .whr-pagination .whr-nav svg {
  81.         width: 16px;
  82.         height: 16px;
  83.         stroke: currentColor;
  84.         stroke-width: 2.5;
  85.         fill: none;
  86.         stroke-linecap: round;
  87.         stroke-linejoin: round;
  88.     }
  90.     /* Ellipsis (…) entre numéros si jamais ajouté */
  91.     .whr-pagination .whr-ellipsis {
  92.         min-width: auto;
  93.         padding: 0 6px;
  94.         color: inherit;
  95.         opacity: .5;
  96.         font-weight: 400;
  97.         cursor: default;
  98.     }
  100.     @media (max-width: 575.98px) {
  101.         .whr-pagination { margin: 20px 0 4px; padding: 10px 8px; }
  102.         .whr-pagination a,
  103.         .whr-pagination span.whr-page {
  104.             min-width: 32px;
  105.             height: 32px;
  106.             padding: 0 9px;
  107.             font-size: 12px;
  108.         }
  109.     }
  110. </style>
  112. {% if pageCount > 1 %}
  113.     <nav class="whr-pagination" role="navigation" aria-label="Pagination">
  114.         <ul>
  115.             {# === Prev === #}
  116.             {% if previous is defined %}
  117.                 <li class="whr-nav">
  118.                     <a href="{{ path(route, query|merge({(pageParameterName): previous})) }}"
  119.                        aria-label="{{ 'pagination.previous'|trans({}, 'whr-public')|default('Précédent') }}"
  120.                        rel="prev">
  121.                         <svg viewBox="0 0 24 24" aria-hidden="true">
  122.                             <polyline points="15 18 9 12 15 6"></polyline>
  123.                         </svg>
  124.                     </a>
  125.                 </li>
  126.             {% else %}
  127.                 <li class="whr-nav whr-disabled" aria-hidden="true">
  128.                     <span class="whr-page">
  129.                         <svg viewBox="0 0 24 24" aria-hidden="true">
  130.                             <polyline points="15 18 9 12 15 6"></polyline>
  131.                         </svg>
  132.                     </span>
  133.                 </li>
  134.             {% endif %}
  136.             {# === Pages === #}
  137.             {% for page in pagesInRange %}
  138.                 {% if page != current %}
  139.                     <li>
  140.                         <a href="{{ path(route, query|merge({(pageParameterName): page})) }}"
  141.                            aria-label="{{ 'pagination.page'|trans({}, 'whr-public')|default('Page') }} {{ page }}">
  142.                             {{ page }}
  143.                         </a>
  144.                     </li>
  145.                 {% else %}
  146.                     <li class="whr-active">
  147.                         <a href="#" class="whr-active" aria-current="page">{{ page }}</a>
  148.                     </li>
  149.                 {% endif %}
  150.             {% endfor %}
  152.             {# === Next === #}
  153.             {% if next is defined %}
  154.                 <li class="whr-nav">
  155.                     <a href="{{ path(route, query|merge({(pageParameterName): next})) }}"
  156.                        aria-label="{{ 'pagination.next'|trans({}, 'whr-public')|default('Suivant') }}"
  157.                        rel="next">
  158.                         <svg viewBox="0 0 24 24" aria-hidden="true">
  159.                             <polyline points="9 6 15 12 9 18"></polyline>
  160.                         </svg>
  161.                     </a>
  162.                 </li>
  163.             {% else %}
  164.                 <li class="whr-nav whr-disabled" aria-hidden="true">
  165.                     <span class="whr-page">
  166.                         <svg viewBox="0 0 24 24" aria-hidden="true">
  167.                             <polyline points="9 6 15 12 9 18"></polyline>
  168.                         </svg>
  169.                     </span>
  170.                 </li>
  171.             {% endif %}
  172.         </ul>
  173.     </nav>
  174. {% endif %}