redesign header
This commit is contained in:
parent
9747dfcaac
commit
d07fc04e57
7 changed files with 196 additions and 48 deletions
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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
52
froide_govplan/templates/froide_govplan/map.html
Normal 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 %}
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ from .views import (
|
|||
about,
|
||||
team,
|
||||
support,
|
||||
mapview,
|
||||
)
|
||||
|
||||
app_name = "govplan"
|
||||
|
|
@ -24,6 +25,7 @@ urlpatterns = [
|
|||
path("about", about, name="about"),
|
||||
path("team", team, name="team"),
|
||||
path("support", support, name="support"),
|
||||
path("mapview", mapview, name="mapview"),
|
||||
path(
|
||||
pgettext_lazy("url part", "<slug:gov>/plan/<slug:plan>/"),
|
||||
GovPlanDetailView.as_view(),
|
||||
|
|
|
|||
|
|
@ -180,4 +180,7 @@ def team(request):
|
|||
return render(request, "froide_govplan/team.html")
|
||||
|
||||
def support(request):
|
||||
return render(request, "froide_govplan/support.html")
|
||||
return render(request, "froide_govplan/support.html")
|
||||
|
||||
def mapview(request):
|
||||
return render(request, "froide_govplan/map.html")
|
||||
Loading…
Add table
Add a link
Reference in a new issue