app/template/default/News/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set body_class = 'news_list_page' %}
  5. {% block stylesheet %}
  6.   <link rel="stylesheet" href="{{ asset('assets/css/news-list.css') }}">
  7. {% endblock %}
  9. {% block main %}
  10.   <!-- breadcrumb section -->
  11.   <div class="breadcrumb-section">
  12.     <div class="container-1360 border-box px-40">
  13.       <nav class="breadcrumb">
  14.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  15.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  16.         <a href="{{ url('news_list') }}" class="breadcrumb__item text-black">お知らせ</a>
  17.       </nav>
  18.     </div>
  19.   </div>
  21.   <!-- news-list section -->
  22.   <div class="container-1200">
  23.     <div class="news-list-wrapper">
  24.       <!-- News-list Title Section -->
  25.       <div class="top-header-title-section">
  26.         <div class="top-header-icon-text">
  27.           <div class="top-header-icon-text">
  28.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  29.               <path d="M7.08203 12.5H7.08301V17.5H5.41602V13.335H2.91504C2.45495 13.3348 2.08203 12.9611 2.08203 12.501V7.50098C2.08221 7.041 2.45506 6.66814 2.91504 6.66797H7.08203V12.5ZM17.083 8.33203H17.916V11.665H17.083V17.5H15.416V17.499L8.75293 13.335H8.75V6.66797H17.083V8.33203ZM17.083 6.66699H8.75L15.416 2.5H17.083V6.66699Z" fill="#00A854"/>
  30.             </svg>
  31.             <span class="top-header-text">お知らせ</span>
  32.           </div>
  33.         </div>
  34.         <h1 class="top-header-title">NEWS</h1>
  35.       </div>
  36.     </div>
  37.   </div>
  39.   <div class="container-1200 container-1200-desktop">
  40.     <div class="news-list-content-section-wrapper">
  41.       <!-- news-list content section -->
  42.       <div>
  43.         <div class="news-list-content-section">
  44.           <!-- News List -->
  45.           <div id="news-list-id" class="news-list">
  46.             {% if pagination|length > 0 %}
  47.               {% for News in pagination %}
  48.                 <a href="{{ url('news_detail', {id: News.id}) }}" class="news-item">
  49.                   <div class="news-date container-desktop">{{ News.publishDate|date('Y.m.d') }}</div>
  50.                   <div class="news-title container-desktop text-black">
  51.                     <span class="text-black">{{ News.title }}</span>
  52.                   </div>
  53.                   <div class="news-wrapper-mobile container-mobile">
  54.                     <div class="news-date news-date-mobile">{{ News.publishDate|date('Y.m.d') }}</div>
  55.                     <div class="news-title news-title-mobile text-black">
  56.                       <span class="text-black">{{ News.title }}</span>
  57.                     </div>
  58.                   </div>
  59.                   <div class="news-arrow">
  60.                     <img src="{{ asset('assets/img/default/icons/icon-arrow-gray.svg') }}" alt="Arrow">
  61.                   </div>
  62.                 </a>
  63.               {% endfor %}
  64.             {% else %}
  65.               <p class="no-news">お知らせはありません。</p>
  66.             {% endif %}
  67.           </div>
  68.         </div>
  70.         <!-- Pagination -->
  71.         {% if pagination.paginationData.pageCount > 1 %}
  72.           {% set pages = pagination.paginationData %}
  73.           <div class="pagination-news-list mt-50">
  74.             <div class="pagination-product-list" style="margin: 0 auto;">
  75.               <!-- Previous Button -->
  76.               <div class="pagination-btn-group">
  77.                 {# First page button (double arrow) #}
  78.                 {% if pages.current > 1 %}
  79.                   <a class="pagination-btn pagination-btn--prev" href="{{ path('news_list') }}" aria-label="First">
  80.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  81.                       <path d="M5.74659 8.0006L11.4034 13.6575L13.2891 11.7718L9.51783 8.0006L13.2891 4.22937L11.4034 2.34375L5.74659 8.0006Z" fill="#00A854"/>
  82.                       <rect width="1.91077" height="11.043" transform="matrix(-1 0 0 1 4.89648 2.47656)" fill="#00A854"/>
  83.                     </svg>
  84.                   </a>
  85.                 {% else %}
  86.                   <span class="pagination-btn pagination-btn--prev is-disabled" aria-hidden="true">
  87.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  88.                       <path d="M5.74659 8.0006L11.4034 13.6575L13.2891 11.7718L9.51783 8.0006L13.2891 4.22937L11.4034 2.34375L5.74659 8.0006Z" fill="#00A854"/>
  89.                       <rect width="1.91077" height="11.043" transform="matrix(-1 0 0 1 4.89648 2.47656)" fill="#00A854"/>
  90.                     </svg>
  91.                   </span>
  92.                 {% endif %}
  93.                 {# Previous page button (single arrow) #}
  94.                 {% if pages.previous is defined %}
  95.                   {% set prevUrl = pages.previous == 1 ? path('news_list') : path('news_list_page', {'pageno': pages.previous}) %}
  96.                   <a class="pagination-btn pagination-btn--prev" href="{{ prevUrl }}" aria-label="Previous">
  97.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  98.                       <path d="M3.44581 8.0006L9.10266 13.6575L10.9883 11.7718L7.21705 8.0006L10.9883 4.22937L9.10266 2.34375L3.44581 8.0006Z" fill="#00A854"/>
  99.                     </svg>
  100.                   </a>
  101.                 {% else %}
  102.                   <span class="pagination-btn pagination-btn--prev is-disabled" aria-hidden="true">
  103.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  104.                       <path d="M3.44581 8.0006L9.10266 13.6575L10.9883 11.7718L7.21705 8.0006L10.9883 4.22937L9.10266 2.34375L3.44581 8.0006Z" fill="#00A854"/>
  105.                     </svg>
  106.                   </span>
  107.                 {% endif %}
  108.               </div>
  110.               <!-- Page Numbers -->
  111.               <div class="pagination-numbers container-desktop-flex">
  112.                 {% for page in pages.pagesInRange %}
  113.                   {% if page == pages.current %}
  114.                     <span class="pagination-number pagination-number--active">{{ page }}</span>
  115.                   {% else %}
  116.                     {% set pageUrl = page == 1 ? path('news_list') : path('news_list_page', {'pageno': page}) %}
  117.                     <a class="pagination-number" href="{{ pageUrl }}">{{ page }}</a>
  118.                   {% endif %}
  119.                 {% endfor %}
  120.               </div>
  121.               <div class="pagination-page-number container-mobile">
  122.                 {{ pages.current }}／{{ pages.pageCount }}
  123.               </div>
  125.               <!-- Next Button -->
  126.               <div class="pagination-btn-group">
  127.                 {# Next page button (single arrow) #}
  128.                 {% if pages.next is defined %}
  129.                   <a class="pagination-btn pagination-btn--next" href="{{ path('news_list_page', {'pageno': pages.next}) }}" aria-label="Next">
  130.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  131.                       <path d="M12.5542 8.0006L6.89734 13.6575L5.01172 11.7718L8.78295 8.0006L5.01172 4.22937L6.89734 2.34375L12.5542 8.0006Z" fill="#00A854"/>
  132.                     </svg>
  133.                   </a>
  134.                 {% else %}
  135.                   <span class="pagination-btn pagination-btn--next is-disabled" aria-hidden="true">
  136.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  137.                       <path d="M12.5542 8.0006L6.89734 13.6575L5.01172 11.7718L8.78295 8.0006L5.01172 4.22937L6.89734 2.34375L12.5542 8.0006Z" fill="#00A854"/>
  138.                     </svg>
  139.                   </span>
  140.                 {% endif %}
  141.                 {# Last page button (double arrow) #}
  142.                 {% if pages.current < pages.pageCount %}
  143.                   <a class="pagination-btn pagination-btn--next" href="{{ path('news_list_page', {'pageno': pages.pageCount}) }}" aria-label="Last">
  144.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  145.                       <path d="M10.2534 8.0006L4.59656 13.6575L2.71094 11.7718L6.48217 8.0006L2.71094 4.22937L4.59656 2.34375L10.2534 8.0006Z" fill="#00A854"/>
  146.                       <rect x="11.1035" y="2.47656" width="1.91077" height="11.043" fill="#00A854"/>
  147.                     </svg>
  148.                   </a>
  149.                 {% else %}
  150.                   <span class="pagination-btn pagination-btn--next is-disabled" aria-hidden="true">
  151.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  152.                       <path d="M10.2534 8.0006L4.59656 13.6575L2.71094 11.7718L6.48217 8.0006L2.71094 4.22937L4.59656 2.34375L10.2534 8.0006Z" fill="#00A854"/>
  153.                       <rect x="11.1035" y="2.47656" width="1.91077" height="11.043" fill="#00A854"/>
  154.                     </svg>
  155.                   </span>
  156.                 {% endif %}
  157.               </div>
  158.             </div>
  159.           </div>
  160.         {% endif %}
  162.       </div>
  163.     </div>
  164.   </div>
  165. {% endblock %}