Converted indentation to spaces globally.

.gitignore

@@ -66,6 +66,10 @@ coverage.xml
 *.mo
 
 # Django stuff:
+# exclude migrations from repository. These should be created locally, matching local DB requirements.
+# lostplaces/manage.py makemigrations && lostplaces/manage.py migrate
+
+lostplaces/lostplaces_app/migrations/
 
 # pyenv
 .python-version

lostplaces/lostplaces_app/migrations/0001_initial.py

@@ -1,67 +0,0 @@
-# Generated by Django 3.0.8 on 2020-07-28 19:00
-
-import django.contrib.auth.models
-import django.contrib.auth.validators
-from django.db import migrations, models
-import django.db.models.deletion
-import django.utils.timezone
-import django_thumbs.fields
-import lostplaces_app.models
-
-
-class Migration(migrations.Migration):
-
-    initial = True
-
-    dependencies = [
-        ('auth', '0011_update_proxy_permissions'),
-    ]
-
-    operations = [
-        migrations.CreateModel(
-            name='Place',
-            fields=[
-                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('name', models.CharField(max_length=50)),
-                ('location', models.CharField(max_length=50)),
-                ('latitude', models.FloatField()),
-                ('longitude', models.FloatField()),
-                ('description', models.TextField()),
-            ],
-        ),
-        migrations.CreateModel(
-            name='PlaceImage',
-            fields=[
-                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('filename', django_thumbs.fields.ImageThumbsField(max_length=50, sizes=({'code': 'thumbnail', 'wxh': '390x390'}, {'code': 'hero', 'wxh': '700x700'}, {'code': 'large', 'wxh': '1920x1920'}), upload_to=lostplaces_app.models.generate_image_upload_path)),
-                ('description', models.TextField(blank=True)),
-                ('place', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='images', to='lostplaces_app.Place')),
-            ],
-        ),
-        migrations.CreateModel(
-            name='Explorer',
-            fields=[
-                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('password', models.CharField(max_length=128, verbose_name='password')),
-                ('last_login', models.DateTimeField(blank=True, null=True, verbose_name='last login')),
-                ('is_superuser', models.BooleanField(default=False, help_text='Designates that this user has all permissions without explicitly assigning them.', verbose_name='superuser status')),
-                ('username', models.CharField(error_messages={'unique': 'A user with that username already exists.'}, help_text='Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.', max_length=150, unique=True, validators=[django.contrib.auth.validators.UnicodeUsernameValidator()], verbose_name='username')),
-                ('first_name', models.CharField(blank=True, max_length=30, verbose_name='first name')),
-                ('last_name', models.CharField(blank=True, max_length=150, verbose_name='last name')),
-                ('email', models.EmailField(blank=True, max_length=254, verbose_name='email address')),
-                ('is_staff', models.BooleanField(default=False, help_text='Designates whether the user can log into this admin site.', verbose_name='staff status')),
-                ('is_active', models.BooleanField(default=True, help_text='Designates whether this user should be treated as active. Unselect this instead of deleting accounts.', verbose_name='active')),
-                ('date_joined', models.DateTimeField(default=django.utils.timezone.now, verbose_name='date joined')),
-                ('groups', models.ManyToManyField(blank=True, help_text='The groups this user belongs to. A user will get all permissions granted to each of their groups.', related_name='user_set', related_query_name='user', to='auth.Group', verbose_name='groups')),
-                ('user_permissions', models.ManyToManyField(blank=True, help_text='Specific permissions for this user.', related_name='user_set', related_query_name='user', to='auth.Permission', verbose_name='user permissions')),
-            ],
-            options={
-                'verbose_name': 'user',
-                'verbose_name_plural': 'users',
-                'abstract': False,
-            },
-            managers=[
-                ('objects', django.contrib.auth.models.UserManager()),
-            ],
-        ),
-    ]

lostplaces/lostplaces_app/migrations/0002_place_submitted_by.py

@@ -1,20 +0,0 @@
-# Generated by Django 3.0.8 on 2020-07-29 16:29
-
-from django.conf import settings
-from django.db import migrations, models
-import django.db.models.deletion
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('lostplaces_app', '0001_initial'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='place',
-            name='submitted_by',
-            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.AUTH_USER_MODEL),
-        ),
-    ]

lostplaces/lostplaces_app/migrations/0003_auto_20200729_1822.py

@@ -1,20 +0,0 @@
-# Generated by Django 3.0.8 on 2020-07-29 18:22
-
-from django.conf import settings
-from django.db import migrations, models
-import django.db.models.deletion
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('lostplaces_app', '0002_place_submitted_by'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='place',
-            name='submitted_by',
-            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='places', to=settings.AUTH_USER_MODEL),
-        ),
-    ]

lostplaces/lostplaces_app/migrations/0004_placeimage_submitted_by.py

