From f27fc71a0187cfe175044592d49ba5ad6ee4349e Mon Sep 17 00:00:00 2001
From: Commander1024 <commander@commander1024.de>
Date: Wed, 12 Aug 2020 23:20:32 +0200
Subject: [PATCH] Added pagination in PlaceList template.

---
 .../templates/place/place_list.html           | 98 ++++++++++++-------
 1 file changed, 62 insertions(+), 36 deletions(-)

diff --git a/lostplaces/lostplaces_app/templates/place/place_list.html b/lostplaces/lostplaces_app/templates/place/place_list.html
index 9c971c5..fd8e4f5 100644
--- a/lostplaces/lostplaces_app/templates/place/place_list.html
+++ b/lostplaces/lostplaces_app/templates/place/place_list.html
@@ -7,43 +7,69 @@
 <div class="LP-PlaceList">
     <h1 class="LP-Headline">Listing our places</h1>
     <ul class="LP-PlaceList__List">
-		{% for place in place_list %}
-			<li class="LP-PlaceList__Item">
-				<a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
-					<article class="LP-PlaceTeaser LP-PlaceTeaser--extended">
-						<div class="LP-PlaceTeaser__Image">
-							<img class="LP-Image" src="{{ place.images.first.filename.thumbnail.url }}" />
-						</div>
-						<div class="LP-PlaceTeaser__Meta">
-							<div class="LP-PlaceTeaser__Info">
-								<span class="LP-PlaceTeaser__Title">
-									<h2 class="LP-Headline LP-Headline--teaser">{{place.name}}</h2>
-								</span>
-								<span class="LP-PlaceTeaser__Detail">
-									<p class="LP-Paragraph">{{place.location}}</p>
-								</span>
-							</div>
-							<div class="LP-PlaceTeaser__Description">
-								<p class="LP-Paragraph">
-									{% if place.description|length > 210 %}
-										{{place.description|truncatechars:210|truncatewords:-1}}
-									{% else %}
-										{{place.description}}
-									{% endif %}
-								</p>
-							</div>
-							<div class="LP-PlaceTeaser__Icons">
-								<ul class="LP-Icon__List">
-									<li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/favourite.svg' %}" /></li>
+        {% for place in place_list %}
+            <li class="LP-PlaceList__Item">
+                <a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
+                    <article class="LP-PlaceTeaser LP-PlaceTeaser--extended">
+                        <div class="LP-PlaceTeaser__Image">
+                            <img class="LP-Image" src="{{ place.images.first.filename.thumbnail.url }}" />
+                        </div>
+                        <div class="LP-PlaceTeaser__Meta">
+                            <div class="LP-PlaceTeaser__Info">
+                                <span class="LP-PlaceTeaser__Title">
+                                    <h2 class="LP-Headline LP-Headline--teaser">{{place.name}}</h2>
+                                </span>
+                                <span class="LP-PlaceTeaser__Detail">
+                                    <p class="LP-Paragraph">{{place.location}}</p>
+                                </span>
+                            </div>
+                            <div class="LP-PlaceTeaser__Description">
+                                <p class="LP-Paragraph">
+                                    {% if place.description|length > 210 %}
+                                        {{place.description|truncatechars:210|truncatewords:-1}}
+                                    {% else %}
+                                        {{place.description}}
+                                    {% endif %}
+                                </p>
+                            </div>
+                            <div class="LP-PlaceTeaser__Icons">
+                                <ul class="LP-Icon__List">
+                                    <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/favourite.svg' %}" /></li>
                                 <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/location.svg' %}" /></li>
                                 <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/flag.svg' %}" /></li>
-								</ul>
-							</div>
-						</div>
-					</article>
-				</a>
-			</li>
-		{% endfor %}
-	</ul>
+                                </ul>
+                            </div>
+                        </div>
+                    </article>
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+    
+    <div class="LP-Pagination">
+    <ul class="LP-Pagination__List">
+        {% if page_obj.has_previous %}
+            <li class="LP-Pagination__Item LP-Pagination__Item--previous">
+                <a href="?page=1"><class="LP-Link"><span class="LP-Pagination__Previous">&lt; &lt; first</span></a>
+            </li>
+            <li class="LP-Pagination__Item LP-Pagination__Item--number">
+                <a href="?page={{ page_obj.previous_page_number }}"><class="LP-Link"><span class="LP-Pagination__Number">&lt; previous</span></a>
+            </li>
+        {% endif %}
+        {% for page_obj in page_obj.paginator %}
+            <li class="LP-Pagination__Item LP-Pagination__Item--number">
+                <a href="?page={{page_obj.number}}"><class="LP-Link"><span class="LP-Pagination__Number">{{page_obj.number}}</span></a>
+            </li>
+        {% endfor %}
+        {% if page_obj.has_next %}
+            <li class="LP-Pagination__Item LP-Pagination__Item--next">
+                <a href="?page={{ page_obj.next_page_number }}"><class="LP-Link"><span class="LP-Pagination__Next">&gt; next</span></a>
+            </li>
+            <li class="LP-Pagination__Item LP-Pagination__Item--next">
+                <a href="?page={{ page_obj.paginator.num_pages }}"><class="LP-Link"><span class="LP-Pagination__Next">&gt; &gt; last</span></a>
+            </li>
+        {% endif %}
+    </ul>
+    </div>
 </div>
 {% endblock maincontent %}
\ No newline at end of file