Basic search page

Author: stuartmaxwell

static/css/bs53p.css

@@ -423,6 +423,11 @@ textarea {
   height: auto;
 }
 
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
 /* rtl:raw:
 [type="tel"],
 [type="url"],
@@ -718,6 +723,7 @@ textarea.form-control {
   outline: 0;
   box-shadow: var(--bs-btn-focus-box-shadow);
 }
+
 :not(.btn-check) + .btn:active,
 .btn:first-child:active,
 .btn.active,
@@ -726,6 +732,7 @@ textarea.form-control {
   background-color: var(--bs-btn-active-bg);
   border-color: var(--bs-btn-active-border-color);
 }
+
 :not(.btn-check) + .btn:active:focus-visible,
 .btn:first-child:active:focus-visible,
 .btn.active:focus-visible,
@@ -884,6 +891,7 @@ textarea.form-control {
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(13, 84, 43, 0.25);
 }
+
 .nav-link:disabled {
   color: var(--bs-nav-link-disabled-color);
   pointer-events: none;
@@ -1083,6 +1091,32 @@ textarea.form-control {
   top: -1px;
 }
 
+.alert {
+  --bs-alert-bg: transparent;
+  --bs-alert-padding-x: 1rem;
+  --bs-alert-padding-y: 1rem;
+  --bs-alert-margin-bottom: 1rem;
+  --bs-alert-color: inherit;
+  --bs-alert-border-color: transparent;
+  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
+  --bs-alert-border-radius: var(--bs-border-radius);
+  --bs-alert-link-color: inherit;
+  position: relative;
+  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
+  margin-bottom: var(--bs-alert-margin-bottom);
+  color: var(--bs-alert-color);
+  background-color: var(--bs-alert-bg);
+  border: var(--bs-alert-border);
+  border-radius: var(--bs-alert-border-radius);
+}
+
+.alert-danger {
+  --bs-alert-color: var(--bs-danger-text-emphasis);
+  --bs-alert-bg: var(--bs-danger-bg-subtle);
+  --bs-alert-border-color: var(--bs-danger-border-subtle);
+  --bs-alert-link-color: var(--bs-danger-text-emphasis);
+}
+
 @keyframes progress-bar-stripes {
   0% {
     background-position-x: 1rem;
@@ -1285,6 +1319,19 @@ textarea.form-control {
   }
 }
 
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  vertical-align: middle;
+  cursor: wait;
+  background-color: currentcolor;
+  opacity: 0.5;
+}
+.placeholder.btn::before {
+  display: inline-block;
+  content: "";
+}
+
 @keyframes placeholder-glow {
   50% {
     opacity: 0.2;
@@ -1401,6 +1448,11 @@ textarea.form-control {
   align-items: center !important;
 }
 
+.my-3 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
 .me-0 {
   margin-right: 0 !important;
 }

templates/djpress/stuartmnz/search.html

@@ -0,0 +1,41 @@
+{% extends "_base.html" %}
+{% load djpress_tags %}
+{% block content %}
+  <div class="row">
+    <div class="col col-md-8 pt-3">
+      {% search_title outer="h3" outer_class="search-heading" pre_text="Search Results for '" post_text="'" %}
+      {% search_form placeholder="Search posts..." button_text="Search" form_class="search-form" input_class="form-control" button_class="btn btn-primary my-3" %}
+      {% search_errors error_class="alert alert-danger" %}
+      {% for post in posts %}
+        {% post_wrap %}
+        {% post_title outer_tag="h4" include_empty=True %}
+        <footer>
+          <p>Posted on {% post_date %}</p>
+        </footer>
+      {% end_post_wrap %}
+    {% empty %}
+      {% if search_query %}<p>No posts available.</p>{% endif %}
+    {% endfor %}
+    {% is_paginated as paginated %}
+    {% if paginated %}
+      {% get_pagination_range as page_range %}
+      {% get_pagination_current_page as current_page %}
+      <nav aria-label="Page navigation">
+        <ul class="pagination">
+          {% for page in page_range %}
+            {% if page == current_page %}
+              <li class="page-item active" aria-current="page">
+                <a class="page-link" href="?page={{ page }}">{{ page }}</a>
+              </li>
+            {% else %}
+              <li class="page-item">
+                <a class="page-link" href="?page={{ page }}">{{ page }}</a>
+              </li>
+            {% endif %}
+          {% endfor %}
+        </ul>
+      </nav>
+    {% endif %}
+  </div>
+</div>
+{% endblock content %}

templates/snippets/header.html

@@ -22,6 +22,12 @@
           </a>
         </li>
       {% endif %}
+      <li class="nav-item">
+        <a href="{% search_url %}" class="nav-link icon-link px-sm-2 px-1">
+          {% include "svg/search.svg" %}
+          <span class="d-none d-md-inline">Search</span>
+        </a>
+      </li>
       <li class="nav-item">
         <a href="{% url "contact_form:contact_form" %}"
            hx-get="{% url 'contact_form:contact_form' %}"