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

80
flake.nix Normal file
View file

@ -0,0 +1,80 @@
{
description = "Invoiceplane invoice template development shell";
inputs.nixpkgs.url = "nixpkgs/master";
outputs = { self, nixpkgs, ... }@inputs:
let
pkgs = nixpkgs.legacyPackages.x86_64-linux;
start =
pkgs.writeShellScriptBin "start" ''
set -e
export NIXPKGS_ALLOW_INSECURE=1
export QEMU_NET_OPTS="hostfwd=tcp::8080-:80"
${pkgs.nixos-shell}/bin/nixos-shell --flake .
'';
in {
nixosConfigurations.vm = nixpkgs.lib.nixosSystem {
system = "x86_64-linux";
specialArgs.inputs = inputs;
pkgs = import nixpkgs {
overlays = [
(self: super: {
froide-govplan = super.froide-govplan.overrideAttrs (oldAttrs: rec {
src = ./.;
#pkgs.fetchFromGitHub {
# owner = "onny";
# repo = "froide-govplan";
# rev = "81697ce37cfdee7b5d0f667c50b13062ed9786c3";
# hash = "sha256-ooHGlCKgZL+TMh6OtopKtbkV0MhT4udLCOIC+C3Ytdw=";
#};
postInstall = oldAttrs.postInstall + ''
rm -r $out/${pkgs.python3.sitePackages}/froide_govplan/templates
ln -sf /var/lib/froide-govplan/templates $out/${pkgs.python3.sitePackages}/froide_govplan/templates
cp -r froide_govplan/static $out/${pkgs.python3.sitePackages}/froide_govplan/
'';
});
})
];
};
modules = [
({ lib, config, pkgs, ... }: {
virtualisation = {
memorySize = 8000;
diskSize = 4096;
cores = 4;
};
disabledModules = [ "services/web-apps/froide-govplan.nix" ];
imports = [ ./froide-govplan.nix ];
services.froide-govplan = {
enable = true;
package = pkgs.froide-govplan;
settings = {
DEBUG = lib.mkForce true;
CSRF_TRUSTED_ORIGINS = [ "http://localhost:8080" ];
};
};
nixos-shell.mounts.extraMounts = {
"/var/lib/froide-govplan/templates" = {
target = /home/onny/projects/froide-govplan/froide_govplan/templates;
cache = "none";
};
};
system.stateVersion = "25.05";
services.getty.autologinUser = "root";
})
];
};
packages = { inherit start; };
defaultPackage.x86_64-linux = start;
};
}

View file

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

View file

@ -71,9 +71,52 @@
<div class="col-lg-10 mx-auto p-4 py-md-5"> <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 pb-3 mb-5 border-bottom">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none text-reset"> <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> <span class="fs-4">VerwaltungsTracker</span>
</a> </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> </header>
<main> <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 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"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
{% for section in sections %} {% for section in sections %}

View file

@ -12,6 +12,7 @@ from .views import (
about, about,
team, team,
support, support,
mapview,
) )
app_name = "govplan" app_name = "govplan"
@ -24,6 +25,7 @@ urlpatterns = [
path("about", about, name="about"), path("about", about, name="about"),
path("team", team, name="team"), path("team", team, name="team"),
path("support", support, name="support"), path("support", support, name="support"),
path("mapview", mapview, name="mapview"),
path( path(
pgettext_lazy("url part", "<slug:gov>/plan/<slug:plan>/"), pgettext_lazy("url part", "<slug:gov>/plan/<slug:plan>/"),
GovPlanDetailView.as_view(), GovPlanDetailView.as_view(),

View file

@ -180,4 +180,7 @@ def team(request):
return render(request, "froide_govplan/team.html") return render(request, "froide_govplan/team.html")
def support(request): 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")