Better layout for map marker legend

This commit is contained in:
s3lph 2023-01-04 04:32:01 +01:00
parent 57139eedc8
commit 9e84d7b7de
Signed by: s3lph
GPG key ID: 8AC98A811E5BEFF5

View file

@ -12,7 +12,7 @@
<link rel="prefetch" href="{{ baseurl }}static/img/leaflet-marker-red.png" />
<script src="{{ baseurl }}static/js/bootstrap.bundle.min.js"></script>
<script src="{{ baseurl }}static/js/leaflet.js"></script>
<script src="chaostreff.js"></script>
<script src="{{ baseurl }}{{ lang }}/chaostreff.js"></script>
</head>
<body>
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
@ -53,22 +53,17 @@
<main class="container-fluid">
<section id="map">
<div id="leaflet-map" class=""></div>
<aside class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
{{ legend_marker_header }}
</div>
<div class="col-lg-2 col-md-4 col-sm-12">
<img class="leaflet-marker-inline" src="{{ baseurl }}static/img/leaflet-marker-green.png" /> {{ legend_marker_green }}
</div>
<div class="col-lg-2 col-md-4 col-sm-12">
<img class="leaflet-marker-inline" src="{{ baseurl }}static/img/leaflet-marker-red.png" /> {{ legend_marker_red }}
</div>
<div class="col-lg-2 col-md-4 col-sm-12">
<img class="leaflet-marker-inline" src="{{ baseurl }}static/img/leaflet-marker-blue.png" /> {{ legend_marker_blue }}
</div>
</div>
</aside>
<p>{{ legend_marker_header }}</p>
<p>
<img class="leaflet-marker-inline" src="{{ baseurl }}static/img/leaflet-marker-green.png" />
{{ legend_marker_green }}
<br />
<img class="leaflet-marker-inline" src="{{ baseurl }}static/img/leaflet-marker-red.png" />
{{ legend_marker_red }}
<br />
<img class="leaflet-marker-inline" src="{{ baseurl }}static/img/leaflet-marker-blue.png" />
{{ legend_marker_blue }}
</p>
</section>
<section id="spaces">
<h2 class="mt-2-lg mb-1-lg">{{ h_spaces }}</h2>