finish search implementation

main/models.py

@@ -497,7 +497,14 @@ class MainArticlesPage(
         if request.method == "GET" and "q" in request.GET:
             query = request.GET["q"]
             
-            results = MainArticlePage.objects.live().search(query)
+            # Show 30 top results for the time being
+            results = (
+                MainArticlePage
+                .objects
+                .live()
+                .search(query)
+                [:30]
+            )
             
             return render(
                 request,
@@ -506,6 +513,7 @@ class MainArticlesPage(
                     **self.get_context(request),
                     "query": query,
                     "results": results,
+                    "sub_heading": f"Vyhledávání „{query}“"
                 }
             )
         else:

main/templates/main/includes/layout/simple_page_header.html

@@ -4,6 +4,11 @@
       <h1 class="head-8xl text-white">
         {{ page.title }}
       </h1>
+      {% if sub_heading %}
+        <h2 class="head-3xl text-white">
+          {{ sub_heading }}
+        </h2>
+      {% endif %}
     </div>
   </div>
 </header>

main/templates/main/main_article_search.html

@@ -2,98 +2,63 @@
 {% load wagtailcore_tags wagtailimages_tags shared_filters %}
 
 {% block content %}
-  {% include 'main/includes/layout/simple_page_header.html' %}
+  {% include 'main/includes/layout/simple_page_header.html' with sub_heading=sub_heading %}
 
   <main role="main">
     <div class="__js-root">
-        <div class="grid-container article-section mb-8">
-          <div class="grid-full">
-            <div class="flex flex-col items-center gap-3">
-              <form
-                class="flex flex-row"
-                method="get"
-                action="{{ page.search_url }}"
-              >
-                {% csrf_token %}
-                <input
-                  class="bg-grey-150 w-56 h-10 px-4 text-lg xl:h-14 xl:px-5"
-                  type="text"
-                  id="q"
-                  name="q"
-                  value="{{ query }}"
-                  placeholder="Hledat články..."
-                  aria-label="Vyhledávací box"
-                >
-                <button
-                  class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive"
-                  aria-label="Vyhledat"
-                  type="submit"
-                >
-                  <div class="btn__body-wrap h-10 w-12 min-h-0 min-w-0 xl:h-14 xl:w-14">
-                    <div class="btn__body p-0">
-                      <i class="ico--search"></i>
-                    </div>
-                  </div>
-                </button>
-              </form>
-              <a href="{{ page.url }}" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
-                <span class="btn__body-wrap">
-                  <span class="btn__body text-lg lg:text-base">
-                    Zpět na seznam
-                  </span>
-                </span>
-              </a>
-            </div>
-          </div>
-        </div>
-        <section class="mb-3 xl:mb-14">
-          <div class="grid-container justify-start">
-            <div class="grid-content-with-right-side">
-              <div class="leading-6">
-                <h2 class="head-4xl mb-5 xl:hidden">
-                  Výsledky pro „{{ query }}“
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div id="searchArticleResultWrapper">
-            {% include 'main/includes/person_article_preview.html' with article_data_list=results %}
-          </div>
-        </section>
+       <div class="grid-container article-section mb-8">
+         <div class="grid-full">
+           <div class="flex justify-center">
+             <div class="flex flex-col items-end gap-3">
+               <form
+                 class="flex flex-row"
+                 method="get"
+                 action="{{ page.search_url }}"
+               >
+                 <input
+                   class="bg-grey-150 w-56 h-10 px-4 text-lg xl:h-14 xl:px-5"
+                   type="text"
+                   id="q"
+                   name="q"
+                   value="{{ query }}"
+                   placeholder="Hledat články..."
+                   aria-label="Vyhledávací box"
+                 >
+                 <button
+                   class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive"
+                   aria-label="Vyhledat"
+                   type="submit"
+                 >
+                   <div class="btn__body-wrap h-10 w-12 min-h-0 min-w-0 xl:h-14 xl:w-14">
+                     <div class="btn__body p-0">
+                       <i class="ico--search"></i>
+                     </div>
+                   </div>
+                 </button>
+               </form>
+               <a href="{{ page.url }}" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
+                 <span class="btn__body-wrap">
+                   <span class="btn__body text-lg lg:text-base">
+                     Zpět na seznam
+                   </span>
+                 </span>
+               </a>
+             </div>
+           </div>
+         </div>
+       </div>
+       <section class="mb-3 xl:mb-14">
+         {% if results %}
+           {% include 'main/includes/person_article_preview.html' with article_data_list=results %}
+         {% else %}
+           <div class="grid-container article-section mb-8">
+             <div class="grid-full">
+               <p class="text-grey-300 text-center">Žádné výsledky.</p>
+             </div>
+           </div>
+         {% endif %}
+       </section>
       {% include "main/includes/newsletter_section.html" %}
     </div>
   </main>
-
-  <script type="text/javascript">
-    async function showMoreTimelineArticles(event, btn) {
-      event.preventDefault()
-
-      const showMoreTimelineResultsWrapper = document.getElementById('showMoreTimelineResultsWrapper')
-      const url = btn.getAttribute('data-url') + btn.getAttribute('data-months')
-
-      const response = await fetch(url, {
-        method: "GET",
-        headers: {"X-Requested-With": "XMLHttpRequest"},
-      })
-      const data = await response.json()
-      showMoreTimelineResultsWrapper.innerHTML = data.html
-      btn.setAttribute('data-months', parseInt(btn.getAttribute('data-months')) + 1)
-    }
-
-    async function showMoreArticles(event, btn) {
-      event.preventDefault()
-
-      let searchArticleResultWrapper = document.getElementById('searchArticleResultWrapper')
-      let url = btn.getAttribute('data-url') + btn.getAttribute('data-page')
-
-      const response = await fetch(url, {
-        method: "GET",
-        headers: {"X-Requested-With": "XMLHttpRequest"},
-      })
-      const data = await response.json()
-      searchArticleResultWrapper.innerHTML += data.html;
-      if (!data.has_next) { btn.style.display = 'none'; }
-      btn.setAttribute('data-page', parseInt(btn.getAttribute('data-page')) + 1)
-    }
-  </script>
 {% endblock content %}

main/templates/main/main_articles_page.html

@@ -33,7 +33,6 @@
                   method="get"
                   action="{{ page.search_url }}"
                 >
-                  {% csrf_token %}
                   <input
                     class="bg-grey-150 w-56 h-10 px-4 text-lg xl:h-14 xl:px-5"
                     type="text"