redesign header

This commit is contained in:
Jonas Heinrich 2025-05-13 09:55:20 +02:00
parent 9747dfcaac
commit d07fc04e57
7 changed files with 196 additions and 48 deletions

View file

@ -71,9 +71,52 @@
<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">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none text-reset">
<img src="{% static 'froide_govplan/images/apple-touch-icon.png' %}" class="bi me-2" height="32">
<img src="{% static 'froide_govplan/images/apple-touch-icon.png' %}" class="bi me-2" height="50">
<span class="fs-4">VerwaltungsTracker</span>
</a>
<div style="margin-left: auto; max-width: 350px;" class="search">
<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>
</select>
<button class="btn btn-outline-secondary" type="submit">
Suchen
</button>
</div>
<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>
<div class="modal-body">
<div id="govplan-searchresult-275111"></div>
</div>
</div>
</div>
</div>
</div>
</header>
<main>

View file

@ -0,0 +1,52 @@
{% extends "froide_govplan/base.html" %}
{% block title %}
About - VerwaltungsTracker
{% endblock title %}
{% block meta %}
{% include "snippets/meta.html" %}
{% endblock meta %}
{% block app_body %}
<h1>Hello World!</h1>
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [8.4037, 49.0069],
zoom: 12,
maxBounds: [
[8.30, 48.95],
[8.55, 49.07]
]
});
map.addControl(new maplibregl.NavigationControl());
const markers = [
{
coords: [8.4037, 49.0069],
text: "Karlsruhe Palace"
},
{
coords: [8.3857, 49.0132],
text: "ZKM | Center for Art and Media"
},
{
coords: [8.4087, 49.0008],
text: "Karlsruhe Zoo"
}
];
markers.forEach(({ coords, text }) => {
const popup = new maplibregl.Popup({ offset: 25 }).setText(text);
new maplibregl.Marker()
.setLngLat(coords)
.setPopup(popup)
.addTo(map);
});
</script>
{% endblock app_body %}

View file

@ -13,50 +13,6 @@
<div class="album py-5">
<div style="margin-left: auto; max-width: 700px; margin-bottom: 1rem;">
<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="max-width: 300px;">
<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>
</select>
<button class="btn btn-outline-secondary" type="submit">
Suchen
</button>
</div>
<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>
<div class="modal-body">
<div id="govplan-searchresult-275111"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
{% for section in sections %}