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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set title = 'お知らせ' %}
  4. {% set body_class = 'news_list_page' %}
  6. {% block stylesheet %}
  7.   <link rel="stylesheet" href="{{ asset('assets/css/news-list.css') }}">
  8. {% endblock %}
  10. {% block main %}
  11.   <!-- breadcrumb section -->
  12.   <div class="breadcrumb-section">
  13.     <div class="container-1360 border-box px-40">
  14.       <nav class="breadcrumb">
  15.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  16.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  17.         <a href="{{ url('news_list') }}" class="breadcrumb__item text-black">お知らせ</a>
  18.       </nav>
  19.     </div>
  20.   </div>
  22.   <!-- news-list section -->
  23.   <div class="container-1200">
  24.     <div class="news-list-wrapper">
  25.       <!-- News-list Title Section -->
  26.       <div class="top-header-title-section">
  27.         <div class="top-header-icon-text">
  28.           <div class="top-header-icon-text">
  29.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  30.               <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"/>
  31.             </svg>
  32.             <span class="top-header-text">お知らせ</span>
  33.           </div>
  34.         </div>
  35.         <h1 class="top-header-title">NEWS</h1>
  36.       </div>
  37.     </div>
  38.   </div>
  40.   <div class="container-1200 container-1200-desktop">
  41.     <div class="news-list-content-section-wrapper">
  42.       <!-- news-list content section -->
  43.       <div>
  44.         <div class="news-list-content-section">
  45.           <!-- News List -->
  46.           <div id="news-list-id" class="news-list">
  47.             {% if pagination|length > 0 %}
  48.               {% for News in pagination %}
  49.                 <a href="{{ url('news_detail', {id: News.id}) }}" class="news-item">
  50.                   <div class="news-date container-desktop">{{ News.publishDate|date('Y.m.d') }}</div>
  51.                   <div class="news-title container-desktop text-black">
  52.                     <span class="text-black">{{ News.title }}</span>
  53.                   </div>
  54.                   <div class="news-wrapper-mobile container-mobile">
  55.                     <div class="news-date news-date-mobile">{{ News.publishDate|date('Y.m.d') }}</div>
  56.                     <div class="news-title news-title-mobile text-black">
  57.                       <span class="text-black">{{ News.title }}</span>
  58.                     </div>
  59.                   </div>
  60.                   <div class="news-arrow">
  61.                     <img src="{{ asset('assets/img/default/icons/icon-arrow-gray.svg') }}" alt="Arrow">
  62.                   </div>
  63.                 </a>
  64.               {% endfor %}
  65.             {% else %}
  66.               <p class="no-news">お知らせはありません。</p>
  67.             {% endif %}
  68.           </div>
  69.         </div>
  71.         <!-- Pagination -->
  72.         {% if pagination.paginationData.pageCount > 1 %}
  73.           {% set pages = pagination.paginationData %}
  74.           <div class="pagination-news-list mt-50">
  75.             <div class="pagination-product-list" style="margin: 0 auto;">
  76.               <!-- Previous Button -->
  77.               <div class="pagination-btn-group">
  78.                 {# First page button (double arrow) #}
  79.                 {% if pages.current > 1 %}
  80.                   <a class="pagination-btn pagination-btn--prev" href="{{ path('news_list') }}" aria-label="First">
  81.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  82.                       <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"/>
  83.                       <rect width="1.91077" height="11.043" transform="matrix(-1 0 0 1 4.89648 2.47656)" fill="#00A854"/>
  84.                     </svg>
  85.                   </a>
  86.                 {% else %}
  87.                   <span class="pagination-btn pagination-btn--prev is-disabled" aria-hidden="true">
  88.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  89.                       <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"/>
  90.                       <rect width="1.91077" height="11.043" transform="matrix(-1 0 0 1 4.89648 2.47656)" fill="#00A854"/>
  91.                     </svg>
  92.                   </span>
  93.                 {% endif %}
  94.                 {# Previous page button (single arrow) #}
  95.                 {% if pages.previous is defined %}
  96.                   {% set prevUrl = pages.previous == 1 ? path('news_list') : path('news_list_page', {'pageno': pages.previous}) %}
  97.                   <a class="pagination-btn pagination-btn--prev" href="{{ prevUrl }}" aria-label="Previous">
  98.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  99.                       <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"/>
  100.                     </svg>
  101.                   </a>
  102.                 {% else %}
  103.                   <span class="pagination-btn pagination-btn--prev is-disabled" aria-hidden="true">
  104.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  105.                       <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"/>
  106.                     </svg>
  107.                   </span>
  108.                 {% endif %}
  109.               </div>
  111.               <!-- Page Numbers -->
  112.               <div class="pagination-numbers container-desktop-flex">
  113.                 {% for page in pages.pagesInRange %}
  114.                   {% if page == pages.current %}
  115.                     <span class="pagination-number pagination-number--active">{{ page }}</span>
  116.                   {% else %}
  117.                     {% set pageUrl = page == 1 ? path('news_list') : path('news_list_page', {'pageno': page}) %}
  118.                     <a class="pagination-number" href="{{ pageUrl }}">{{ page }}</a>
  119.                   {% endif %}
  120.                 {% endfor %}
  121.               </div>
  122.               <div class="pagination-page-number container-mobile">
  123.                 {{ pages.current }}／{{ pages.pageCount }}
  124.               </div>
  126.               <!-- Next Button -->
  127.               <div class="pagination-btn-group">
  128.                 {# Next page button (single arrow) #}
  129.                 {% if pages.next is defined %}
  130.                   <a class="pagination-btn pagination-btn--next" href="{{ path('news_list_page', {'pageno': pages.next}) }}" aria-label="Next">
  131.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  132.                       <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"/>
  133.                     </svg>
  134.                   </a>
  135.                 {% else %}
  136.                   <span class="pagination-btn pagination-btn--next is-disabled" aria-hidden="true">
  137.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  138.                       <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"/>
  139.                     </svg>
  140.                   </span>
  141.                 {% endif %}
  142.                 {# Last page button (double arrow) #}
  143.                 {% if pages.current < pages.pageCount %}
  144.                   <a class="pagination-btn pagination-btn--next" href="{{ path('news_list_page', {'pageno': pages.pageCount}) }}" aria-label="Last">
  145.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  146.                       <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"/>
  147.                       <rect x="11.1035" y="2.47656" width="1.91077" height="11.043" fill="#00A854"/>
  148.                     </svg>
  149.                   </a>
  150.                 {% else %}
  151.                   <span class="pagination-btn pagination-btn--next is-disabled" aria-hidden="true">
  152.                     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  153.                       <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"/>
  154.                       <rect x="11.1035" y="2.47656" width="1.91077" height="11.043" fill="#00A854"/>
  155.                     </svg>
  156.                   </span>
  157.                 {% endif %}
  158.               </div>
  159.             </div>
  160.           </div>
  161.         {% endif %}
  163.       </div>
  164.     </div>
  165.   </div>
  166. {% endblock %}