<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<style>
- .leaflet-popup-content h2 {
- margin-top: 0;
- padding-top: 0;
- border: 0;
- }
- .l-books {
+ .leaflet-popup-content h2 {
+ margin-top: 0;
+ padding-top: 0;
+ border: 0;
+ }
+ .l-popup-books {
+ display: flex;
+ flex-wrap: wrap;
width: 100px;
+ gap: 5px;
+ }
+ .l-popup-books img {
+ display: block;
}
</style>
{% endblock %}
$.get(
'/pinezki/popup/' + m.target.options.mid,
function(data) {
- let p = L.popup({minWidth: 106}).setLatLng(m.latlng).setContent(data);
+ d = $(data);
+ n = Math.min(3, ($('a', d).length));
+ w = 111 * n - 5;
+ let p = L.popup({minWidth: w}).setLatLng(m.latlng).setContent(data);
map.openPopup(p);
}
);
{% load thumbnail %}
<h2 class="header">{{ entity.label }}</h2>
-<div class="l-book_list">
+<div class="l-popup-books">
{% for ref in entity.reference_set.all %}
<a href='/katalog/lektura/{{ ref.book.slug }}.html#{{ ref.first_section }}' target="_blank">
{% thumbnail ref.book.cover_clean '150x150' as th %}