app/Plugin/Recipe/Resource/template/default/recipe_search.twig line 1

Open in your IDE?
  1. <script>
  2. // $(window).on('load', function () {
  3.   /*
  4.   * レシピ一覧 タブ切り替え
  5.   */
  6. //   $('.recipe-search-tab-item > a').click(function () {
  7. //     $('.recipe-search-tab-item > a').removeClass('is-active');
  8. //     $(this).addClass('is-active');
  9. //     let target = $(this).data('target');
  10. //     $('.recipe-search-row').each(function () {
  11. //       let row = $(this).data('row');
  12. //       if (row == target) {
  13. //         $(this).addClass('is-active');
  14. //       } else {
  15. //         $(this).removeClass('is-active');
  16. //       }
  17. //     });
  18. //   });
  19. // });
  20. </script>
  21. <section class="recipe-search">
  22.   <div class="inner">
  23.     <h2 class="p-title icon-side"><span>キーワードで探す</span></h2>
  24.     <form class="recipe-search-form" method="get" action="{{ url('recipe') }}">
  25.       <div class="recipe-search-wrap">
  26.         {{ form_widget(search_form.name) }}
  27.       </div>
  28.       <button type="submit" class="search-button" id="search-button">検索</button>
  29.     </form>
  30.     <ul class="recipe-search-tab-list">
  31.       {% if Categories is defined and Categories|length > 0 %}
  32.       <li class="recipe-search-tab-item">
  33.         <a data-target="category" class="is-active">カテゴリ</a>
  34.       </li>
  35.       {% endif %}
  36.       {% if Materials is defined and Materials|length > 0 %}
  37.       <li class="recipe-search-tab-item">
  38.         <a data-target="material">材料</a>
  39.       </li>
  40.       {% endif %}
  41.       {% if Tags is defined and Tags|length > 0 %}
  42.       <li class="recipe-search-tab-item">
  43.         <a data-target="tag">タグ</a>
  44.       </li>
  45.       {% endif %}
  46.     </ul>
  47.     {% if Categories is defined and Categories|length > 0 %}
  48.     <dl class="recipe-search-row is-active" data-row="category">
  49.       <dt class="recipe-search-title">カテゴリで探す</dt>
  50.       <dd class="recipe-search-desc is-active">
  51.         <div class="recipe-search-container">
  52.           <ul class="recipe-search-list">
  53.             {% for category in Categories %}
  54.               <li class="recipe-search-item">
  55.                 {% if search_form.category_id is defined and search_form.category_id.vars.value == category.id %}
  56.                   <a href="{{ url('recipe') }}?category_id={{ category.id }}" class="is-active">{{ category.name }}</a>
  57.                 {% else %}
  58.                   <a href="{{ url('recipe') }}?category_id={{ category.id }}">{{ category.name }}</a>
  59.                 {% endif %}
  60.               </li>
  61.             {% endfor %}
  62.           </ul>
  63.         </div>
  64.         <button class="recipe-toggle-button"></button>
  65.       </dd>
  66.     </dl>
  67.     {% endif %}
  68.     {% if Materials is defined and Materials|length > 0 %}
  69.     <dl class="recipe-search-row" data-row="material">
  70.       <dt class="recipe-search-title">材料で探す</dt>
  71.       <dd class="recipe-search-desc">
  72.         <div class="recipe-search-container">
  73.           <ul class="recipe-search-list">
  74.             {% for material in Materials %}
  75.               <li class="recipe-search-item">
  76.                 {% if search_form.material_id is defined and search_form.material_id.vars.value == material.id %}
  77.                   <a href="{{ url('recipe') }}?material_id={{ material.id }}" class="is-active">{{ material.name }}</a>
  78.                 {% else %}
  79.                   <a href="{{ url('recipe') }}?material_id={{ material.id }}">{{ material.name }}</a>
  80.                 {% endif %}
  81.               </li>
  82.             {% endfor %}
  83.           </ul>
  84.         </div>
  85.         <button class="recipe-toggle-button"><span></span></button>
  86.       </dd>
  87.     </dl>
  88.     {% endif %}
  89.     {% if Tags is defined and Tags|length > 0 %}
  90.     <dl class="recipe-search-row" data-row="tag">
  91.       <dt class="recipe-search-title">タグで探す</dt>
  92.       <dd class="recipe-search-desc">
  93.         <div class="recipe-search-container">
  94.           <ul class="recipe-search-list">
  95.             {% for tag in Tags %}
  96.               <li class="recipe-search-item">
  97.                 {% if search_form.tag_id is defined and search_form.tag_id.vars.value == tag.id %}
  98.                   <a href="{{ url('recipe') }}?tag_id={{ tag.id }}" class="is-active">{{ tag.name }}</a>
  99.                 {% else %}
  100.                   <a href="{{ url('recipe') }}?tag_id={{ tag.id }}">{{ tag.name }}</a>
  101.                 {% endif %}
  102.               </li>
  103.             {% endfor %}
  104.           </ul>
  105.         </div>
  106.         <button class="recipe-toggle-button"></button>
  107.       </dd>
  108.     </dl>
  109.     {% endif %}
  110.   </div>
  111. </section>