PlexSheep
/
gawa
1
0
Fork 0
Code Issues 27 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

browse mobile friendly frontend

This commit is contained in:
Christoph J. Scherr 2023-10-07 13:29:09 +02:00
parent 62d7fbe57b
commit 8ef158c034
1 changed files with 86 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
gawa/blog/templates/blog/browse.html
View File

@ -14,51 +14,36 @@
{% 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 class="tagify" name="keywords" placeholder="{% trans "Keywords" %}">
</div>
<div class="col position-relative">
<div class="row">
<div class="col">
<input type="search" <input type="search"
name="search" name="search"
class="form-control me-2 flex-fill" class="form-control flex-fill py-2"
aria-label="Search" aria-label="Search"
placeholder="{% trans "Search" %}" placeholder="{% trans "Search" %}"
required="" required=""
id="id_search"> id="id_search">
<div class="col"> </div>
<div class="row mt-2"> <div class="py-2">
<div class="col col-xxl"> <select class="form-select py-2"
<select class="form-select" aria-label="Large select example" name="category"> aria-label="Large select example"
name="category">
<option value="" selected>{% trans "select category" %}</option> <option value="" selected>{% trans "select category" %}</option>
{% for category in categories %}<option value="{{ category.slug }}">{{ category.name }}</option>{% endfor %} {% for category in categories %}<option value="{{ category.slug }}">{{ category.name }}</option>{% endfor %}
</select> </select>
</div> </div>
<div class="col-md-auto"> <div class="py-2">
<button class="btn bg-primary fw-bold" type="submit">{% trans "Filter" %}</button> <input class="tagify" name="keywords" placeholder="{% trans "Keywords" %}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<button class="btn bg-primary fw-bold py-2" type="submit">{% trans "Filter" %}</button>
<script> <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]');
@ -68,9 +53,12 @@
</form> </form>
</div> </div>
</div> </div>
<div class="row row-cols-6 gap-1"> </div>
<div class="row mb-5">
<div class="container-fluid p-0 w-100 h-100">
<div class="row gap-3">
{% for post in posts %} {% for post in posts %}
<div class="card col mx-auto my-2"> <div class="card col mx-auto my-2" style="min-width: 200px;">
<a class="text-reset link-offset-2 link-underline link-underline-opacity-0" <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
href=" {% url 'blog:post' post.category.slug post.slug %}"> href=" {% url 'blog:post' post.category.slug post.slug %}">
<img src="{{ post.thumbnail.url }}" <img src="{{ post.thumbnail.url }}"
@ -123,4 +111,7 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div>
</div>
</div>
{% endblock main %} {% endblock main %}