@@ -1,20 +0,0 @@
-# Generated by Django 3.0.8 on 2020-07-30 09:18
-
-from django.conf import settings
-from django.db import migrations, models
-import django.db.models.deletion
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('lostplaces_app', '0003_auto_20200729_1822'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='placeimage',
-            name='submitted_by',
-            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='images', to=settings.AUTH_USER_MODEL),
-        ),
-    ]

lostplaces/lostplaces_app/migrations/0005_voucher.py

@@ -1,22 +0,0 @@
-# Generated by Django 3.0.8 on 2020-08-01 10:29
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('lostplaces_app', '0004_placeimage_submitted_by'),
-    ]
-
-    operations = [
-        migrations.CreateModel(
-            name='Voucher',
-            fields=[
-                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('code', models.CharField(max_length=10)),
-                ('created', models.DateField(auto_now_add=True)),
-                ('expires', models.DateField()),
-            ],
-        ),
-    ]

lostplaces/lostplaces_app/migrations/0006_auto_20200801_1037.py

@@ -1,22 +0,0 @@
-# Generated by Django 3.0.8 on 2020-08-01 10:37
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('lostplaces_app', '0005_voucher'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='voucher',
-            name='id',
-        ),
-        migrations.AlterField(
-            model_name='voucher',
-            name='code',
-            field=models.CharField(max_length=10, primary_key=True, serialize=False, unique=True),
-        ),
-    ]

lostplaces/lostplaces_app/migrations/0007_auto_20200801_1039.py

@@ -1,18 +0,0 @@
-# Generated by Django 3.0.8 on 2020-08-01 10:39
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('lostplaces_app', '0006_auto_20200801_1037'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='voucher',
-            name='created',
-            field=models.DateTimeField(auto_now_add=True),
-        ),
-    ]

lostplaces/lostplaces_app/migrations/0008_auto_20200801_1044.py

@@ -1,24 +0,0 @@
-# Generated by Django 3.0.8 on 2020-08-01 10:44
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('lostplaces_app', '0007_auto_20200801_1039'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='voucher',
-            name='id',
-            field=models.AutoField(auto_created=True, default=0, primary_key=True, serialize=False, verbose_name='ID'),
-            preserve_default=False,
-        ),
-        migrations.AlterField(
-            model_name='voucher',
-            name='code',
-            field=models.CharField(max_length=10, unique=True),
-        ),
-    ]

lostplaces/lostplaces_app/migrations/0009_place_submitted_when.py

@@ -1,18 +0,0 @@
-# Generated by Django 3.0.9 on 2020-08-03 16:36
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('lostplaces_app', '0008_auto_20200801_1044'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='place',
-            name='submitted_when',
-            field=models.DateTimeField(auto_now_add=True, null=True),
-        ),
-    ]

lostplaces/lostplaces_app/migrations/0010_auto_20200803_1707.py

@@ -1,20 +0,0 @@
-# Generated by Django 3.0.9 on 2020-08-03 17:07
-
-from django.db import migrations
-import easy_thumbnails.fields
-import lostplaces_app.models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('lostplaces_app', '0009_place_submitted_when'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='placeimage',
-            name='filename',
-            field=easy_thumbnails.fields.ThumbnailerImageField(upload_to=lostplaces_app.models.generate_image_upload_path),
-        ),
-    ]

lostplaces/lostplaces_app/static/icons/hamburger_menu.svg

@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z"/></svg>

lostplaces/lostplaces_app/static/main.css

@@ -13,23 +13,26 @@ html {
 
 body {
   height: 100%;
-  margin: 0; }
+  margin: 0;
+  padding: 0; }
 
