onny/verwaltungstracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redesign header

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

16
froide_govplan/templates/cms/mypage.html
View file

@ -30,6 +30,10 @@
<link rel="canonical" href="{{ request.build_absolute_uri }}">
<link rel="stylesheet" href="{% static 'froide_govplan/css/docsearch.css' %}">
<link href="https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.js"></script>
<!-- Favicons -->
<link rel="apple-touch-icon" href="{% static 'froide_govplan/images/apple-touch-icon.png' %}" sizes="180x180">
<link rel="icon" href="{% static 'froide_govplan/images/favicon-32x32.png' %}" sizes="32x32" type="image/png">
@ -153,12 +157,13 @@
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mobile: nur 1 Slide sichtbar */
@media (max-width: 768px) {
.carousel-inner .carousel-item > div {
@ -212,7 +217,14 @@
}
}
@media (max-width: 768px) {
.search {
display: none;
}
header {
justify-content: center;
}
}
</style>
{% block extra_css %}

45
froide_govplan/templates/froide_govplan/base.html
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>

52
froide_govplan/templates/froide_govplan/map.html Normal file
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 %}

44
froide_govplan/templates/froide_govplan/plugins/sections.html
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 %}