base: enable search on mobile
This commit is contained in:
parent
375fcbb2c7
commit
1d01583913
3 changed files with 113 additions and 44 deletions
|
|
@ -329,13 +329,11 @@ function Xe() {
|
|||
a.open(r, o, !0), a.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), a.setRequestHeader("X-Requested-With", "XMLHttpRequest"), a.onload = () => {
|
||||
var l, u;
|
||||
if (e.dataset.modalcontainer) {
|
||||
const d = document.querySelector(e.dataset.modalcontainer);
|
||||
d != null && (new $(d).show(), console.log("got modal"));
|
||||
|
||||
const modalElement = document.getElementById('govplan-searchmodal-275111');
|
||||
const modal = new bootstrap.Modal(modalElement);
|
||||
modal.show();
|
||||
|
||||
const modalElement = document.querySelector(e.dataset.modalcontainer);
|
||||
if (modalElement) {
|
||||
const modal = new bootstrap.Modal(modalElement);
|
||||
modal.show();
|
||||
}
|
||||
} else if (e.dataset.modal) {
|
||||
const d = document.getElementById(e.dataset.modal);
|
||||
(l = d == null ? void 0 : d.dataset) != null && l.bsTarget && ((u = $.getInstance(document.querySelector(d.dataset.bsTarget))) == null || u.hide())
|
||||
|
|
|
|||
|
|
@ -6,9 +6,51 @@
|
|||
{% block body %}
|
||||
|
||||
<style>
|
||||
#govplan-searchresult-275111 .card-body {
|
||||
#govplan-searchresult-275111 .card-body,
|
||||
#govplan-searchresult-mobile .card-body {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.header-logo { height: 32px !important; }
|
||||
.header-title { font-size: 1.1rem !important; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#mobile-nav-menu { display: none !important; }
|
||||
}
|
||||
|
||||
.burger-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 6px 4px;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
.burger-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
width: 24px;
|
||||
}
|
||||
.burger-icon span {
|
||||
display: block;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
.burger-btn[aria-expanded="true"] .burger-icon span:nth-child(1) {
|
||||
transform: translateY(7px) rotate(45deg);
|
||||
}
|
||||
.burger-btn[aria-expanded="true"] .burger-icon span:nth-child(2) {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
.burger-btn[aria-expanded="true"] .burger-icon span:nth-child(3) {
|
||||
transform: translateY(-7px) rotate(-45deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
|
|
@ -75,53 +117,54 @@
|
|||
</div>
|
||||
|
||||
<div class="col-lg-10 mx-auto p-4 py-md-5">
|
||||
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
|
||||
<header class="d-flex align-items-center flex-wrap pb-3 mb-5 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none text-reset">
|
||||
<img src="{% static 'froide_govplan/images/logo.svg' %}" class="bi me-2" height="50">
|
||||
<span class="fs-4">VerwaltungsTracker</span>
|
||||
<img src="{% static 'froide_govplan/images/logo.svg' %}" class="bi me-2 header-logo" height="50">
|
||||
<span class="fs-4 header-title">VerwaltungsTracker</span>
|
||||
</a>
|
||||
<div style="margin-left: auto; max-width: 350px;" class="search">
|
||||
|
||||
<!-- Desktop search -->
|
||||
<div style="margin-left: auto; max-width: 350px;" class="search d-none d-md-block">
|
||||
<form method="get" action="/search/" class="ajaxified" data-container="#govplan-searchresult-275111" data-modalcontainer="#govplan-searchmodal-275111">
|
||||
<div class="input-group">
|
||||
<input type="text" name="q" class="form-control" aria-label="Suchbegriff" placeholder="Suchbegriff">
|
||||
<select name="status" class="form-select" style="display: none;">
|
||||
<option value="">Status filtern</option>
|
||||
|
||||
<option value="not_started">nicht begonnen</option>
|
||||
|
||||
<option value="started">begonnen</option>
|
||||
|
||||
<option value="partially_implemented">teilweise umgesetzt</option>
|
||||
|
||||
<option value="implemented">umgesetzt</option>
|
||||
|
||||
<option value="deferred">zurückgestellt</option>
|
||||
|
||||
<option value="not_started">nicht begonnen</option>
|
||||
<option value="started">begonnen</option>
|
||||
<option value="partially_implemented">teilweise umgesetzt</option>
|
||||
<option value="implemented">umgesetzt</option>
|
||||
<option value="deferred">zurückgestellt</option>
|
||||
</select>
|
||||
<button class="btn btn-outline-secondary" type="submit">
|
||||
Suchen
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" type="submit">Suchen</button>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="government" value="1"/>
|
||||
|
||||
<input type="hidden" name="government" value="1"/>
|
||||
</form>
|
||||
|
||||
<div class="modal fade" id="govplan-searchmodal-275111">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Suchergebnisse</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile burger button -->
|
||||
<button class="burger-btn d-md-none ms-auto" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#mobile-nav-menu"
|
||||
aria-expanded="false" aria-controls="mobile-nav-menu"
|
||||
aria-label="Menü öffnen">
|
||||
<span class="burger-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Mobile collapsible menu -->
|
||||
<div class="collapse w-100" id="mobile-nav-menu">
|
||||
<div class="pt-3 pb-1">
|
||||
<form method="get" action="/search/" class="ajaxified" data-container="#govplan-searchresult-mobile" data-modalcontainer="#govplan-searchmodal-mobile">
|
||||
<div class="input-group">
|
||||
<input type="text" name="q" class="form-control" aria-label="Suchbegriff" placeholder="Suchbegriff">
|
||||
<button class="btn btn-outline-secondary" type="submit">Suchen</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="govplan-searchresult-275111"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="government" value="1"/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -237,4 +280,32 @@
|
|||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="govplan-searchmodal-275111">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Suchergebnisse</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="govplan-searchresult-275111"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="govplan-searchmodal-mobile">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Suchergebnisse</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="govplan-searchresult-mobile"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock body %}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
{% endblock meta %}
|
||||
{% block app_body %}
|
||||
|
||||
<h1 class="text-body-emphasis">{{ object.title }}</h1>
|
||||
<h1 class="text-body-emphasis text-break">{{ object.title }}</h1>
|
||||
<p class="fs-5 col-md-8">
|
||||
<div class="d-md-flex my-4 align-items-center">
|
||||
<ul class="list-unstyled d-flex m-0">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue