app/template/default/pager.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {# style #}
  13. <style>
  14.     .ec-pager {
  15.         padding-top: 80px;
  16.     }
  17.     .ec-pager__item {
  18.         background: rgba(0, 0, 0, 0.05) !important;
  19.         border-radius: 8px;
  20.     }
  22.     .ec-pager__item--active {
  23.         border-radius: 8px;
  24.         background: var(--color-primary) !important;
  25.         color: #FFFFFF;
  26.     }
  28.     .ec-pager__item--disabled {
  29.         opacity: 0.5;
  30.         pointer-events: none;
  31.     }
  33.     .ec-pager__item--prev {
  34.         margin-right: 92px;
  35.     }
  37.     .ec-pager__item--next {
  38.         margin-left: 92px;
  39.     }
  41.     @media (max-width: 768px) {
  42.         .ec-pager__item--prev {
  43.             margin-right: 0;
  44.         }
  46.         .ec-pager__item--next {
  47.             margin-left: 0;
  48.         }
  49.     }
  50.     .ec-pager .ec-pager__item a, .ec-pager .ec-pager__item--active a {
  51.         padding: 7px 13px;
  52.     }
  53. </style>
  54. {% if pages.pageCount > 1 %}
  55.     <ul class="ec-pager">
  56.         {# 最初へ #}
  57.         {% if pages.firstPageInRange != 1 %}
  58.             <li class="ec-pager__item">
  59.                 <a href="{{ path(
  60.                 app.request.attributes.get('_route'),
  61.                 app.request.query.all|merge({'pageno': pages.first})) }}">
  62.                     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  63.                     <path d="M3 0.514648L3 11.4854" stroke="#353535" stroke-width="1.35"/>
  64.                     <path d="M9.90367 0.908831L6.84897 3.96353C5.72426 5.08824 5.72426 6.91176 6.84897 8.03647L9.90367 11.0912" stroke="#353535" stroke-width="1.35"/>
  65.                     </svg>
  66.                 </a>
  67.             </li>
  68.         {% endif %}
  70.         {# 前へ #}
  71.         {% if pages.previous is defined %}
  72.             <li class="ec-pager__item ec-pager__item--prev">
  73.                 <a href="{{ path(
  74.                 app.request.attributes.get('_route'),
  75.                 app.request.query.all|merge({'pageno': pages.previous})) }}">
  76.                     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  77.                         <path d="M7.88804 0.993792L4.83334 4.04849C3.70863 5.1732 3.70863 6.99672 4.83334 8.12143L7.88804 11.1761" stroke="#353535" stroke-width="1.35"/>
  78.                     </svg>
  79.                 </a></li>
  80.             {% else %}
  81.                 <li class="ec-pager__item ec-pager__item--prev ec-pager__item--disabled">
  82.                     <a href="#">
  83.                         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  84.                             <path d="M7.88804 0.993792L4.83334 4.04849C3.70863 5.1732 3.70863 6.99672 4.83334 8.12143L7.88804 11.1761" stroke="#353535" stroke-width="1.35"/>
  85.                         </svg>
  86.                     </a>
  87.                 </li>
  88.         {% endif %}
  90.         {# 1ページリンクが表示されない場合、「...」を表示 #}
  91.         {% if pages.firstPageInRange != 1 %}
  92.             <li class="ec-pager__item">...</li>
  93.         {% endif %}
  95.         {% for page in pages.pagesInRange %}
  96.             {% if page == pages.current %}
  97.                 <li class="ec-pager__item--active"><a href="{{ path(
  98.                     app.request.attributes.get('_route'),
  99.                     app.request.query.all|merge({'pageno': page})) }}"> {{ page }} </a></li>
  100.             {% else %}
  101.                 <li class="ec-pager__item"><a href="{{ path(
  102.                     app.request.attributes.get('_route'),
  103.                     app.request.query.all|merge({'pageno': page})) }}"> {{ page }} </a></li>
  104.             {% endif %}
  105.         {% endfor %}
  107.         {# 最終ページリンクが表示されない場合、「...」を表示 #}
  108.         {% if pages.last != pages.lastPageInRange %}
  109.             <li class="ec-pager__item">...</li>
  110.         {% endif %}
  112.         {# 次へ #}
  113.         {% if pages.next is defined %}
  114.             <li class="ec-pager__item ec-pager__item--next">
  115.                 <a href="{{ path(
  116.                 app.request.attributes.get('_route'),
  117.                 app.request.query.all|merge({'pageno': pages.next})) }}">
  118.                     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  119.                         <path d="M4.11196 0.993792L7.16666 4.04849C8.29137 5.1732 8.29137 6.99672 7.16666 8.12143L4.11196 11.1761" stroke="#353535" stroke-width="1.35"/>
  120.                     </svg>
  121.                 </a></li>
  122.             {% else %}
  123.                 <li class="ec-pager__item ec-pager__item--next ec-pager__item--disabled">
  124.                     <a href="#">
  125.                         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  126.                             <path d="M4.11196 0.993792L7.16666 4.04849C8.29137 5.1732 8.29137 6.99672 7.16666 8.12143L4.11196 11.1761" stroke="#353535" stroke-width="1.35"/>
  127.                         </svg>
  128.                     </a>
  129.                 </li>
  130.         {% endif %}
  132.         {# 最後へ #}
  133.         {% if pages.last != pages.lastPageInRange %}
  134.             <li class="ec-pager__item">
  135.                 <a href="{{ path(
  136.                 app.request.attributes.get('_route'),
  137.                 app.request.query.all|merge({'pageno': pages.last})) }}">
  138.                     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  139.                     <path d="M9 0.514648L9 11.4854" stroke="#353535" stroke-width="1.35"/>
  140.                     <path d="M2.09633 0.908831L5.15103 3.96353C6.27574 5.08824 6.27574 6.91176 5.15103 8.03647L2.09633 11.0912" stroke="#353535" stroke-width="1.35"/>
  141.                     </svg>
  142.                 </a></li>
  143.         {% endif %}
  144.     </ul>
  145. {% endif %}