-.LP-Main {
+.LP-Wrapper__Site {
-  display: table;
+  display: grid;
-  flex-direction: row-reverse;
+  grid-template-columns: 250px 1fr;
-  height: calc(100% - 61px);
+  grid-template-rows: auto 1fr;
-  width: 100%; }
+  grid-template-areas: "header header" "sidebar content";
-  .LP-Main .LP-Main__Content {
+  margin: 0;
-    display: table-cell;
+  padding: 0;
-    width: calc(100% - 300px);
+  min-height: 100vh; }
-    min-height: 1px;
+
-    padding: 25px; }
+.LP-Main__Content {
-  .LP-Main .LP-Main__Sidebar {
+  min-height: 1px;
-    display: table-cell;
+  padding: 25px;
-    width: 250px;
+  grid-area: content; }
-    flex-grow: 0;
+
-    height: 100%; }
+.LP-Main__Sidebar {
+  grid-area: sidebar;
+  background-color: #f9f9f9; }
 
 .LP-Section {
   clear: both;
@@ -38,6 +41,13 @@ body {
   .LP-Section .LP-Headline {
     margin-left: -25px; }
 
+.LP-Menu__Trigger {
+  display: none; }
+
+@media (max-width: 1000px) {
+  .LP-Wrapper__Site {
+    grid-template-columns: 187.5px 1fr; } }
+
 @media (max-width: 650px) {
   .LP-Section {
     padding-left: 0;
@@ -45,6 +55,44 @@ body {
     .LP-Section .LP-Headline {
       margin: 0; } }
 
+@media (max-width: 450px) {
+  .LP-Main__Sidebar {
+    max-width: 100vw; } }
+
+@media (max-width: 650px) {
+  .LP-Wrapper__Site {
+    grid-template-columns: 0 1fr; }
+  .LP-Main__Sidebar {
+    grid-area: unset;
+    width: 250px;
+    z-index: 15;
+    position: fixed;
+    left: -251px;
+    height: 100vh;
+    top: 60px;
+    border-right: 1px solid #C09F80;
+    transition: left 0.3s; }
+    .LP-Main__Sidebar--hidden {
+      visibility: hidden; }
+  #toggle_sidebar:checked ~ .LP-Main__Sidebar {
+    left: 0; }
+  #toggle_sidebar ~ .LP-Main__Sidebar {
+    left: -251px; }
+  .LP-Menu__TriggerLabel {
+    z-index: 20;
+    height: 60px;
+    width: 60px;
+    background-image: url("icons/hamburger_menu.svg");
+    background-repeat: no-repeat;
+    background-clip: content-box;
+    background-position: center;
+    position: fixed; }
+  .LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel {
+    background-color: darkgray;
+    filter: invert(1); }
+  .LP-Main__Content {
+    margin-top: 60px; } }
+
 .LP-Link {
   color: #565656;
   text-decoration: none;
@@ -208,12 +256,14 @@ body {
 .LP-Message {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  justify-content: center;
+  align-items: stretch;
   background-color: #f9f9f9;
   font-family: Montserrat, Helvetica, sans-serif;
   border-radius: 3px;
   font-weight: bold;
-  box-shadow: 0 0 2px #565656; }
+  box-shadow: 0 0 2px #565656;
+  overflow: hidden; }
   .LP-Message--error .LP-Message__Icon {
     background-color: #02979e;
     background-image: url("icons/error.png"); }
@@ -233,11 +283,72 @@ body {
     background-size: 40px 40px;
     background-repeat: no-repeat;
     background-position: center;
-    height: 50px;
+    height: 100%;
+    min-height: 50px;
     width: 50px;
-    filter: invert(1); }
+    filter: invert(1);
+    flex-shrink: 0;
+    flex-grow: 0; }
   .LP-Message .LP-Message__Text {
-    padding: 0 15px; }
+    padding: 0 15px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 8px; }
+
+.LP-Pagination {
+  font-family: Montserrat, Helvetica, sans-serif;
+  font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  justify-content: center; }
+  .LP-Pagination .LP-Pagination__List {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    padding-left: 0;
+    padding-right: 0; }
+  .LP-Pagination .LP-Pagination__Item {
+    margin: 0 4px; }
+    .LP-Pagination .LP-Pagination__Item--disabled {
+      color: #b6b6b6; }
+      .LP-Pagination .LP-Pagination__Item--disabled .LP-Link {
+        color: #b6b6b6;
+        cursor: default; }
+        .LP-Pagination .LP-Pagination__Item--disabled .LP-Link:hover {
+          background-color: unset;
+          color: unset; }
+    .LP-Pagination .LP-Pagination__Item--current .LP-Link {
+      background-color: #D7CEC7; }
+      .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
+        background-color: #D7CEC7;
+        color: #565656; }
+  .LP-Pagination .LP-Link {
+    padding: 15px 20px;
+    vertical-align: sub;
+    border-radius: 2px; }
+    .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
+      background-color: #D7CEC7;
+      color: #565656; }
+  .LP-Pagination .LP-Icon {
+    font-size: larger; }
+
+@media (max-width: 1000px) {
+  .LP-Pagination .LP-Link {
+    padding: 10px 15px; }
+  .LP-Pagination .LP-Pagination__Item--other .LP-Text {
+    display: none; } }
+
+@media (max-width: 650px) {
+  .LP-Pagination .LP-Pagination__Item {
+    margin: 0 1px; }
+    .LP-Pagination .LP-Pagination__Item .LP-Link {
+      padding: 13px 16px; } }
+
+@media (max-width: 450px) {
+  .LP-Pagination .LP-Pagination__Item .LP-Link {
+    padding: 8px 11px; } }
 
 .LP-Content {
   padding: 35px; }
@@ -351,7 +462,6 @@ body {
     border-left: none;
     min-width: 60px;
     background-color: #f9f9f9;
-    height: 100%;
     padding-top: 25px; }
     .LP-Menu--sidebar .LP-Menu__List {
       flex-direction: column; }
@@ -400,12 +510,14 @@ body {
   align-items: center;
   justify-content: space-between;
   height: 60px;
-  box-shadow: 0 0 2px #C09F80; }
+  box-shadow: 0 0 2px #C09F80;
+  grid-area: header;
+  background-color: white;
+  padding-left: 25px; }
   .LP-Header__Navigation {
     flex-grow: 2; }
   .LP-Header__Logo {
     height: 45px;
-    margin: 25px;
     object-fit: cover;
     max-height: 100%;
     width: 225px;
@@ -436,6 +548,13 @@ body {
   .LP-Header__Navigation {
     width: 100%; } }
 
+@media (max-width: 650px) {
+  .LP-Header {
+    padding-left: 60px;
+    width: calc(100% - 60px);
+    position: fixed;
+    z-index: 10; } }
+
 .LP-PlaceGrid .LP-PlaceGrid__Grid {
   margin: 0;
   padding: 0;
@@ -459,9 +578,11 @@ body {
       border-left: 2px #565656 solid; }
   .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
     max-width: 900px;
-    min-width: 450px;
     margin: 18px 0; }
 
+.LP-PlaceList .LP-Pagination {
+  margin-top: 50px; }
+
 .LP-LinkList__List {
   list-style-type: none;
   display: grid;

lostplaces/lostplaces_app/templates/global.html

@@ -8,71 +8,89 @@
         <link rel="icon" type="image/png" href="{% static 'favicon.ico' %}">
         <title>
             {% block title %}Urban Exploration{% endblock %}
-		</title>
+        </title>
-		
+        
-		{% block additional_head %}
+        {% block additional_head %}
-		{% endblock additional_head %}
+        {% endblock additional_head %}
+
+        <script>
+            document.addEventListener("DOMContentLoaded", function(){
+                    Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
+                            element.classList.add('LP-Main__Sidebar--hidden')
+                    })
+                    setTimeout(function(){
+                        Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
+                            element.classList.remove('LP-Main__Sidebar--hidden')
+                    })
+                }, 500)
+            })
+        </script>
+        
     </head>
 
     <body>
-        <header class="LP-Header">
+        <div class="LP-Wrapper__Site">
-            <div class="LP-Header__Logo">
+            <header class="LP-Header">
-                <a class="LP-Link" href="/">
+                <div class="LP-Header__Logo">
-                    <img src="{% static 'logo.png' %}" class="LP-Image" />
+                    <a class="LP-Link" href="/">
-                </a>    
+                        <img src="{% static 'logo.png' %}" class="LP-Image" />
-            </div>
+                    </a>    
-            <div class="LP-Header__UserInformation">
+                </div>
-                <span class="LP-Paragraph">
+                <div class="LP-Header__UserInformation">
-                    {% if user.is_authenticated %}
+                    <span class="LP-Paragraph">
-                        Hi {{ user.username }}!
+                        {% if user.is_authenticated %}
-							<a class="LP-Link" href="{% url 'logout' %}"><span class="LP-Link__Text">logout</span></a> 
+                            Hi {{ user.username }}!
-							{% if user.is_superuser %}
+                                <a class="LP-Link" href="{% url 'logout' %}"><span class="LP-Link__Text">logout</span></a> 
-							| <a class="LP-Link" href="{% url 'admin:index' %}" target="_blank"><span class="LP-Link__Text">admin</span></a>
+                                {% if user.is_superuser %}
-							{% endif %}
+                                | <a class="LP-Link" href="{% url 'admin:index' %}" target="_blank"><span class="LP-Link__Text">admin</span></a>
-							
+                                {% endif %}
-                        {% else %}
+                                
-                            You are not logged in.
+                            {% else %}
-                            <a class="LP-Link" href="{% url 'login' %}"><span class="LP-Link__Text">login</span></a> |
+                                You are not logged in.
-                            <a class="LP-Link" href="{% url 'signup' %}"><span class="LP-Link__Text">signup</span></a>
+                                <a class="LP-Link" href="{% url 'login' %}"><span class="LP-Link__Text">login</span></a> |
-                        {% endif %}
+                                <a class="LP-Link" href="{% url 'signup' %}"><span class="LP-Link__Text">signup</span></a>
-                </span>
+                            {% endif %}
-            </div>
+                    </span>
-        </header>
+                </div>
-        <article class="LP-Main">
+            </header>
-            <section class="LP-Main__Sidebar">
+            <input id="toggle_sidebar" class="LP-Menu__Trigger" type="checkbox"/>
+            <label id="toggle_sidebar_label" for="toggle_sidebar" class="LP-Menu__TriggerLabel"></label>
+            <aside class="LP-Main__Sidebar">
                 <nav class="LP-Menu LP-Menu--sidebar">
                     <ul class="LP-Menu__List">
                         <li class="LP-Menu__Item"><a href="/" class="LP-Link"><span class="LP-Link__Text">Home</span></a></li>
                         <li class="LP-Menu__Item"><a href="" class="LP-Link"><span class="LP-Link__Text">About</span></a></li>
-						<li class="LP-Menu__Item"><a href="" class="LP-Link"><span class="LP-Link__Text">Contact</span></a></li>
+                        <li class="LP-Menu__Item"><a href="" class="LP-Link"><span class="LP-Link__Text">Contact</span></a></li>
-						{% block additional_menu_items %}
+                        {% block additional_menu_items %}
-						{% endblock additional_menu_items %}
+                        {% endblock additional_menu_items %}
-						<li class="LP-Menu__Item LP-Menu__Item--additional"><a href="{% url 'place_create'%}" class="LP-Link"><span class="LP-Link__Text">Create place</span></a></li>
+                        <li class="LP-Menu__Item LP-Menu__Item--additional"><a href="{% url 'place_create'%}" class="LP-Link"><span class="LP-Link__Text">Create place</span></a></li>
-						<li class="LP-Menu__Item LP-Menu__Item--additional"><a href="{% url 'place_list'%}" class="LP-Link"><span class="LP-Link__Text">See all places</span></a></li>
+                        <li class="LP-Menu__Item LP-Menu__Item--additional"><a href="{% url 'place_list'%}" class="LP-Link"><span class="LP-Link__Text">See all places</span></a></li>
                     </ul>
                 </nav>
-            </section>
+            </aside>
-            <section class="LP-Main__Content">
+            <main class="LP-Main__Content">
-				{% if messages %}
+                {% if messages %}
-				<div class="LP-MessageList">
+                <div class="LP-MessageList">
-					<ul class="LP-MessageList__List">
+                    <ul class="LP-MessageList__List">
-						{% for message in messages %}
+                        {% for message in messages %}
-						<li class="LP-MessageList__Item">
+                        <li class="LP-MessageList__Item">
-							<div class="LP-Message {% if message.tags %}LP-Message--{{ message.tags }}{% endif %}">
+                            <div class="LP-Message {% if message.tags %}LP-Message--{{ message.tags }}{% endif %}">
-								<div class="LP-Message__Icon">
+                                <div>
-								</div>
+                                    <div class="LP-Message__Icon">
-								<div class="LP-Message__Text">
+                                    </div>
-									{{ message }}
+                                </div>
-								</div>
+                                <div class="LP-Message__Text">
-							</div>
+                                    {{ message }}
-						</li>
+                                </div>
-						{% endfor %}
+                            </div>
-					</ul>
+                        </li>
-				</div>
+                        {% endfor %}
-				{% endif %}
+                    </ul>
+                </div>
+                {% endif %}
                 {% block maincontent %}
                 {% endblock maincontent %}
-            </section>
+            </main>
-        </article>
+        </div>
     </body>
 </html>

lostplaces/lostplaces_app/templates/partials/nav/pagination.html

@@ -0,0 +1,74 @@
+{% load lostplaces %}
+
+{% if is_paginated %}
+    <div class="LP-Pagination">
+        <ul class="LP-Pagination__List">
+            {% if page_obj.has_previous %}
+            <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--first">
+                <a href="?page=1" class="LP-Link">
+                    <span class="LP-Icon">⟪</span>
+                    <span class="LP-Text">First</span>
+                </a>
+            </li>
+                <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--previous">
+                    <a href="?page={{ page_obj.previous_page_number }}" class="LP-Link">
+                        <span class="LP-Icon">⟨</span>
+                        <span class="LP-Text">Previous</span>
+                    </a>
+                </li>
+            {% else %}
+                <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--first LP-Pagination__Item--disabled">
+                    <a href="#" class="LP-Link">
+                        <span class="LP-Icon">⟪</span>
+                        <span class="LP-Text">First</span>
+                    </a>
+                </li>
+                <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--previous LP-Pagination__Item--disabled">
+                    <a href="#" class="LP-Link">
+                        <span class="LP-Icon">⟨</span>
+                        <span class="LP-Text">Previous</span>
+                    </a>
+                </li>
+            {% endif %}
+            
+            {% for i in page_obj.paginator|proper_paginate:page_obj.number %}
+                {% if i == page_obj.number %}
+                    <li class="LP-Pagination__Item LP-Pagination__Item--current">
+                {% else %}
+                    <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
+                {% endif %}
+                        <a href="?page={{i}}" class="LP-Link">
+                            <span class="LP-Text">{{i}}</span>
+                        </a>
+                    </li>
+            {% endfor %}
+            
+            {% if page_obj.has_next %}
+            <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next">
+                <a href="?page={{ page_obj.next_page_number }}" class="LP-Link">
+                    <span class="LP-Text">Next</span>
+                    <span class="LP-Icon">⟩</span>
+                </a>
+            </li>
+            <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last">
+                <a href="?page={{ page_obj.paginator.num_pages }}" class="LP-Link">
+                    <span class="LP-Text">Last</span>
+                    <span class="LP-Icon">⟫</span>
+                </a>
+            </li>
+            {% else %}
+            <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next LP-Pagination__Item--disabled">
+                <a href="#" class="LP-Link">
+                    <span class="LP-Text">Next</span>
+                    <span class="LP-Icon">⟩</span>
+                </a>
+            <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last LP-Pagination__Item--disabled">
+                <a href="#" class="LP-Link">
+                    <span class="LP-Text">Last</span>
+                    <span class="LP-Icon">⟫</span>
+                </a>
+            </li>
+            {% endif %}
+        </ul>
+    </div>
+{% endif %}

lostplaces/lostplaces_app/templates/place/place_create.html

@@ -38,16 +38,16 @@
             </div>
         </div>
 
-		<div class="LP-Form__Composition LP-Form__Composition--buttons">
+        <div class="LP-Form__Composition LP-Form__Composition--buttons">
-			<div class="LP-Form__Field LP-Form__Button LP-Input">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
-				<button class="LP-Button">Create</button>
+                <button class="LP-Button">Create</button>
-			</div>
+            </div>
-			<div class="LP-Form__Field LP-Form__Button LP-Input">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
-				<a class="LP-Link" href="{% url 'place_list' %}">
+                <a class="LP-Link" href="{% url 'place_list' %}">
-					<button type="button" class="LP-Button LP-Button--cancel">Cancel</button>
+                    <button type="button" class="LP-Button LP-Button--cancel">Cancel</button>
-				</a>
+                </a>
-			</div>
+            </div>
-		</div>
+        </div>
     </fieldset>
 
 </form>

lostplaces/lostplaces_app/templates/place/place_delete.html

@@ -9,22 +9,22 @@
     <fieldset class="LP-Form__Fieldset">
         <legend class="LP-Form__Legend">Delete place</legend>
         {% csrf_token %}
-		<div class="LP-Form__Composition">
+        <div class="LP-Form__Composition">
-			<div class="LP-Form__Field LP-Form__InfoText">
+            <div class="LP-Form__Field LP-Form__InfoText">
-				<p class="LP-Paragraph">Are you sure you want to delete "{{place.name}}"? </p>
+                <p class="LP-Paragraph">Are you sure you want to delete "{{place.name}}"? </p>
-			</div>
+            </div>
-		</div>
+        </div>
 
-		<div class="LP-Form__Composition LP-Form__Composition--buttons">
+        <div class="LP-Form__Composition LP-Form__Composition--buttons">
-			<div class="LP-Form__Field LP-Form__Button LP-Input">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
-				<button class="LP-Button">Delete</button>
+                <button class="LP-Button">Delete</button>
-			</div>
+            </div>
-			<div class="LP-Form__Field LP-Form__Button LP-Input">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
-				<a class="LP-Link" href="{% url 'place_detail' pk=place.pk %}">
+                <a class="LP-Link" href="{% url 'place_detail' pk=place.pk %}">
-					<button type="button" class="LP-Button LP-Button--cancel">Cancel</button>
+                    <button type="button" class="LP-Button LP-Button--cancel">Cancel</button>
-				</a>
+                </a>
-			</div>
+            </div>
-		</div>
+        </div>
     </fieldset>
 </form>
 {% endblock maincontent %}

lostplaces/lostplaces_app/templates/place/place_detail.html

@@ -5,20 +5,20 @@
 {% block title %}{{place.name}}{% endblock %}
 
 {% block additional_menu_items %}
-	<li class="LP-Menu__Item LP-Menu__Item--additional"><a href="{% url 'place_edit' pk=place.pk %}" class="LP-Link"><span class="LP-Link__Text">Edit place</span></a></li>
+    <li class="LP-Menu__Item LP-Menu__Item--additional"><a href="{% url 'place_edit' pk=place.pk %}" class="LP-Link"><span class="LP-Link__Text">Edit place</span></a></li>
-	<li class="LP-Menu__Item LP-Menu__Item--additional"><a href="{% url 'place_delete' pk=place.pk %}" class="LP-Link"><span class="LP-Link__Text">Delete place</span></a></li>
+    <li class="LP-Menu__Item LP-Menu__Item--additional"><a href="{% url 'place_delete' pk=place.pk %}" class="LP-Link"><span class="LP-Link__Text">Delete place</span></a></li>
 {% endblock additional_menu_items %}
-	
+    
 {% block maincontent %}
 <article class="LP-PlaceDetail">
 
     <header class="LP-PlaceDetail__Header">
-		<h1 class="LP-Headline">{{ place.name }}</h1>
+        <h1 class="LP-Headline">{{ place.name }}</h1>
-		{% if place.images.first.filename.hero.url %}
+        {% if place.images.first.filename.hero.url %}
-			<figure class="LP-PlaceDetail__Image">
+            <figure class="LP-PlaceDetail__Image">
-				<img src="{{ place.images.first.filename.hero.url }}" class="LP-Image" />
+                <img src="{{ place.images.first.filename.hero.url }}" class="LP-Image" />
-			</figure>
+            </figure>
-		{% endif %}
+        {% endif %}
     </header>
 
     <div class="LP-PlaceDetail__Description">
@@ -29,25 +29,25 @@
         <h1 class="LP-Headline">Map-Links</h1>
         <div class="LP-LinkList">
             <ul class="LP-LinkList__List">
-				<li class="LP-LinkList__Item"><a target="_blank" href="https://www.google.com/maps?q={{place.latitude}},{{place.longitude}}" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
+                <li class="LP-LinkList__Item"><a target="_blank" href="https://www.google.com/maps?q={{place.latitude}},{{place.longitude}}" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
                 <li class="LP-LinkList__Item"><a target="_blank" href="https://www.tim-online.nrw.de/tim-online2/?center={{place.latitude}},{{place.longitude}}&icon=true&bg=dop" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
                 <li class="LP-LinkList__Item"><a target="_blank" href="http://www.openstreetmap.org/?mlat={{place.latitude}}&mlon={{place.longitude}}&zoom=16" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
             </ul>
         </div>
-	</section>
+    </section>
-	
+    
     <section class="LP-Section">
         <h1 class="LP-Headline">Bilder</h1>
         <div class="LP-ImageGrid">
             <ul class="LP-ImageGrid__List">
-				{% for place_image in place.images.all %}
+                {% for place_image in place.images.all %}
-				<li class="LP-ImageGrid__Item">
+                <li class="LP-ImageGrid__Item">
-					<a href="{{ place_image.filename.large.url }}" class="LP-Link"><img class="LP-Image" src="{{ place_image.filename.thumbnail.url }}"></a>
+                    <a href="{{ place_image.filename.large.url }}" class="LP-Link"><img class="LP-Image" src="{{ place_image.filename.thumbnail.url }}"></a>
-				</li>
+                </li>
-				{% endfor %}
+                {% endfor %}
             </ul>
         </div>
-	</section>
+    </section>
-	
+    
 </article>
 {% endblock maincontent %}

lostplaces/lostplaces_app/templates/place/place_list.html

@@ -7,37 +7,46 @@
 <div class="LP-PlaceList">
     <h1 class="LP-Headline">Listing our places</h1>
     <ul class="LP-PlaceList__List">
-		{% for place in place_list %}
+        {% for place in place_list %}
-			<li class="LP-PlaceList__Item">
+            <li class="LP-PlaceList__Item">
-				<a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
+                <a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
-					<article class="LP-PlaceTeaser LP-PlaceTeaser--extended">
+                    <article class="LP-PlaceTeaser LP-PlaceTeaser--extended">
-						<div class="LP-PlaceTeaser__Image">
+                        <div class="LP-PlaceTeaser__Image">
-							<img class="LP-Image" src="{{ place.images.first.filename.thumbnail.url }}" />
+                            <img class="LP-Image" src="{{ place.images.first.filename.thumbnail.url }}" />
-						</div>
+                        </div>
-						<div class="LP-PlaceTeaser__Meta">
+                        <div class="LP-PlaceTeaser__Meta">
-							<div class="LP-PlaceTeaser__Info">
+                            <div class="LP-PlaceTeaser__Info">
-								<span class="LP-PlaceTeaser__Title">
+                                <span class="LP-PlaceTeaser__Title">
-									<h2 class="LP-Headline LP-Headline--teaser">{{place.name}}</h2>
+                                    <h2 class="LP-Headline LP-Headline--teaser">{{place.name}}</h2>
-								</span>
+                                </span>
-								<span class="LP-PlaceTeaser__Detail">
+                                <span class="LP-PlaceTeaser__Detail">
-									<p class="LP-Paragraph">{{place.location}}</p>
+                                    <p class="LP-Paragraph">{{place.location}}</p>
-								</span>
+                                </span>
-							</div>
+                            </div>
-							<div class="LP-PlaceTeaser__Description">
+                            <div class="LP-PlaceTeaser__Description">
-								<p class="LP-Paragraph">{{place.description|truncatechars:210|truncatewords:-1}}</p>
+                                <p class="LP-Paragraph">
-							</div>
+                                    {% if place.description|length > 210 %}
-							<div class="LP-PlaceTeaser__Icons">
+                                        {{place.description|truncatechars:210|truncatewords:-1}}
-								<ul class="LP-Icon__List">
+                                    {% else %}
-									<li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/favourite.svg' %}" /></li>
+                                        {{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>
+                                </ul>
-							</div>
+                            </div>
-						</div>
+                        </div>
-					</article>
+                    </article>
-				</a>
+                </a>
-			</li>
+            </li>
-		{% endfor %}
+        {% endfor %}
-	</ul>
+    </ul>
+    
+    {% include 'partials/nav/pagination.html' %}
+
 </div>
 {% endblock maincontent %}

lostplaces/lostplaces_app/templates/place/place_update.html

@@ -37,17 +37,17 @@
                 {% include 'partials/form/inputField.html' with field=form.filename %}
             </div>
         </div>
-		
+        
-		<div class="LP-Form__Composition LP-Form__Composition--buttons">
+        <div class="LP-Form__Composition LP-Form__Composition--buttons">
-			<div class="LP-Form__Field LP-Form__Button LP-Input">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
-				<button class="LP-Button">Update</button>
+                <button class="LP-Button">Update</button>
-			</div>
+            </div>
-			<div class="LP-Form__Field LP-Form__Button LP-Input">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
-				<a class="LP-Link" href="{% url 'place_detail' pk=place.pk %}">
+                <a class="LP-Link" href="{% url 'place_detail' pk=place.pk %}">
-					<button type="button" class="LP-Button LP-Button--cancel">Cancel</button>
+                    <button type="button" class="LP-Button LP-Button--cancel">Cancel</button>
-				</a>
+                </a>
-			</div>
+            </div>
-		</div>
+        </div>
     </fieldset>
 
 </form>

lostplaces/lostplaces_app/templatetags/lostplaces.py

@@ -0,0 +1,22 @@
+from django import template
+
+register = template.Library()
+
+@register.filter(name='proper_paginate')
+def proper_paginate(paginator, current_page, neighbors=2):
+    if paginator.num_pages > 2*neighbors:
+        start_index = max(1, current_page-neighbors)
+        end_index = min(paginator.num_pages, current_page + neighbors)
+        if end_index < start_index + 2*neighbors:
+            end_index = start_index + 2*neighbors
+        elif start_index > end_index - 2*neighbors:
+            start_index = end_index - 2*neighbors
+        if start_index < 1:
+            end_index -= start_index
+            start_index = 1
+        elif end_index > paginator.num_pages:
+            start_index -= (end_index-paginator.num_pages)
+            end_index = paginator.num_pages
+        page_list = [f for f in range(start_index, end_index+1)]
+        return page_list[:(2*neighbors + 1)]
+    return paginator.page_range

lostplaces/lostplaces_app/views.py

@@ -5,6 +5,7 @@
 from django.shortcuts import render, redirect, get_object_or_404
 from django.urls import reverse_lazy
 from django.views.generic.edit import CreateView, UpdateView, DeleteView
+from django.views.generic import ListView
 from django.views import View
 from django.http import Http404
 from django.contrib import messages
@@ -48,12 +49,10 @@ class SignUpView(SuccessMessageMixin, CreateView):
     template_name = 'signup.html'
     success_message = 'User created.'
 
-class PlaceListView(IsAuthenticated, View):
+class PlaceListView(IsAuthenticated, ListView):
-    def get(self, request):
+    paginate_by = 2
-        context = {
+    model = Place
-            'place_list': Place.objects.all()
+    template_name = 'place/place_list.html'
-        }
-        return render(request, 'place/place_list.html', context)
 
 class PlaceDetailView(IsAuthenticated, View):
     def get(self, request, pk):
@@ -64,7 +63,7 @@ class PlaceDetailView(IsAuthenticated, View):
 
 class HomeView(View):
     def get(self, request, *args, **kwargs):
-        place_list = Place.objects.all().order_by('submitted_when')[:10]
+        place_list = Place.objects.all().order_by('-submitted_when')[:10]
         context = {
             'place_list': place_list
         }

lostplaces/templates/403.html

@@ -4,12 +4,12 @@
 
 {% block additional_head %}
 {% if request.META.HTTP_REFERER %}
-	<meta http-equiv="refresh" content="5;url={{ request.META.HTTP_REFERER }}" />
+    <meta http-equiv="refresh" content="5;url={{ request.META.HTTP_REFERER }}" />
 {% endif %}
 {% endblock additional_head %}
 
 {% block maincontent %}
 {% if request.META.HTTP_REFERER %}
-	<p class="LP-Headline">You will be redirected in 5 seconds</p><p class="LP-Headline"><a href="{{ request.META.HTTP_REFERER }}" class="LP-Link">Go Back</a></p>
+    <p class="LP-Headline">You will be redirected in 5 seconds</p><p class="LP-Headline"><a href="{{ request.META.HTTP_REFERER }}" class="LP-Link">Go Back</a></p>
 {% endif %}
 {% endblock maincontent %}

lostplaces/templates/registration/login.html

@@ -18,12 +18,12 @@
             </div>
         </div>
 
-		<div class="LP-Form__Composition LP-Form__Composition--buttons">
+        <div class="LP-Form__Composition LP-Form__Composition--buttons">
-			<div class="LP-Form__Field LP-Form__Button LP-Input">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
-				<button class="LP-Button">Login</button>
+                <button class="LP-Button">Login</button>
-			</div>
+            </div>
-		</div>
+        </div>
-	</div>
+    </div>
     </fieldset>
 
 </form>

lostplaces/templates/signup.html

@@ -35,11 +35,11 @@
             </div>
         </div>
 
-		<div class="LP-Form__Composition LP-Form__Composition--buttons">
+        <div class="LP-Form__Composition LP-Form__Composition--buttons">
-			<div class="LP-Form__Field LP-Form__Button LP-Input">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
-				<button class="LP-Button">Sign up</button>
+                <button class="LP-Button">Sign up</button>
-			</div>
+            </div>
-		</div>
+        </div>
     </fieldset>
 
 </form>