rudimentary implementation of a lightbox

django_lostplaces/lostplaces/static/main.css

@@ -611,6 +611,12 @@ body {
   font-weight: bold;
   cursor: pointer;
   white-space: nowrap; }
+  .LP-Button--fullWidth {
+    text-align: center; }
+  .LP-Button.LP-Link {
+    display: block; }
+    .LP-Button.LP-Link:hover {
+      color: #f9f9f9; }
   .LP-Button:active {
     background-color: #76323F;
     color: #f9f9f9; }
@@ -717,6 +723,10 @@ body {
   margin: 0;
   padding: 0; }
 
+.LP-Figure {
+  padding: 0;
+  margin: 0; }
+
 .LP-Logo {
   max-width: 100%;
   max-height: 100%;
@@ -923,7 +933,8 @@ body {
       justify-content: space-between;
       align-items: flex-start;
       gap: unset; }
-      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline, .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph {
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline,
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph {
         font-size: unset; }
       .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Info .LP-Headline {
         font-size: 28px; }
@@ -941,7 +952,12 @@ body {
       overflow: hidden;
       order: unset; }
       .LP-PlaceTeaser--extended .LP-PlaceTeaser__Description .LP-Paragraph {
-        font-size: unset; }
+        font-size: unset;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis; }
     .LP-PlaceTeaser--extended .LP-PlaceTeaser__Image {
       height: 165px;
       width: 280px;
@@ -1692,9 +1708,62 @@ body {
       top: 7.8125px; }
   .LP-ImageGrid__Item > .LP-Link:hover + .LP-ImageGrid__DeleteItem, .LP-ImageGrid__DeleteItem:hover {
     visibility: visible; }
+  .LP-ImageGrid__LightBox {
+    visibility: hidden;
+    display: none;
+    position: fixed;
+    pointer-events: none;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(86, 86, 86, 0.9);
+    padding: 2rem;
+    padding-bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 30;
+    top: 0;
+    left: 0;
+    box-sizing: border-box; }
+    .LP-ImageGrid__LightBox:target {
+      visibility: visible;
+      display: grid;
+      grid-template-areas: 'picture picture' 'previous next';
+      grid-template-rows: 1fr 4rem;
+      grid-template-columns: 1fr 1fr;
+      pointer-events: initial; }
+  .LP-ImageGrid__FullSizeImage {
+    grid-area: picture; }
+  .LP-ImageGrid__Previous {
+    grid-area: previous;
+    align-self: center;
+    justify-self: end; }
+  .LP-ImageGrid__Next {
+    grid-area: next;
+    align-self: center;
+    justify-self: start; }
+  .LP-ImageGrid__Previous, .LP-ImageGrid__Next {
+    padding: 25px;
+    color: #D7CEC7;
+    text-decoration: none;
+    font-family: "Montserrat", Helvetica, sans-serif;
+    font-weight: bold;
+    font-size: 20px; }
+  .LP-ImageGrid__Close {
+    position: fixed;
+    right: 1rem;
+    top: 1rem;
+    left: unset;
+    visibility: visible;
+    opacity: 1; }
 
 .LP-Map {
   margin-bottom: 25px; }
+  .LP-Map--wide {
+    height: 300px; }
+  .LP-Map--full {
+    height: 100%;
+    width: 100%; }
   .LP-Map .ol-attribution {
     font-family: "Montserrat", Helvetica, sans-serif;
     color: #565656; }

django_lostplaces/lostplaces/templates/partials/placeImageGrid.html

@@ -1,4 +1,5 @@
 	{% load static %}
+	{% load lostplaces %}
 	
 	{% if headline %}
 	<h1 class="LP-Headline">{{headline}}</h1>
@@ -6,8 +7,9 @@
 	<div class="LP-ImageGrid">
 		<ul class="LP-ImageGrid__Container">
 		{% for image in image_list %}
-			<li class="LP-ImageGrid__Item">
+			<li id="thumbnail{{forloop.counter}}" class="LP-ImageGrid__Item">
-				{% include 'partials/image.html' with source_url=image.filename.thumbnail.url link_url=image.filename.large.url %}
+				{{ "#image"|add:forloop.counter }}
+				{% include 'partials/image.html' with source_url=image.filename.thumbnail.url link_url="#image"|addstr:forloop.counter %}
 			{% if user.explorer == image.submitted_by%}
 				<span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
 					<a href="{% url 'place_image_delete' pk=image.id %}" class="LP-Link">
@@ -15,6 +17,20 @@
 					</a>
 				</span>
 			{% endif %}
+			<div id="image{{forloop.counter}}" class="LP-ImageGrid__LightBox">
+				<img class="LP-ImageGrid__FullSizeImage" src="{{image.filename.large.url}}" loading="lazy"/>
+				{% if forloop.counter < image_list|length %}
+					<a href="#image{{forloop.counter|add:1}}" class="LP-ImageGrid__Next">Next</a>
+				{% endif %}
+				{% if forloop.counter > 1 %}
+				<a href="#image{{forloop.counter|add:-1}}" class="LP-ImageGrid__Previous">Previous</a>
+				{% endif %}
+				<span class="LP-ImageGrid__Close LP-ImageGrid__DeleteItem" title="Schließen">
+					<a href="#thumbnail{{forloop.counter}}" class="LP-Link">
+						<img class="LP-Icon" src="{% static 'icons/cancel.svg' %}"/>
+					</a>
+				</span>
+			</div>
 			</li>
 		{% endfor %}
 		</ul>

django_lostplaces/lostplaces/templatetags/lostplaces.py

@@ -34,6 +34,9 @@ def proper_paginate(paginator, current_page, neighbors=2):
         return page_list[:(2*neighbors + 1)]
     return paginator.page_range
 
+@register.filter
+def addstr(value, parameter):
+    return str(value) + str(parameter)
 
 class VariableNode(template.Node):
     def __init__(self, name, content=None):