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 copy.css

@@ -1,689 +0,0 @@
-@font-face {
-  font-family: Crimson;
-  src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
-
-@font-face {
-  font-family: Montserrat;
-  src: url("fonts/Montserrat/Montserrat-Regular.ttf"), url("fonts/Montserrat/Montserrat-Bold.ttf"), url("fonts/Montserrat/Montserrat-Italic.ttf"); }
-
-html {
-  height: 100%;
-  margin: 0;
-  padding: 0; }
-
-body {
-  height: 100%;
-  margin: 0; }
-
-.LP-Main {
-  display: flex;
-  flex-direction: row;
-  height: calc(100% - 61px);
-  width: 100%; }
-  .LP-Main .LP-Main__Content {
-    min-height: 1px;
-    padding: 25px; }
-  .LP-Main .LP-Main__Sidebar {
-    width: 250px;
-    flex-grow: 0;
-    height: 100%; }
-  .LP-Main .LP-Wrapper__Content {
-    flex-grow: 1; }
-  .LP-Main .LP-Wrapper__Sidebar {
-    flex: 0 0 250px; }
-
-.LP-Section {
-  clear: both;
-  padding: 25px 0px;
-  padding-left: 25px; }
-  .LP-Section .LP-Headline {
-    margin-left: -25px; }
-
-@media (max-width: 650px) {
-  .LP-Section {
-    padding-left: 0;
-    padding-right: 0; }
-    .LP-Section .LP-Headline {
-      margin: 0; } }
-
-.LP-Link {
-  color: #565656;
-  text-decoration: none;
-  font-family: Montserrat, Helvetica, sans-serif; }
-  .LP-Link:hover {
-    color: #C09F80; }
-  .LP-Link .LP-Paragraph {
-    font-family: Montserrat, Helvetica, sans-serif; }
-    .LP-Link .LP-Paragraph:hover {
-      color: #C09F80; }
-
-.LP-Link__IconWrapper {
-  display: inline; }
-
-.LP-Headline {
-  font-family: Montserrat, Helvetica, sans-serif;
-  color: #565656;
-  font-size: 1.7rem;
-  padding-top: 0px;
-  margin-top: 0px;
-  padding-bottom: 0px;
-  margin-bottom: 25px; }
-  .LP-Headline--main {
-    position: relative;
-    top: 2rem;
-    font-size: 2rem; }
-  .LP-Headline--inline {
-    display: inline; }
-
-.LP-Paragraph {
-  color: black;
-  font-family: Crimson, Times, serif;
-  font-size: 1.2rem;
-  padding: 0;
-  margin: 0; }
-
-.LP-Icon {
-  height: 20px;
-  width: 20px; }
-
-.LP-Icon__List {
-  list-style-type: none;
-  display: inline-flex;
-  justify-content: space-between;
-  justify-items: stretch;
-  padding: 0; }
-  .LP-Icon__List .LP-Icon__Item {
-    padding: 0 3px; }
-
-.LP-Button {
-  background-color: #C09F80;
-  color: #565656;
-  border: none;
-  padding: 8px 14px;
-  border-radius: 2px;
-  font-weight: bold;
-  cursor: pointer; }
-  .LP-Button:active {
-    background-color: #76323F;
-    color: #f9f9f9; }
-  .LP-Button--cancel {
-    background-color: #565656;
-    color: #f9f9f9; }
-    .LP-Button--cancel:active {
-      color: #565656;
-      background-color: #f9f9f9; }
-
-.LP-Form .LP-Form__Checkbox {
-  display: none; }
-
-.LP-Form .LP-Form__CheckBox__CheckMark {
-  height: 1em;
-  width: 1em;
-  border: 1px solid black;
-  padding: 0 calc(.5em + 2px);
-  margin-right: .7em; }
-
-.LP-Input {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: -30px;
-  padding: 10px 0; }
-  .LP-Input .LP-Input__Field {
-    border: none;
-    border-bottom: 1px solid #565656;
-    padding: 8px;
-    margin-bottom: 30px; }
-    .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
-      margin-bottom: 29px;
-      border-bottom: 2px solid #76323F;
-      background-color: #f9f9f9;
-      border-radius: 3px 3px 0 0;
-      box-shadow: none; }
-    .LP-Input .LP-Input__Field[type=submit] {
-      background-color: #C09F80;
-      color: #565656;
-      border: none;
-      padding: 8px 14px;
-      border-radius: 2px;
-      font-weight: bold;
-      cursor: pointer; }
-      .LP-Input .LP-Input__Field[type=submit]:active {
-        background-color: #76323F;
-        color: #f9f9f9; }
-  .LP-Input .LP-Input__Label {
-    font-family: Montserrat, Helvetica, sans-serif;
-    font-size: 16px; }
-  .LP-Input .LP-Input__Message {
-    font-family: Montserrat, Helvetica, sans-serif;
-    font-style: italic;
-    font-size: 13px;
-    padding: 3px;
-    position: relative;
-    top: -30px; }
-  .LP-Input--error .LP-Input__Field {
-    margin-bottom: 25px;
-    border-bottom: 2px solid #76323F;
-    margin-bottom: 29px; }
-  .LP-Input--error .LP-Input__Message {
-    color: #76323F; }
-  .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .LP-Input__Field:disabled {
-    background-color: transparent;
-    border-bottom: 1px dashed #565656;
-    cursor: not-allowed; }
-    label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .LP-Input__Field:disabled {
-      color: red; }
-    .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .LP-Input__Field:disabled:focus, .LP-Input--disabled .LP-Input__Field:disabled:active {
-      margin-bottom: 30px;
-      border-radius: 0; }
-    .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message {
-      visibility: hidden; }
-  .LP-Input--disabled .LP-Input__Label {
-    color: #565656; }
-
-.LP-Image {
-  object-fit: cover;
-  width: 100%;
-  height: auto;
-  vertical-align: top;
-  margin: 0;
-  padding: 0; }
-
-.LP-Logo {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  object-fit: contain; }
-
-.LP-Tag {
-  padding: 8px 14px;
-  background-color: #D7CEC7;
-  border-radius: 2px;
-  width: max-content; }
-  .LP-Tag .LP-Paragraph {
-    padding: 0;
-    margin: 0;
-    font-family: Montserrat, Helvetica, sans-serif;
-    font-size: 1em;
-    display: inline; }
-
-.LP-Message {
-  display: flex;
-  flex-direction: row;
-  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;
-  overflow: hidden; }
-  .LP-Message--error .LP-Message__Icon {
-    background-color: #02979e;
-    background-image: url("/icons/error.png"); }
-  .LP-Message--warning .LP-Message__Icon {
-    background-color: #0047e7;
-    background-image: url("/icons/error.png"); }
-  .LP-Message--info .LP-Message__Icon {
-    background-color: #522719;
-    background-image: url("/icons/information.svg"); }
-  .LP-Message--success .LP-Message__Icon {
-    background-color: #6937ff;
-    background-image: url("/icons/success.svg"); }
-  .LP-Message--debug .LP-Message__Icon {
-    background-color: #046a2f;
-    background-image: url("/icons/debug.png"); }
-  .LP-Message .LP-Message__Icon {
-    background-size: 40px 40px;
-    background-repeat: no-repeat;
-    background-position: center;
-    height: 100%;
-    min-height: 50px;
-    width: 50px;
-    filter: invert(1);
-    flex-shrink: 0;
-    flex-grow: 0; }
-  .LP-Message .LP-Message__Text {
-    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; }
-  .LP-Pagination .LP-Pagination__Item {
-    margin: 0 4px; }
-    .LP-Pagination .LP-Pagination__Item--current .LP-Link {
-      background-color: #D7CEC7;
-      border-radius: 2px; }
-      .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
-        background-color: #D7CEC7;
-        color: #565656; }
-  .LP-Pagination .LP-Link {
-    padding: 15px 25px; }
-    .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
-      background-color: #D7CEC7;
-      border-radius: 2px;
-      color: #565656; }
-
-.LP-Content {
-  padding: 35px; }
-
-@media (max-width: 1290px) {
-  .LP-Content {
-    padding: 15px; } }
-
-.LP-TextSection .LP-Text {
-  line-height: 1.4rem; }
-
-.LP-PlaceTeaser {
-  width: 280px; }
-  .LP-PlaceTeaser .LP-PlaceTeaser__Image {
-    height: 165px;
-    width: 280px;
-    overflow: hidden; }
-    .LP-PlaceTeaser .LP-PlaceTeaser__Image .LP-Image {
-      max-width: unset;
-      max-height: unset;
-      object-fit: cover; }
-  .LP-PlaceTeaser .LP-PlaceTeaser__Meta {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px;
-    padding-bottom: 10px;
-    padding-top: 10px; }
-    .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Paragraph {
-      font-family: Montserrat, Helvetica, sans-serif;
-      padding: 0;
-      margin: 0;
-      margin-top: 5px;
-      font-size: 0.9rem; }
-    .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Headline {
-      font-family: Montserrat, Helvetica, sans-serif;
-      color: #565656;
-      font-size: 1rem;
-      padding: 0px;
-      margin: 0px; }
-  .LP-PlaceTeaser .LP-PlaceTeaser__Description {
-    font-family: Roboto, Arial, sans-serif;
-    color: #565656;
-    display: none; }
-
-@media (min-width: 650px) {
-  .LP-PlaceTeaser--extended {
-    display: flex;
-    flex-direction: row;
-    width: auto;
-    padding-right: 25px;
-    height: 165px; }
-    .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta {
-      margin: 0;
-      padding: 5px;
-      padding-left: 25px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: flex-start; }
-      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Info .LP-Headline {
-        font-size: 28px; }
-      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Icons {
-        margin-top: auto; }
-        .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Icons ul {
-          padding: 0;
-          margin: 0; }
-    .LP-PlaceTeaser--extended .LP-PlaceTeaser__Description {
-      display: block;
-      max-height: 55px;
-      overflow: hidden; }
-    .LP-PlaceTeaser--extended .LP-PlaceTeaser__Image {
-      height: 165px;
-      width: 280px;
-      flex-shrink: 0;
-      flex-grow: 0; } }
-
-.LP-TagList .LP-TagList__List {
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0;
-  margin: 0; }
-  .LP-TagList .LP-TagList__List .LP-TagList__Item {
-    margin: 6px; }
-
-.LP-Menu {
-  border-left: 1px solid #C09F80; }
-  .LP-Menu .LP-Menu__List {
-    list-style-type: none;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    padding: 0;
-    margin: 0; }
-  .LP-Menu .LP-Menu__Item {
-    margin: 0;
-    text-align: center;
-    background-color: transparent; }
-    .LP-Menu .LP-Menu__Item .LP-Link {
-      display: block;
-      padding: 15px 0; }
-  .LP-Menu .LP-Link__Text {
-    color: #565656;
-    font-weight: bold;
-    text-shadow: 0px 0px 20px white; }
-    .LP-Menu .LP-Link__Text:hover {
-      color: #76323F; }
-  .LP-Menu--sidebar {
-    border-top: 1px solid #C09F80;
-    border-left: none;
-    min-width: 60px;
-    background-color: #f9f9f9;
-    height: 100%;
-    padding-top: 25px; }
-    .LP-Menu--sidebar .LP-Menu__List {
-      flex-direction: column; }
-      .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item {
-        text-align: left;
-        margin-bottom: 10px;
-        padding-left: 25px; }
-        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item--additional {
-          background-color: #ccc; }
-        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item .LP-Link {
-          line-height: 1em; }
-        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child {
-          margin-bottom: 0; }
-        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:hover {
-          border-right: 2px solid #C09F80;
-          position: relative;
-          background-color: #D7CEC7;
-          color: #76323F; }
-
-@media (max-width: 750px) {
-  .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start; }
-    .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List .LP-Menu__Item {
-      flex: 1 1 auto; } }
-
-@media (max-width: 450px) {
-  .LP-Menu .LP-Menu__List {
-    justify-content: space-between; } }
-
-.LP-MessageList {
-  padding: 25px; }
-  .LP-MessageList .LP-MessageList__List {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between; }
-  .LP-MessageList .LP-MessageList__Item {
-    margin: 5px 0; }
-
-.LP-Header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 60px;
-  box-shadow: 0 0 2px #C09F80; }
-  .LP-Header__Navigation {
-    flex-grow: 2; }
-  .LP-Header__Logo {
-    height: 45px;
-    margin: 25px;
-    object-fit: cover;
-    max-height: 100%;
-    width: 225px;
-    overflow: hidden;
-    flex-shrink: 0; }
-    .LP-Header__Logo .LP-Image {
-      height: 100%; }
-
-.LP-Header__UserInformation {
-  margin-right: 3%; }
-  .LP-Header__UserInformation .LP-Paragraph {
-    font-family: Montserrat, Helvetica, sans-serif;
-    white-space: nowrap; }
-  .LP-Header__UserInformation .LP-Link {
-    margin: 0 3px;
-    padding: 4px 4px; }
-
-@media (max-width: 750px) {
-  .LP-Header__Logo {
-    width: 45px; }
-    .LP-Header__Logo .LP-Image {
-      object-position: 0 0;
-      object-fit: cover; } }
-
-@media (max-width: 450px) {
-  .LP-Header__Logo {
-    display: none; }
-  .LP-Header__Navigation {
-    width: 100%; } }
-
-.LP-PlaceGrid .LP-PlaceGrid__Grid {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap; }
-  .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item {
-    margin: 18px; }
-  .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-Link .LP-PlaceTeaser:hover {
-    box-shadow: 0 0 2px #565656; }
-
-.LP-PlaceList .LP-PlaceList__List {
-  list-style-type: none; }
-  .LP-PlaceList .LP-PlaceList__List .LP-Link .LP-Place:hover {
-    color: #565656;
-    background-color: #f9f9f9;
-    position: relative;
-    left: -2px; }
-    .LP-PlaceList .LP-PlaceList__List .LP-Link .LP-Place:hover > .LP-Place__Image {
-      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;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  margin: 0;
-  padding: 0; }
-  .LP-LinkList__List .LP-LinkList__Item {
-    border-left: 1px solid #C09F80;
-    width: calc(100% - 1px);
-    margin-top: 12px; }
-    .LP-LinkList__List .LP-LinkList__Item .LP-Link {
-      padding: 1em 0 1em 1em;
-      width: calc(100% - 1em);
-      display: block;
-      color: #565656; }
-      .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized {
-        padding-top: 0;
-        padding-bottom: 1.1em; }
-        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized:hover {
-          background-color: #ccc !important; }
-        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized .LP-Text {
-          padding-top: .1em; }
-      .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
-        background-color: #f9f9f9;
-        color: #76323F; }
-      .LP-LinkList__List .LP-LinkList__Item .LP-Link .LP-Text {
-        color: inherit; }
-
-.LP-Link__Icon {
-  width: 2em;
-  height: 2em;
-  fill: #76323F;
-  line-height: 5em; }
-
-.LP-LinkList__Item .LP-Link__Icon {
-  position: relative;
-  top: .7em;
-  margin-right: .6em; }
-
-.LP-Footer {
-  margin-top: 75px;
-  width: 100%;
-  background-color: #565656;
-  padding: 25px; }
-  .LP-Footer .LP-LinkList__List {
-    display: flex;
-    align-items: center;
-    justify-content: center; }
-    .LP-Footer .LP-LinkList__List .LP-LinkList__Item {
-      border: none;
-      padding: 5px;
-      width: auto; }
-      .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Text {
-        color: #f9f9f9;
-        font-size: 17px; }
-      .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link {
-        display: inline; }
-        .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
-          background-color: inherit; }
-
-.LP-Form {
-  display: flex;
-  flex-direction: column;
-  align-items: center; }
-  .LP-Form .LP-Form__Fieldset {
-    border: none;
-    max-width: 1200px;
-    min-width: 750px; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
-      margin: 0;
-      padding: 0;
-      font-family: Montserrat, Helvetica, sans-serif;
-      font-size: 21px; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
-        flex: 3 2 100px;
-        padding: 6px 15px; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
-          flex: 5 2; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
-          flex: 4 2; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
-          flex: 2 1; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
-          flex: 1 2; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
-        justify-content: flex-end; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
-        flex-grow: 0;
-        padding-left: 0;
-        min-width: 130px; }
-        .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button .LP-Link {
-          display: contents; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
-        font-family: Montserrat, Helvetica, sans-serif;
-        color: #565656; }
-
-@media (max-width: 750px) {
-  .LP-Form .LP-Form__Fieldset {
-    min-width: unset; } }
-
-@media (max-width: 650px) {
-  .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between; } }
-
-@media (max-width: 450px) {
-  .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
-      flex: 3 1 100px;
-      padding: 12px 15px; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
-      padding: 0 15px; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons {
-      justify-content: flex-end; } }
-
-.LP-ImageGrid .LP-ImageGrid__List {
-  list-style-type: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 300px);
-  align-content: space-around;
-  justify-content: center;
-  margin: 0px;
-  padding: 0px; }
-
-.LP-ImageGrid .LP-ImageGrid__Item {
-  margin-top: 10px; }
-
-.LP-ImageGrid .LP-Link {
-  overflow: hidden; }
-
-.LP-ImageGrid .LP-Image {
-  box-shadow: 0 0 5px #565656;
-  height: 200px;
-  width: 290px;
-  object-fit: cover; }
-
-@media (max-width: 650px) {
-  .LP-ImageGrid .LP-ImageGrid__List {
-    grid-template-columns: 1fr; }
-    .LP-ImageGrid .LP-ImageGrid__List .LP-Image {
-      box-shadow: 0 0 5px #565656;
-      height: auto;
-      width: 100%;
-      object-fit: cover; } }
-
-.LP-MainContainer {
-  margin: 0 auto;
-  max-width: 1280px; }
-
-.LP-HorizontalLine {
-  color: #565656; }
-
-@media (max-width: 650px) {
-  .LP-MainContainer {
-    width: 100%; } }
-
-.LP-PlaceDetail .LP-PlaceDetail__Image {
-  width: 700px;
-  max-height: 500px;
-  box-shadow: 0 0 10px #565656;
-  object-fit: cover;
-  object-position: 0 0;
-  margin: 0;
-  padding: 0;
-  float: right;
-  margin-left: 35px;
-  margin-bottom: 35px;
-  margin-right: 35px;
-  overflow: hidden; }
-
-@media (max-width: 1000px) {
-  .LP-PlaceDetail .LP-PlaceDetail__Header .LP-PlaceDetail__Image {
-    float: none;
-    width: 100%;
-    height: auto;
-    margin: 0;
-    padding: 0;
-    margin-bottom: 25px; } }

lostplaces/lostplaces_app/static/main.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @font-face {
   font-family: Crimson;
   src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
@@ -14,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;
@@ -39,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;
@@ -46,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;
@@ -219,19 +266,19 @@ body {
   overflow: hidden; }
   .LP-Message--error .LP-Message__Icon {
     background-color: #02979e;
-    background-image: url("/icons/error.png"); }
+    background-image: url("icons/error.png"); }
   .LP-Message--warning .LP-Message__Icon {
     background-color: #0047e7;
-    background-image: url("/icons/error.png"); }
+    background-image: url("icons/error.png"); }
   .LP-Message--info .LP-Message__Icon {
     background-color: #522719;
-    background-image: url("/icons/information.svg"); }
+    background-image: url("icons/information.svg"); }
   .LP-Message--success .LP-Message__Icon {
     background-color: #6937ff;
-    background-image: url("/icons/success.svg"); }
+    background-image: url("icons/success.svg"); }
   .LP-Message--debug .LP-Message__Icon {
     background-color: #046a2f;
-    background-image: url("/icons/debug.png"); }
+    background-image: url("icons/debug.png"); }
   .LP-Message .LP-Message__Icon {
     background-size: 40px 40px;
     background-repeat: no-repeat;
@@ -259,25 +306,49 @@ body {
   .LP-Pagination .LP-Pagination__List {
     list-style-type: none;
     display: flex;
-    flex-direction: row; }
+    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;
+      background-color: #D7CEC7; }
-      border-radius: 2px; }
       .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
         background-color: #D7CEC7;
         color: #565656; }
   .LP-Pagination .LP-Link {
-    padding: 15px 25px; }
+    padding: 15px 20px;
+    vertical-align: sub;
+    border-radius: 2px; }
     .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
       background-color: #D7CEC7;
-      border-radius: 2px;
       color: #565656; }
-  .LP-Pagination .LP-Pagination__Previous:before {
+  .LP-Pagination .LP-Icon {
-    content: "«"; }
+    font-size: larger; }
-  .LP-Pagination .LP-Pagination__Next:before {
+
-    content: "»"; }
+@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; }
@@ -391,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; }
@@ -440,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;
@@ -476,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;
@@ -499,7 +578,6 @@ 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 {

lostplaces/lostplaces_app/templates/global.html

@@ -8,73 +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>
+                                <div>
-									<div class="LP-Message__Icon">
+                                    <div class="LP-Message__Icon">
-									</div>
+                                    </div>
-								</div>
+                                </div>
-								<div class="LP-Message__Text">
+                                <div class="LP-Message__Text">
-									{{ message }}
+                                    {{ message }}
-								</div>
+                                </div>
-							</div>
+                            </div>
-						</li>
+                        </li>
-						{% endfor %}
+                        {% endfor %}
-					</ul>
+                    </ul>
-				</div>
+                </div>
-				{% endif %}
+                {% 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

@@ -46,30 +46,7 @@
         {% endfor %}
     </ul>
     
-    <div class="LP-Pagination">
+    {% include 'partials/nav/pagination.html' %}
-    <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">&larrb; first</span></a>
-            </li>
-            <li class="LP-Pagination__Item LP-Pagination__Item--previous">
-                <a href="?page={{ page_obj.previous_page_number }}" class="LP-Link"><span class="LP-Pagination__Previous">&larr; 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">next &rarr;</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">last &rarrb;</span></a>
-            </li>
-        {% endif %}
-    </ul>
-    </div>
 </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

@@ -50,7 +50,7 @@ class SignUpView(SuccessMessageMixin, CreateView):
     success_message = 'User created.'
 
 class PlaceListView(IsAuthenticated, ListView):
-    paginate_by = 5
+    paginate_by = 2
     model = Place
     template_name = 'place/place_list.html'
 

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>