add category to frontend

This commit is contained in:
Christoph J. Scherr 2023-10-07 11:01:57 +02:00
parent fb438c26b1
commit 62d7fbe57b
3 changed files with 19 additions and 15 deletions

View File

@ -25,9 +25,12 @@
<!-- </div> -->
</div>
<div class="col">
<form class="d-flex" role="search" action="" method="GET">
<form class="d-flex" role="search" action="" method="GET" novalidate>
<div class="container overflow-hidden ">
<div class="row gy-5">
<div class="col">
<input class="tagify" name="keywords" placeholder="{% trans "Keywords" %}">
</div>
<div class="col position-relative">
<div class="row">
<div class="col">
@ -38,24 +41,22 @@
placeholder="{% trans "Search" %}"
required=""
id="id_search">
<div class="col position-relative mt-2">
<button class="btn bg-primary fw-bold position-absolute top-50 end-0" type="submit">{% trans "Filter" %}</button>
</div>
</div>
</div>
</div>
<div class="col">
<input class="tagify"
name="keywords"
placeholder="{% trans "Keywords" %}"
value='tag1, tag2 autofocus'>
<div class="row mt-2">
<div class="col col-xxl">
<select class="form-select" aria-label="Large select example" name="category">
<option value="" selected>{% trans "select category" %}</option>
{% for category in categories %}<option value="{{ category.slug }}">{{ category.name }}</option>{% endfor %}
</select>
</div>
<div class="col-md-auto">
<button class="btn bg-primary fw-bold" type="submit">{% trans "Filter" %}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col"> -->
<!-- <input class="tagify" -->
<!-- name="category" -->
<!-- placeholder="{% trans "Category" %}" -->
<!-- value='tag1, tag2 autofocus'> -->
<!-- </div> -->
</div>
</div>
<script>

View File

@ -52,4 +52,5 @@ class Browse(ListView):
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['featured_posts'] = BlogPost.objects.filter(featured=True)
context['categories'] = Category.objects.all()
return context

View File

@ -30,4 +30,6 @@ main * {
--tag-text-color: var( --bs-body-color) !important;
/* border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; */
border-radius: 0.375rem;
width: 100%;
height: 100%;
}