Adds a new "offcanvas" section for search results

This commit is contained in:
Oliver Walters 2022-03-28 10:02:55 +11:00
parent ab7eda9d2c
commit 2976545988
3 changed files with 25 additions and 7 deletions

View File

@ -231,8 +231,8 @@ function inventreeDocReady() {
stopNotificationWatcher();
});
$('#offcanvasRight').on('show.bs.offcanvas', openNotificationPanel); // listener for opening the notification panel
$('#offcanvasRight').on('hidden.bs.offcanvas', closeNotificationPanel); // listener for closing the notification panel
$('#offcanvas-notification').on('show.bs.offcanvas', openNotificationPanel); // listener for opening the notification panel
$('#offcanvas-notification').on('hidden.bs.offcanvas', closeNotificationPanel); // listener for closing the notification panel
}

View File

@ -91,7 +91,7 @@
<ul class='navbar-nav flex-row'>
<li class='nav-item me-2'>
<button data-bs-toggle='offcanvas' data-bs-target="#offcanvasSearch" class='btn position-relative' title='{% trans "Search" %}'>
<button data-bs-toggle='offcanvas' data-bs-target="#offcanvas-search" class='btn position-relative' title='{% trans "Search" %}'>
<span class='fas fa-search'></span>
</button>
</li>
@ -105,7 +105,7 @@
{% endif %}
<li class='nav-item me-2'>
<button data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" class='btn position-relative' title='{% trans "Show Notifications" %}'>
<button data-bs-toggle="offcanvas" data-bs-target="#offcanvas-notification" class='btn position-relative' title='{% trans "Show Notifications" %}'>
<span class='fas fa-bell'></span>
<span class="position-absolute top-100 start-100 translate-middle badge rounded-pill bg-danger d-none" id="notification-alert">
<span class="visually-hidden">{% trans "New Notifications" %}</span>

View File

@ -1,7 +1,8 @@
{% load i18n %}
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" data-bs-scroll="true" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-notification" data-bs-scroll="true" aria-labelledby="offcanvas-notification-label">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">{% trans "Notifications" %}</h5>
<h5 id="offcanvas-notification-label">{% trans "Notifications" %}</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
@ -11,4 +12,21 @@
<hr>
<a href="{% url 'notifications' %}">{% trans "Show all notifications and history" %}</a>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-search" data-bs-scroll="true" aria-labelledby="offcanvas-search-label">
<div class="offcanvas-header">
<div class='input-group'>
<input type="text" name='search' class="form-control" aria-label='{% trans "Search" %}' id="search-bar" placeholder="{% trans 'Search' %}"{% if query_text %} value="{{ query }}"{% endif %}>
<button type="submit" id='search-submit' class="btn btn-secondary" title='{% trans "Search" %}'>
<span class='fas fa-search'></span>
</button>
</div>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div id="search-center">
<p id='serach-no-results' class='text-muted'><em>{% trans "No results" %}</em></p>
</div>
</div>
</div>