templates/terlaterie_search.html.twig line 1

  1. {% extends "base.html.twig" %}
  2. {% block title %}
  3.     {{ 'translation.search.title'|trans }}
  4. {% endblock %}
  6. {% block body %}
  7.     {{ form_start(form) }}
  8.     <div>
  9.         {{ form_errors(form) }}
  10.     </div>
  12.     <div class="row text-center align-items-start">
  13.         <div class="col-5">
  14.             <div class="row align-items-start">
  15.                 <div class="col-11">
  16.                     {{ form_row(form.searchString) }}
  17.                 </div>
  18.                 <div class="col-1"
  19.                      style="margin-top: 36px; font-size: 20px; margin-left: -55px; color: gray; cursor: pointer">
  20.                     <div id="empty_search">x</div>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.         <div class="col-2">
  25.             {{ form_row(form.searchLanguage) }}
  26.         </div>
  27.         <div class="col-4">
  28.             {{ form_row(form.targetLanguages) }}
  29.         </div>
  30.         <div class="col-1">
  31.             {{ form_row(form.submit) }}
  32.         </div>
  33.     </div>
  34.     {{ form_end(form) }}
  36.     {#    {{ form(form) }} #}
  38.     <div class="row mb-2">
  39.         <div class="col-1">{{ 'translation.search_info_name'|trans }}</div>
  40.         <div class="col fw-bold">{{ search_string }}</div>
  41.     </div>
  43.     <div class="row align-items-center mb-4">
  44.         <div class="col-2">{{ 'translation.search.has_been_found_in'|trans }}</div>
  45.         <div class="col-10">
  46.             <list>
  47.                 <ul class="list-group list-group-horizontal">
  48.                     {% for projectKey, project in projects %}
  49.                         {% if translations[projectKey] is defined %}
  50.                             <li class="list-group-item text-bg-secondary"><a href="#title-{{ projectKey }}"
  51.                                                                              class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ project.name }}</a>
  52.                             </li>
  53.                         {% endif %}
  54.                     {% endfor %}
  55.                 </ul>
  56.             </list>
  57.         </div>
  58.     </div>
  60.     {% for projectKey, project in projects %}
  61.         {% if translations[projectKey] is defined %}
  62.             <div class="container mb-4">
  63.                 <h3 id="title-{{ projectKey }}" class="text-center fw-bold">{{ project.name }}</h3>
  64.                 <p class="text-center small">
  65.                     {% if (project.source is defined and project.source != "") or (project.website is defined and project.website != "") %}
  66.                         (
  67.                         {% if project.source is defined and project.source != "" %}
  68.                             <a href="{{ project.source }}" class="link-info link-underline-opacity-25" target="_blank">Source</a>
  69.                         {% endif %}
  70.                         {% if (project.source is defined and project.source != "") and (project.website is defined and project.website != "") %}
  71.                             ;
  72.                         {% endif %}
  73.                         {% if project.website is defined and project.website != "" %}
  74.                             <a href="{{ project.website }}" class="link-info link-underline-opacity-25" target="_blank">Website</a>
  75.                         {% endif %}
  76.                         )
  77.                     {% endif %}
  78.                 </p>
  79.                 <table class="table table-dark table-striped table-hover table-bordered text-break">
  80.                     <thead>
  81.                     <tr>
  82.                         <th scope="col">{{ 'translation.search.key'|trans }}</th>
  83.                         {% for language in languages[projectKey] %}
  84.                             <th scope="col">{{ language }}</th>
  85.                         {% endfor %}
  86.                     </tr>
  87.                     </thead>
  88.                     <tbody class="table-group-divider">
  89.                     {% for key,translation in translations[projectKey] %}
  90.                         <tr>
  91.                             <th scope="row">
  92.                                 {{ key | replace({'.': ' > '}) }}
  93.                             </th>
  94.                             {% for language in languages[projectKey] %}
  95.                                 {% if translation[language] is defined %}
  96.                                     {% if project.quality[language] is defined %}
  97.                                         {% if project.quality[language].reviewed == false %}
  98.                                             {% set borderColor = "orange" %}
  99.                                         {% elseif project.quality[language].reviewed == true %}
  100.                                             {% set borderColor = "green" %}
  101.                                         {% else %}
  102.                                             {% set borderColor = "" %}
  103.                                         {% endif %}
  104.                                     {% else %}
  105.                                         {% set borderColor = "" %}
  106.                                     {% endif %}
  107.                                     <td class="{{ borderColor }}">
  108.                                         {{ translation[language] | raw }}
  109.                                     </td>
  110.                                 {% endif %}
  111.                             {% endfor %}
  112.                         </tr>
  113.                     {% endfor %}
  114.                     </tbody>
  115.                 </table>
  116.             </div>
  117.         {% endif %}
  118.     {% endfor %}
  121.     <script>
  122.         var searchInput = $('#terlaterie_search_searchString');
  123.         var emptyButton = $('#empty_search');
  124.         emptyButton.click(e => {
  125.             e.preventDefault();
  126.             searchInput.val('').focus();
  127.         })
  129.         var tl = $('#terlaterie_search_targetLanguages')
  130.         tl.children().each(function () {
  131.             $(this).addClass('form-check').addClass('form-check-inline');
  132.             $(this).children('input').addClass('btn-check');
  133.             $(this).children('label').addClass('btn text-light');
  134.         })
  135.         tl.prev().addClass('form-title');
  137.         $(document).on('keypress', function (e) {
  138.             if (!searchInput.is(':focus') && (e.key === '/' || e.key === 's')) {
  139.                 e.preventDefault();
  140.                 searchInput.focus().select();
  141.             }
  142.         });
  143.     </script>
  144. {% endblock body %}