blog-browse #40
|
|
@ -14,113 +14,104 @@
|
||||||
{% include 'nav.html' %}
|
{% include 'nav.html' %}
|
||||||
{% endblock nav %}
|
{% endblock nav %}
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<div class="container">
|
<div class="container-fluid">
|
||||||
<div class="row pb-5">
|
<div class="row mb-5">
|
||||||
<div class="col">
|
<div class="col col-xxl mb-5">
|
||||||
<!-- <div class="position-absolute top-50 start-50 translate-middle"> -->
|
{# TODO: center in mobile view #}
|
||||||
<h1 class="">
|
<h1 class="display-1">Browse</h1>
|
||||||
Browse
|
|
||||||
<!-- TODO: tell the user what the filters are? -->
|
|
||||||
</h1>
|
|
||||||
<!-- </div> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col-sm-3">
|
||||||
<form class="d-flex" role="search" action="" method="GET" novalidate>
|
<div class="container-fluid w-100 h-100 p-2">
|
||||||
<div class="container overflow-hidden ">
|
<form class="w-100 h-100" role="search" action="" method="GET" novalidate>
|
||||||
<div class="row gy-5">
|
<div class="py-2">
|
||||||
<div class="col">
|
<input type="search"
|
||||||
<input class="tagify" name="keywords" placeholder="{% trans "Keywords" %}">
|
name="search"
|
||||||
</div>
|
class="form-control flex-fill py-2"
|
||||||
<div class="col position-relative">
|
aria-label="Search"
|
||||||
<div class="row">
|
placeholder="{% trans "Search" %}"
|
||||||
<div class="col">
|
required=""
|
||||||
<input type="search"
|
id="id_search">
|
||||||
name="search"
|
|
||||||
class="form-control me-2 flex-fill"
|
|
||||||
aria-label="Search"
|
|
||||||
placeholder="{% trans "Search" %}"
|
|
||||||
required=""
|
|
||||||
id="id_search">
|
|
||||||
<div class="col">
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
<div class="py-2">
|
||||||
<script>
|
<select class="form-select py-2"
|
||||||
|
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="py-2">
|
||||||
|
<input class="tagify" name="keywords" placeholder="{% trans "Keywords" %}">
|
||||||
|
</div>
|
||||||
|
<button class="btn bg-primary fw-bold py-2" type="submit">{% trans "Filter" %}</button>
|
||||||
|
<script>
|
||||||
// The DOM element you wish to replace with Tagify
|
// The DOM element you wish to replace with Tagify
|
||||||
var input = document.querySelector('input[class=tagify]');
|
var input = document.querySelector('input[class=tagify]');
|
||||||
// initialize Tagify on the above input node reference
|
// initialize Tagify on the above input node reference
|
||||||
new Tagify(input)
|
new Tagify(input)
|
||||||
</script>
|
</script>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row row-cols-6 gap-1">
|
<div class="row mb-5">
|
||||||
{% for post in posts %}
|
<div class="container-fluid p-0 w-100 h-100">
|
||||||
<div class="card col mx-auto my-2">
|
<div class="row gap-3">
|
||||||
<a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
|
{% for post in posts %}
|
||||||
href=" {% url 'blog:post' post.category.slug post.slug %}">
|
<div class="card col mx-auto my-2" style="min-width: 200px;">
|
||||||
<img src="{{ post.thumbnail.url }}"
|
<a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
|
||||||
class="card-img-top img-fluid mx-auto d-block"
|
href=" {% url 'blog:post' post.category.slug post.slug %}">
|
||||||
style="max-height: 150px;
|
<img src="{{ post.thumbnail.url }}"
|
||||||
width: auto;
|
class="card-img-top img-fluid mx-auto d-block"
|
||||||
padding-top: 8px"
|
style="max-height: 150px;
|
||||||
alt="thumbnail" />
|
width: auto;
|
||||||
<div class="card-body" style="height: 100px">
|
padding-top: 8px"
|
||||||
{% if LANGUAGE_CODE == "de" %}
|
alt="thumbnail" />
|
||||||
<h5 class="card-title">
|
<div class="card-body" style="height: 100px">
|
||||||
{{ post.title_de }}<small class="text-body-secondary">{{ post.subtitle }}</small>
|
|
||||||
</h5>
|
|
||||||
<p class="card-text">{{ post.desc_de }}</p>
|
|
||||||
{% elif LANGUAGE_CODE == "en" %}
|
|
||||||
<h5 class="card-title">
|
|
||||||
{{ post.title_en }}<small class="text-body-secondary">{{ post.subtitle }}</small>
|
|
||||||
</h5>
|
|
||||||
<p class="card-text">{{ post.desc_en }}</p>
|
|
||||||
{% else %}
|
|
||||||
<h5 class="card-title">
|
|
||||||
{{ post.title_en }}<small class="text-body-secondary">{{ post.subtitle }}</small>
|
|
||||||
</h5>
|
|
||||||
<p class="card-text">{{ post.desc_en }}</p>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="container pt-5">
|
|
||||||
<ul class="list-group list-group-flush">
|
|
||||||
<li class="list-group-item">
|
|
||||||
{% translate "category" %}: <b>{{ post.category.name }}</b>
|
|
||||||
</li>
|
|
||||||
{% for keyword in post.keywords.all %}
|
|
||||||
{% if LANGUAGE_CODE == "de" %}
|
{% if LANGUAGE_CODE == "de" %}
|
||||||
<li class="list-group-item">{{ keyword.text_de }}</li>
|
<h5 class="card-title">
|
||||||
|
{{ post.title_de }}<small class="text-body-secondary">{{ post.subtitle }}</small>
|
||||||
|
</h5>
|
||||||
|
<p class="card-text">{{ post.desc_de }}</p>
|
||||||
{% elif LANGUAGE_CODE == "en" %}
|
{% elif LANGUAGE_CODE == "en" %}
|
||||||
<li class="list-group-item">{{ keyword.text_en }}</li>
|
<h5 class="card-title">
|
||||||
|
{{ post.title_en }}<small class="text-body-secondary">{{ post.subtitle }}</small>
|
||||||
|
</h5>
|
||||||
|
<p class="card-text">{{ post.desc_en }}</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li class="list-group-item">{{ keyword.text_en }}</li>
|
<h5 class="card-title">
|
||||||
|
{{ post.title_en }}<small class="text-body-secondary">{{ post.subtitle }}</small>
|
||||||
|
</h5>
|
||||||
|
<p class="card-text">{{ post.desc_en }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
</div>
|
||||||
</ul>
|
<div class="container pt-5">
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="list-group-item">
|
||||||
|
{% translate "category" %}: <b>{{ post.category.name }}</b>
|
||||||
|
</li>
|
||||||
|
{% for keyword in post.keywords.all %}
|
||||||
|
{% if LANGUAGE_CODE == "de" %}
|
||||||
|
<li class="list-group-item">{{ keyword.text_de }}</li>
|
||||||
|
{% elif LANGUAGE_CODE == "en" %}
|
||||||
|
<li class="list-group-item">{{ keyword.text_en }}</li>
|
||||||
|
{% else %}
|
||||||
|
<li class="list-group-item">{{ keyword.text_en }}</li>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="container p-1 text-center" style="border-top: solid">
|
||||||
|
<li class="list-group-item">
|
||||||
|
{% format_time post.date "%F" as date %}
|
||||||
|
{% trans "published" %}: {{ date }}
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="container p-1 text-center" style="border-top: solid">
|
{% endfor %}
|
||||||
<li class="list-group-item">
|
|
||||||
{% format_time post.date "%F" as date %}
|
|
||||||
{% trans "published" %}: {{ date }}
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock main %}
|
</div>
|
||||||
|
{% endblock main %}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue