From f3ec9505f2fe48304fd17cc12b4612bb20a6c680 Mon Sep 17 00:00:00 2001
From: yaemiku <me@yaemiku.dev>
Date: Tue, 28 Mar 2023 17:12:52 +0200
Subject: [PATCH] change atu to orderable

---
 core/context_processors.py                    |   2 +-
 core/templates/atu.html                       |  16 +-
 db/atu/admin.py                               |  13 ++
 ...ons_atu_ordering_atu_published_and_more.py |  42 ++++
 db/atu/models.py                              |  43 ++--
 .../migrations/0006_alter_calendar_buttons.py |  18 ++
 db/calendar/models.py                         |  25 +--
 .../0004_alter_grandprixb_buttons.py          |  18 ++
 db/gpb/models.py                              |  25 +--
 db/help.py                                    |  24 +++
 ...tions_alter_grandprixw_buttons_and_more.py |  27 +++
 db/main/models.py                             |  25 +--
 db/mbkb/migrations/0003_alter_mbkb_buttons.py |  18 ++
 db/mbkb/models.py                             |  26 +--
 .../0006_alter_membership_buttons.py          |  18 ++
 db/membership/models.py                       |  25 +--
 .../0008_alter_tournament_buttons.py          |  18 ++
 db/tournaments/models.py                      |  25 +--
 .../migrations/0005_alter_youth_buttons.py    |  18 ++
 db/youth/models.py                            |  19 +-
 requirements.txt                              |   4 +-
 static/admin/css/base.css                     | 193 +++++++++++-------
 static/admin/css/changelists.css              |  98 +++------
 static/admin/css/dark_mode.css                |  33 +++
 static/admin/css/forms.css                    |  29 +--
 static/admin/css/login.css                    |   2 +-
 static/admin/css/nav_sidebar.css              |   2 +-
 static/admin/css/responsive.css               |  55 +++--
 static/admin/css/rtl.css                      |  12 ++
 static/admin/css/widgets.css                  |  40 ++--
 static/admin/js/SelectFilter2.js              |  18 --
 static/admin/js/admin/DateTimeShortcuts.js    |   8 +-
 static/admin/js/admin/RelatedObjectLookups.js |  99 ++++++++-
 static/admin/js/autocomplete.js               |   8 +-
 static/admin/js/filters.js                    |  30 +++
 static/admin/js/inlines.js                    |  21 +-
 static/admin/js/prepopulate_init.js           |   6 +-
 static/css/dist/styles.css                    |  48 +++--
 theme/static/css/dist/styles.css              |  37 ----
 39 files changed, 692 insertions(+), 496 deletions(-)
 create mode 100644 db/atu/admin.py
 create mode 100644 db/atu/migrations/0004_alter_atu_options_atu_ordering_atu_published_and_more.py
 create mode 100644 db/calendar/migrations/0006_alter_calendar_buttons.py
 create mode 100644 db/gpb/migrations/0004_alter_grandprixb_buttons.py
 create mode 100644 db/help.py
 create mode 100644 db/main/migrations/0008_alter_grandprixw_options_alter_grandprixw_buttons_and_more.py
 create mode 100644 db/mbkb/migrations/0003_alter_mbkb_buttons.py
 create mode 100644 db/membership/migrations/0006_alter_membership_buttons.py
 create mode 100644 db/tournaments/migrations/0008_alter_tournament_buttons.py
 create mode 100644 db/youth/migrations/0005_alter_youth_buttons.py
 create mode 100644 static/admin/css/dark_mode.css
 create mode 100644 static/admin/js/filters.js

diff --git a/core/context_processors.py b/core/context_processors.py
index 0ab315a..f977700 100644
--- a/core/context_processors.py
+++ b/core/context_processors.py
@@ -36,5 +36,5 @@ def load_config(request):
         'memberships': Membership.objects.filter(published=True),
         'youth': Youth.objects.filter(published=True),
         'mbkb': MBKB.objects.filter(published=True),
-        'atu': Atu.load()
+        'atus': Atu.objects.filter(published=True)
     }
diff --git a/core/templates/atu.html b/core/templates/atu.html
index 94ab09f..5287a2c 100644
--- a/core/templates/atu.html
+++ b/core/templates/atu.html
@@ -3,12 +3,20 @@
 {% block title %}ATU | pdlzbs{% endblock %}
 <!---->
 {% load static tailwind_tags wysiwyg %} {% block content %}
-<div class="flex">
-  <article class="max-w-full mx-auto scrollable">
-    {% content atu %}
-    <div class="flex flex-wrap gap-4 items-center justify-center">
+<div class="flex flex-col gap-4 items-center">
+  {% for atu in atus %}
+  <article class="mx-auto max-w-full scrollable">
+    {% if atu.show_title %}
+    <h2 class="font-normal">{{ atu.title }}</h2>
+    {% endif %} {% content atu %}
+    <div class="flex flex-wrap gap-4 justify-center items-center">
       {% buttons atu.buttons %}
     </div>
   </article>
+  {% if not forloop.last %}
+  <hr class="w-36 border-b border-stone-200" />
+  {% endif %} {% empty %}
+  <span class="py-4 text-xl">Brak artykułów</span>
+  {% endfor %}
 </div>
 {% endblock %}
diff --git a/db/atu/admin.py b/db/atu/admin.py
new file mode 100644
index 0000000..d160c84
--- /dev/null
+++ b/db/atu/admin.py
@@ -0,0 +1,13 @@
+from django.contrib import admin
+from admin_ordering.admin import OrderableAdmin
+from .models import *
+
+# Register your models here.
+
+
+@admin.register(Atu)
+class AtuModelAdmin(OrderableAdmin, admin.ModelAdmin):
+    list_display = ['__str__', 'published', 'ordering']
+    list_editable = ['ordering']
+    ordering_field_hide_input = True
+    exclude = ['ordering']
diff --git a/db/atu/migrations/0004_alter_atu_options_atu_ordering_atu_published_and_more.py b/db/atu/migrations/0004_alter_atu_options_atu_ordering_atu_published_and_more.py
new file mode 100644
index 0000000..db556e4
--- /dev/null
+++ b/db/atu/migrations/0004_alter_atu_options_atu_ordering_atu_published_and_more.py
@@ -0,0 +1,42 @@
+# Generated by Django 4.1.7 on 2023-03-28 15:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('atu', '0003_atu_buttons'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='atu',
+            options={'ordering': ['ordering'], 'verbose_name': 'Artykuł Stowarzyszenia Brydżowego ATU', 'verbose_name_plural': 'Artykuły Stowarzyszenia Brydżowego ATU'},
+        ),
+        migrations.AddField(
+            model_name='atu',
+            name='ordering',
+            field=models.IntegerField(default=0, verbose_name='Kolejność'),
+        ),
+        migrations.AddField(
+            model_name='atu',
+            name='published',
+            field=models.BooleanField(default=True, verbose_name='Wpis opublikowany'),
+        ),
+        migrations.AddField(
+            model_name='atu',
+            name='show_title',
+            field=models.BooleanField(default=True, verbose_name='Pokaż tytuł'),
+        ),
+        migrations.AddField(
+            model_name='atu',
+            name='title',
+            field=models.CharField(blank=True, default='', max_length=250, verbose_name='Tytuł'),
+        ),
+        migrations.AlterField(
+            model_name='atu',
+            name='buttons',
+            field=models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski'),
+        ),
+    ]
diff --git a/db/atu/models.py b/db/atu/models.py
index a9bdd05..774da55 100644
--- a/db/atu/models.py
+++ b/db/atu/models.py
@@ -1,43 +1,24 @@
 from django.db import models
+from django.urls.base import reverse_lazy
+from django.utils.safestring import mark_safe
 from tinymce.models import HTMLField
-from core.utils import SingletonModel
+from admin_ordering.models import OrderableModel
+from db.help import buttons_help_text
 
 # Create your models here.
 
-buttons_help_text = """Tutaj można wpisać dowolną ilość przycisków w następującym formacie:
-             <code>
-             tekst1 -> link
-             teskt2 | link
-             ...
-             </code>
-             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie
-             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie
-             Na przykład:
-             <code>
-             pzbs -> https://pzbs.pl
-             fotogaleria | https://galeria.podlaskizbs.pl
-             cezar -> https://www.msc.com.pl/cezar
-             </code>
-             PZBS i Cezar zostaną otwarte w nowej karcie
-             <b>UWAGA !!</b>
-             Klikając na zdjęcie zawsze zostaniemy przekierowani na pierwszy podany link
-             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:
-             <code>
-             -> link do wyników
-             fotogaleria -> link do fotogalerii
-             </code>
-             Wtedy pokaże się <b>tylko przycisk fotogalerii</b>, a zdjęcie przekieruje nas do wyników!
-             """.replace('\n', '<br />')
 
-
-class Atu(SingletonModel):
+class Atu(OrderableModel):
+    published = models.BooleanField('Wpis opublikowany', default=True)
+    show_title = models.BooleanField('Pokaż tytuł', default=True)
+    title = models.CharField('Tytuł', default='', blank=True, max_length=250)
     content = HTMLField('Tekst', default='', blank=True)
     buttons = models.TextField(
         'Przyciski', default='', blank=True, help_text=buttons_help_text)
 
     def __str__(self):
-        return 'Stowarzyszenie Brydżowe ATU'
+        return self.title or '-'
 
-    class Meta:
-        verbose_name = 'Stowarzyszenie Brydżowe ATU'
-        verbose_name_plural = 'Stowarzyszenie Brydżowe ATU'
+    class Meta(OrderableModel.Meta):
+        verbose_name = 'Artykuł Stowarzyszenia Brydżowego ATU'
+        verbose_name_plural = 'Artykuły Stowarzyszenia Brydżowego ATU'
diff --git a/db/calendar/migrations/0006_alter_calendar_buttons.py b/db/calendar/migrations/0006_alter_calendar_buttons.py
new file mode 100644
index 0000000..4220d6b
--- /dev/null
+++ b/db/calendar/migrations/0006_alter_calendar_buttons.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-03-28 15:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('calendar', '0005_calendar_current'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='calendar',
+            name='buttons',
+            field=models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski'),
+        ),
+    ]
diff --git a/db/calendar/models.py b/db/calendar/models.py
index 14b801b..63a59bf 100644
--- a/db/calendar/models.py
+++ b/db/calendar/models.py
@@ -1,31 +1,8 @@
 from django.db import models
 from tinymce.models import HTMLField
+from db.help import buttons_help_text
 
 # Create your models here.
-buttons_help_text = """Tutaj można wpisać dowolną ilość przycisków w następującym formacie:
-             <code>
-             tekst1 -> link
-             teskt2 | link
-             ...
-             </code>
-             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie
-             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie
-             Na przykład:
-             <code>
-             pzbs -> https://pzbs.pl
-             fotogaleria | https://galeria.podlaskizbs.pl
-             cezar -> https://www.msc.com.pl/cezar
-             </code>
-             PZBS i Cezar zostaną otwarte w nowej karcie
-             <b>UWAGA !!</b>
-             Klikając na zdjęcie zawsze zostaniemy przekierowani na pierwszy podany link
-             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:
-             <code>
-             -> link do wyników
-             fotogaleria -> link do fotogalerii
-             </code>
-             Wtedy pokaże się <b>tylko przycisk fotogalerii</b>, a zdjęcie przekieruje nas do wyników!
-             """.replace('\n', '<br />')
 
 
 class Calendar(models.Model):
diff --git a/db/gpb/migrations/0004_alter_grandprixb_buttons.py b/db/gpb/migrations/0004_alter_grandprixb_buttons.py
new file mode 100644
index 0000000..b15c775
--- /dev/null
+++ b/db/gpb/migrations/0004_alter_grandprixb_buttons.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-03-28 15:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('gpb', '0003_grandprixb_buttons'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='grandprixb',
+            name='buttons',
+            field=models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski'),
+        ),
+    ]
diff --git a/db/gpb/models.py b/db/gpb/models.py
index 1200c6f..a4ecc38 100644
--- a/db/gpb/models.py
+++ b/db/gpb/models.py
@@ -1,32 +1,9 @@
 from django.db import models
 from tinymce.models import HTMLField
 from core.utils import SingletonModel
+from db.help import buttons_help_text
 
 # Create your models here.
-buttons_help_text = """Tutaj można wpisać dowolną ilość przycisków w następującym formacie:
-             <code>
-             tekst1 -> link
-             teskt2 | link
-             ...
-             </code>
-             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie
-             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie
-             Na przykład:
-             <code>
-             pzbs -> https://pzbs.pl
-             fotogaleria | https://galeria.podlaskizbs.pl
-             cezar -> https://www.msc.com.pl/cezar
-             </code>
-             PZBS i Cezar zostaną otwarte w nowej karcie
-             <b>UWAGA !!</b>
-             Klikając na zdjęcie zawsze zostaniemy przekierowani na pierwszy podany link
-             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:
-             <code>
-             -> link do wyników
-             fotogaleria -> link do fotogalerii
-             </code>
-             Wtedy pokaże się <b>tylko przycisk fotogalerii</b>, a zdjęcie przekieruje nas do wyników!
-             """.replace('\n', '<br />')
 
 
 class GrandPrixB(SingletonModel):
diff --git a/db/help.py b/db/help.py
new file mode 100644
index 0000000..a1e538d
--- /dev/null
+++ b/db/help.py
@@ -0,0 +1,24 @@
+
+buttons_help_text = """Tutaj można wpisać dowolną ilość przycisków w następującym formacie:
+             <code>
+             tekst1 -> link
+             teskt2 | link
+             ...
+             </code>
+             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie
+             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie
+             Na przykład:
+             <code>
+             pzbs -> https://pzbs.pl
+             fotogaleria | https://galeria.podlaskizbs.pl
+             cezar -> https://www.msc.com.pl/cezar
+             </code>
+             PZBS i Cezar zostaną otwarte w nowej karcie
+             <b>UWAGA !!</b>
+             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:
+             <code>
+             -> link do wyników
+             fotogaleria -> link do fotogalerii
+             </code>
+             Wtedy pokaże się <b>tylko przycisk fotogalerii</b>
+             """.replace('\n', '<br />')
diff --git a/db/main/migrations/0008_alter_grandprixw_options_alter_grandprixw_buttons_and_more.py b/db/main/migrations/0008_alter_grandprixw_options_alter_grandprixw_buttons_and_more.py
new file mode 100644
index 0000000..b6f2633
--- /dev/null
+++ b/db/main/migrations/0008_alter_grandprixw_options_alter_grandprixw_buttons_and_more.py
@@ -0,0 +1,27 @@
+# Generated by Django 4.1.7 on 2023-03-28 15:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0007_remove_grandprixw_id_grandprixw_current_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='grandprixw',
+            options={'ordering': ['-year'], 'verbose_name': 'Grand Prix Województwa', 'verbose_name_plural': 'Grand Prix Województwa'},
+        ),
+        migrations.AlterField(
+            model_name='grandprixw',
+            name='buttons',
+            field=models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski'),
+        ),
+        migrations.AlterField(
+            model_name='post',
+            name='buttons',
+            field=models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski'),
+        ),
+    ]
diff --git a/db/main/models.py b/db/main/models.py
index 82e8b26..963bb05 100644
--- a/db/main/models.py
+++ b/db/main/models.py
@@ -4,32 +4,9 @@ from django.utils.safestring import mark_safe
 from tinymce.models import HTMLField
 from admin_ordering.models import OrderableModel
 from core.utils import SingletonModel
+from db.help import buttons_help_text
 
 # Create your models here.
-buttons_help_text = """Tutaj można wpisać dowolną ilość przycisków w następującym formacie:
-             <code>
-             tekst1 -> link
-             teskt2 | link
-             ...
-             </code>
-             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie
-             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie
-             Na przykład:
-             <code>
-             pzbs -> https://pzbs.pl
-             fotogaleria | https://galeria.podlaskizbs.pl
-             cezar -> https://www.msc.com.pl/cezar
-             </code>
-             PZBS i Cezar zostaną otwarte w nowej karcie
-             <b>UWAGA !!</b>
-             Klikając na zdjęcie zawsze zostaniemy przekierowani na pierwszy podany link
-             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:
-             <code>
-             -> link do wyników
-             fotogaleria -> link do fotogalerii
-             </code>
-             Wtedy pokaże się <b>tylko przycisk fotogalerii</b>, a zdjęcie przekieruje nas do wyników!
-             """.replace('\n', '<br />')
 
 
 class Post(OrderableModel):
diff --git a/db/mbkb/migrations/0003_alter_mbkb_buttons.py b/db/mbkb/migrations/0003_alter_mbkb_buttons.py
new file mode 100644
index 0000000..459672c
--- /dev/null
+++ b/db/mbkb/migrations/0003_alter_mbkb_buttons.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-03-28 15:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('mbkb', '0002_mbkb_buttons'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='mbkb',
+            name='buttons',
+            field=models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski'),
+        ),
+    ]
diff --git a/db/mbkb/models.py b/db/mbkb/models.py
index ebe1488..95bbaf2 100644
--- a/db/mbkb/models.py
+++ b/db/mbkb/models.py
@@ -1,34 +1,10 @@
 from django.db import models
 from tinymce.models import HTMLField
 from admin_ordering.models import OrderableModel
+from db.help import buttons_help_text
 
 # Create your models here.
 
-buttons_help_text = """Tutaj można wpisać dowolną ilość przycisków w następującym formacie:
-             <code>
-             tekst1 -> link
-             teskt2 | link
-             ...
-             </code>
-             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie
-             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie
-             Na przykład:
-             <code>
-             pzbs -> https://pzbs.pl
-             fotogaleria | https://galeria.podlaskizbs.pl
-             cezar -> https://www.msc.com.pl/cezar
-             </code>
-             PZBS i Cezar zostaną otwarte w nowej karcie
-             <b>UWAGA !!</b>
-             Klikając na zdjęcie zawsze zostaniemy przekierowani na pierwszy podany link
-             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:
-             <code>
-             -> link do wyników
-             fotogaleria -> link do fotogalerii
-             </code>
-             Wtedy pokaże się <b>tylko przycisk fotogalerii</b>, a zdjęcie przekieruje nas do wyników!
-             """.replace('\n', '<br />')
-
 
 class MBKB(OrderableModel):
     published = models.BooleanField('Wpis opublikowany', default=True)
diff --git a/db/membership/migrations/0006_alter_membership_buttons.py b/db/membership/migrations/0006_alter_membership_buttons.py
new file mode 100644
index 0000000..cae54f2
--- /dev/null
+++ b/db/membership/migrations/0006_alter_membership_buttons.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-03-28 15:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('membership', '0005_membership_current'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='membership',
+            name='buttons',
+            field=models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski'),
+        ),
+    ]
diff --git a/db/membership/models.py b/db/membership/models.py
index ecc97a9..485308e 100644
--- a/db/membership/models.py
+++ b/db/membership/models.py
@@ -1,32 +1,9 @@
 from django.db import models
 from tinymce.models import HTMLField
+from db.help import buttons_help_text
 
 # Create your models here.
 
-buttons_help_text = """Tutaj można wpisać dowolną ilość przycisków w następującym formacie:
-             <code>
-             tekst1 -> link
-             teskt2 | link
-             ...
-             </code>
-             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie
-             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie
-             Na przykład:
-             <code>
-             pzbs -> https://pzbs.pl
-             fotogaleria | https://galeria.podlaskizbs.pl
-             cezar -> https://www.msc.com.pl/cezar
-             </code>
-             PZBS i Cezar zostaną otwarte w nowej karcie
-             <b>UWAGA !!</b>
-             Klikając na zdjęcie zawsze zostaniemy przekierowani na pierwszy podany link
-             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:
-             <code>
-             -> link do wyników
-             fotogaleria -> link do fotogalerii
-             </code>
-             Wtedy pokaże się <b>tylko przycisk fotogalerii</b>, a zdjęcie przekieruje nas do wyników!
-             """.replace('\n', '<br />')
 
 
 class Membership(models.Model):
diff --git a/db/tournaments/migrations/0008_alter_tournament_buttons.py b/db/tournaments/migrations/0008_alter_tournament_buttons.py
new file mode 100644
index 0000000..eb9ebc6
--- /dev/null
+++ b/db/tournaments/migrations/0008_alter_tournament_buttons.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-03-28 15:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tournaments', '0007_alter_tournament_buttons'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='tournament',
+            name='buttons',
+            field=models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski'),
+        ),
+    ]
diff --git a/db/tournaments/models.py b/db/tournaments/models.py
index 93cadf0..d9b6e01 100644
--- a/db/tournaments/models.py
+++ b/db/tournaments/models.py
@@ -4,33 +4,10 @@ from django.utils.safestring import mark_safe
 from admin_ordering.models import OrderableModel
 from tinymce.models import HTMLField
 from filebrowser.fields import FileBrowseField
+from db.help import buttons_help_text
 
 # Create your models here.
 
-buttons_help_text = """Tutaj można wpisać dowolną ilość przycisków w następującym formacie:
-             <code>
-             tekst1 -> link
-             teskt2 | link
-             ...
-             </code>
-             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie
-             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie
-             Na przykład:
-             <code>
-             pzbs -> https://pzbs.pl
-             fotogaleria | https://galeria.podlaskizbs.pl
-             cezar -> https://www.msc.com.pl/cezar
-             </code>
-             PZBS i Cezar zostaną otwarte w nowej karcie
-             <b>UWAGA !!</b>
-             Klikając na zdjęcie zawsze zostaniemy przekierowani na pierwszy podany link
-             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:
-             <code>
-             -> link do wyników
-             fotogaleria -> link do fotogalerii
-             </code>
-             Wtedy pokaże się <b>tylko przycisk fotogalerii</b>, a zdjęcie przekieruje nas do wyników!
-             """.replace('\n', '<br />')
 
 
 class Tournament(OrderableModel):
diff --git a/db/youth/migrations/0005_alter_youth_buttons.py b/db/youth/migrations/0005_alter_youth_buttons.py
new file mode 100644
index 0000000..4a5889a
--- /dev/null
+++ b/db/youth/migrations/0005_alter_youth_buttons.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-03-28 15:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('youth', '0004_alter_youth_buttons'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='youth',
+            name='buttons',
+            field=models.TextField(blank=True, default='', help_text='Tutaj można wpisać dowolną ilość przycisków w następującym formacie:<br />             <code><br />             tekst1 -> link<br />             teskt2 | link<br />             ...<br />             </code><br />             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie<br />             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie<br />             Na przykład:<br />             <code><br />             pzbs -> https://pzbs.pl<br />             fotogaleria | https://galeria.podlaskizbs.pl<br />             cezar -> https://www.msc.com.pl/cezar<br />             </code><br />             PZBS i Cezar zostaną otwarte w nowej karcie<br />             <b>UWAGA !!</b><br />             Gdy nie podamy tekstu przyciku, nie pokaże on się, można to wykorzystać w taki sposób:<br />             <code><br />             -> link do wyników<br />             fotogaleria -> link do fotogalerii<br />             </code><br />             Wtedy pokaże się <b>tylko przycisk fotogalerii</b><br />             ', verbose_name='Przyciski'),
+        ),
+    ]
diff --git a/db/youth/models.py b/db/youth/models.py
index a16c6c1..5e12cbe 100644
--- a/db/youth/models.py
+++ b/db/youth/models.py
@@ -3,27 +3,10 @@ from django.urls.base import reverse_lazy
 from django.utils.safestring import mark_safe
 from tinymce.models import HTMLField
 from admin_ordering.models import OrderableModel
-
+from db.help import buttons_help_text
 
 # Create your models here.
 
-buttons_help_text = """Tutaj można wpisać dowolną ilość przycisków w następującym formacie:
-             <code>
-             tekst1 -> link
-             teskt2 | link
-             ...
-             </code>
-             Symbol <code>-></code> oznacza, że link będzie otwarty w nowej karcie
-             Symbol <code>|</code> oznacza, że link będzie otwarty w tej samej karcie
-             Na przykład:
-             <code>
-             pzbs -> https://pzbs.pl
-             fotogaleria | https://galeria.podlaskizbs.pl
-             cezar -> https://www.msc.com.pl/cezar
-             </code>
-             PZBS i Cezar zostaną otwarte w nowej karcie
-             """.replace('\n', '<br />')
-
 
 class Youth(OrderableModel):
     published = models.BooleanField('Wpis opublikowany', default=True)
diff --git a/requirements.txt b/requirements.txt
index 7a4e87a..3993b0e 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -4,4 +4,6 @@ django-tailwind
 django-tinymce
 django-filebrowser-no-grappelli
 django-htmlmin
-django-cleanup
\ No newline at end of file
+django-cleanup
+django-js-asset
+pillow
\ No newline at end of file
diff --git a/static/admin/css/base.css b/static/admin/css/base.css
index 1cb3acd..1ff93e2 100644
--- a/static/admin/css/base.css
+++ b/static/admin/css/base.css
@@ -57,40 +57,6 @@
   --object-tools-hover-bg: var(--close-button-hover-bg);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --primary: #264b5d;
-    --primary-fg: #eee;
-
-    --body-fg: #eeeeee;
-    --body-bg: #121212;
-    --body-quiet-color: #e0e0e0;
-    --body-loud-color: #ffffff;
-
-    --breadcrumbs-link-fg: #e0e0e0;
-    --breadcrumbs-bg: var(--primary);
-
-    --link-fg: #81d4fa;
-    --link-hover-color: #4ac1f7;
-    --link-selected-fg: #6f94c6;
-
-    --hairline-color: #272727;
-    --border-color: #353535;
-
-    --error-fg: #e35f5f;
-    --message-success-bg: #006b1b;
-    --message-warning-bg: #583305;
-    --message-error-bg: #570808;
-
-    --darkened-bg: #212121;
-    --selected-bg: #1b1b1b;
-    --selected-row: #00363a;
-
-    --close-button-bg: #333333;
-    --close-button-hover-bg: #666666;
-  }
-}
-
 html, body {
     height: 100%;
 }
@@ -98,7 +64,7 @@ html, body {
 body {
     margin: 0;
     padding: 0;
-    font-size: 14px;
+    font-size: 0.875rem;
     font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
     color: var(--body-fg);
     background: var(--body-bg);
@@ -151,12 +117,12 @@ h1,h2,h3,h4,h5 {
 h1 {
     margin: 0 0 20px;
     font-weight: 300;
-    font-size: 20px;
+    font-size: 1.25rem;
     color: var(--body-quiet-color);
 }
 
 h2 {
-    font-size: 16px;
+    font-size: 1rem;
     margin: 1em 0 .5em 0;
 }
 
@@ -166,20 +132,20 @@ h2.subhead {
 }
 
 h3 {
-    font-size: 14px;
+    font-size: 0.875rem;
     margin: .8em 0 .3em 0;
     color: var(--body-quiet-color);
     font-weight: bold;
 }
 
 h4 {
-    font-size: 12px;
+    font-size: 0.75rem;
     margin: 1em 0 .8em 0;
     padding-bottom: 3px;
 }
 
 h5 {
-    font-size: 10px;
+    font-size: 0.625rem;
     margin: 1.5em 0 .5em 0;
     color: var(--body-quiet-color);
     text-transform: uppercase;
@@ -196,7 +162,7 @@ li ul {
 }
 
 li, dt, dd {
-    font-size: 13px;
+    font-size: 0.8125rem;
     line-height: 20px;
 }
 
@@ -223,7 +189,7 @@ fieldset {
 }
 
 blockquote {
-    font-size: 11px;
+    font-size: 0.6875rem;
     color: #777;
     margin-left: 2px;
     padding-left: 10px;
@@ -233,7 +199,7 @@ blockquote {
 code, pre {
     font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
     color: var(--body-quiet-color);
-    font-size: 12px;
+    font-size: 0.75rem;
     overflow-x: auto;
 }
 
@@ -255,22 +221,21 @@ hr {
     border: none;
     margin: 0;
     padding: 0;
-    font-size: 1px;
     line-height: 1px;
 }
 
 /* TEXT STYLES & MODIFIERS */
 
 .small {
-    font-size: 11px;
+    font-size: 0.6875rem;
 }
 
 .mini {
-    font-size: 10px;
+    font-size: 0.625rem;
 }
 
 .help, p.help, form p.help, div.help, form div.help, div.help li {
-    font-size: 11px;
+    font-size: 0.6875rem;
     color: var(--body-quiet-color);
 }
 
@@ -300,7 +265,7 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 /* TABLES */
@@ -311,7 +276,7 @@ table {
 }
 
 td, th {
-    font-size: 13px;
+    font-size: 0.8125rem;
     line-height: 16px;
     border-bottom: 1px solid var(--hairline-color);
     vertical-align: top;
@@ -327,7 +292,7 @@ thead th,
 tfoot td {
     color: var(--body-quiet-color);
     padding: 5px 10px;
-    font-size: 11px;
+    font-size: 0.6875rem;
     background: var(--body-bg);
     border: none;
     border-top: 1px solid var(--hairline-color);
@@ -437,7 +402,7 @@ table thead th.sorted .sortoptions a.sortremove:after {
     top: -6px;
     left: 3px;
     font-weight: 200;
-    font-size: 18px;
+    font-size: 1.125rem;
     color: var(--body-quiet-color);
 }
 
@@ -478,7 +443,7 @@ input, textarea, select, .form-row p, form .button {
     vertical-align: middle;
     font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
     font-weight: normal;
-    font-size: 13px;
+    font-size: 0.8125rem;
 }
 .form-row div.help {
     padding: 2px 3px;
@@ -589,7 +554,7 @@ input[type=button][disabled].default {
     margin: 0;
     padding: 8px;
     font-weight: 400;
-    font-size: 13px;
+    font-size: 0.8125rem;
     text-align: left;
     background: var(--primary);
     color: var(--header-link-color);
@@ -597,7 +562,7 @@ input[type=button][disabled].default {
 
 .module caption,
 .inline-group h2 {
-    font-size: 12px;
+    font-size: 0.75rem;
     letter-spacing: 0.5px;
     text-transform: uppercase;
 }
@@ -616,12 +581,13 @@ ul.messagelist {
 ul.messagelist li {
     display: block;
     font-weight: 400;
-    font-size: 13px;
+    font-size: 0.8125rem;
     padding: 10px 10px 10px 65px;
     margin: 0 0 10px 0;
     background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat;
     background-size: 16px auto;
     color: var(--body-fg);
+    word-break: break-word;
 }
 
 ul.messagelist li.warning {
@@ -635,7 +601,7 @@ ul.messagelist li.error {
 }
 
 .errornote {
-    font-size: 14px;
+    font-size: 0.875rem;
     font-weight: 700;
     display: block;
     padding: 10px 12px;
@@ -656,7 +622,7 @@ ul.errorlist {
 }
 
 ul.errorlist li {
-    font-size: 13px;
+    font-size: 0.8125rem;
     display: block;
     margin-bottom: 4px;
     overflow-wrap: break-word;
@@ -697,7 +663,7 @@ td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
 }
 
 .description {
-    font-size: 12px;
+    font-size: 0.75rem;
     padding: 5px 0 0 12px;
 }
 
@@ -753,7 +719,7 @@ a.deletelink:focus, a.deletelink:hover {
 /* OBJECT TOOLS */
 
 .object-tools {
-    font-size: 10px;
+    font-size: 0.625rem;
     font-weight: bold;
     padding-left: 0;
     float: right;
@@ -779,7 +745,7 @@ a.deletelink:focus, a.deletelink:hover {
     background: var(--object-tools-bg);
     color: var(--object-tools-fg);
     font-weight: 400;
-    font-size: 11px;
+    font-size: 0.6875rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -808,14 +774,21 @@ a.deletelink:focus, a.deletelink:hover {
 
 /* OBJECT HISTORY */
 
-table#change-history {
+#change-history table {
     width: 100%;
 }
 
-table#change-history tbody th {
+#change-history table tbody th {
     width: 16em;
 }
 
+#change-history .paginator {
+    color: var(--body-quiet-color);
+    border-bottom: 1px solid var(--hairline-color);
+    background: var(--body-bg);
+    overflow: hidden;
+}
+
 /* PAGE STRUCTURE */
 
 #container {
@@ -905,7 +878,7 @@ table#change-history tbody th {
     overflow: hidden;
 }
 
-#header a:link, #header a:visited {
+#header a:link, #header a:visited, #logout-form button {
     color: var(--header-link-color);
 }
 
@@ -921,17 +894,17 @@ table#change-history tbody th {
     padding: 0;
     margin: 0 20px 0 0;
     font-weight: 300;
-    font-size: 24px;
-    color: var(--accent);
+    font-size: 1.5rem;
+    color: var(--header-branding-color);
 }
 
-#branding h1, #branding h1 a:link, #branding h1 a:visited {
+#branding h1 a:link, #branding h1 a:visited {
     color: var(--accent);
 }
 
 #branding h2 {
     padding: 0 10px;
-    font-size: 14px;
+    font-size: 0.875rem;
     margin: -8px 0 8px 0;
     font-weight: normal;
     color: var(--header-color);
@@ -941,25 +914,43 @@ table#change-history tbody th {
     text-decoration: none;
 }
 
+#logout-form {
+    display: inline;
+}
+
+#logout-form button {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
+}
+
 #user-tools {
     float: right;
-    padding: 0;
     margin: 0 0 0 20px;
-    font-weight: 300;
-    font-size: 11px;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
     text-align: right;
 }
 
-#user-tools a {
+#user-tools, #logout-form button{
+    padding: 0;
+    font-weight: 300;
+    font-size: 0.6875rem;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+
+#user-tools a, #logout-form button {
     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
 }
 
-#user-tools a:focus, #user-tools a:hover {
+#user-tools a:focus, #user-tools a:hover,
+#logout-form button:active, #logout-form button:hover {
     text-decoration: none;
-    border-bottom-color: var(--primary);
-    color: var(--primary);
+    border-bottom: 0;
+}
+
+#logout-form button:active, #logout-form button:hover {
+    margin-bottom: 1px;
 }
 
 /* SIDEBAR */
@@ -979,7 +970,7 @@ table#change-history tbody th {
 }
 
 #content-related h4 {
-    font-size: 13px;
+    font-size: 0.8125rem;
 }
 
 #content-related p {
@@ -1003,7 +994,7 @@ table#change-history tbody th {
     padding: 16px;
     margin-bottom: 16px;
     border-bottom: 1px solid var(--hairline-color);
-    font-size: 18px;
+    font-size: 1.125rem;
     color: var(--body-fg);
 }
 
@@ -1050,3 +1041,49 @@ table#change-history tbody th {
 .popup #header {
     padding: 10px 20px;
 }
+
+/* PAGINATOR */
+
+.paginator {
+    font-size: 0.8125rem;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    line-height: 22px;
+    margin: 0;
+    border-top: 1px solid var(--hairline-color);
+    width: 100%;
+}
+
+.paginator a:link, .paginator a:visited {
+    padding: 2px 6px;
+    background: var(--button-bg);
+    text-decoration: none;
+    color: var(--button-fg);
+}
+
+.paginator a.showall {
+    border: none;
+    background: none;
+    color: var(--link-fg);
+}
+
+.paginator a.showall:focus, .paginator a.showall:hover {
+    background: none;
+    color: var(--link-hover-color);
+}
+
+.paginator .end {
+    margin-right: 6px;
+}
+
+.paginator .this-page {
+    padding: 2px 6px;
+    font-weight: bold;
+    font-size: 0.8125rem;
+    vertical-align: top;
+}
+
+.paginator a:focus, .paginator a:hover {
+    color: white;
+    background: var(--link-hover-color);
+}
diff --git a/static/admin/css/changelists.css b/static/admin/css/changelists.css
index a4baf32..68ba557 100644
--- a/static/admin/css/changelists.css
+++ b/static/admin/css/changelists.css
@@ -84,7 +84,7 @@
 
 #toolbar form input {
     border-radius: 4px;
-    font-size: 14px;
+    font-size: 0.875rem;
     padding: 5px;
     color: var(--body-fg);
 }
@@ -95,7 +95,7 @@
     padding: 2px 5px;
     margin: 0;
     vertical-align: top;
-    font-size: 13px;
+    font-size: 0.8125rem;
     max-width: 100%;
 }
 
@@ -105,7 +105,7 @@
 
 #toolbar form input[type="submit"] {
     border: 1px solid var(--border-color);
-    font-size: 13px;
+    font-size: 0.8125rem;
     padding: 4px 8px;
     margin: 0;
     vertical-align: middle;
@@ -140,7 +140,7 @@
 }
 
 #changelist-filter h2 {
-    font-size: 14px;
+    font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     padding: 5px 15px;
@@ -148,12 +148,35 @@
     border-bottom: none;
 }
 
-#changelist-filter h3 {
+#changelist-filter h3,
+#changelist-filter details summary {
     font-weight: 400;
     padding: 0 15px;
     margin-bottom: 10px;
 }
 
+#changelist-filter details summary > * {
+    display: inline;
+}
+
+#changelist-filter details > summary {
+    list-style-type: none;
+}
+
+#changelist-filter details > summary::-webkit-details-marker {
+    display: none;
+}
+
+#changelist-filter details > summary::before {
+    content: '→';
+    font-weight: bold;
+    color: var(--link-hover-color);
+}
+
+#changelist-filter details[open] > summary::before {
+    content: '↓';
+}
+
 #changelist-filter ul {
     margin: 5px 0;
     padding: 0 15px 15px;
@@ -173,8 +196,7 @@
 #changelist-filter a {
     display: block;
     color: var(--body-quiet-color);
-    text-overflow: ellipsis;
-    overflow-x: hidden;
+    word-break: break-word;
 }
 
 #changelist-filter li.selected {
@@ -194,7 +216,7 @@
 }
 
 #changelist-filter #changelist-filter-clear a {
-    font-size: 13px;
+    font-size: 0.8125rem;
     padding-bottom: 10px;
     border-bottom: 1px solid var(--hairline-color);
 }
@@ -225,52 +247,6 @@
     color: var(--link-hover-color);
 }
 
-/* PAGINATOR */
-
-.paginator {
-    font-size: 13px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    line-height: 22px;
-    margin: 0;
-    border-top: 1px solid var(--hairline-color);
-    width: 100%;
-}
-
-.paginator a:link, .paginator a:visited {
-    padding: 2px 6px;
-    background: var(--button-bg);
-    text-decoration: none;
-    color: var(--button-fg);
-}
-
-.paginator a.showall {
-    border: none;
-    background: none;
-    color: var(--link-fg);
-}
-
-.paginator a.showall:focus, .paginator a.showall:hover {
-    background: none;
-    color: var(--link-hover-color);
-}
-
-.paginator .end {
-    margin-right: 6px;
-}
-
-.paginator .this-page {
-    padding: 2px 6px;
-    font-weight: bold;
-    font-size: 13px;
-    vertical-align: top;
-}
-
-.paginator a:focus, .paginator a:hover {
-    color: white;
-    background: var(--link-hover-color);
-}
-
 /* ACTIONS */
 
 .filtered .actions {
@@ -296,17 +272,11 @@
     width: 100%;
 }
 
-#changelist .actions.selected { /* XXX Probably unused? */
-    background: var(--body-bg);
-    border-top: 1px solid var(--body-bg);
-    border-bottom: 1px solid #edecd6;
-}
-
 #changelist .actions span.all,
 #changelist .actions span.action-counter,
 #changelist .actions span.clear,
 #changelist .actions span.question {
-    font-size: 13px;
+    font-size: 0.8125rem;
     margin: 0 0.5em;
 }
 
@@ -320,7 +290,7 @@
     color: var(--body-fg);
     border: 1px solid var(--border-color);
     border-radius: 4px;
-    font-size: 14px;
+    font-size: 0.875rem;
     padding: 0 0 0 4px;
     margin: 0;
     margin-left: 10px;
@@ -333,11 +303,11 @@
 #changelist .actions label {
     display: inline-block;
     vertical-align: middle;
-    font-size: 13px;
+    font-size: 0.8125rem;
 }
 
 #changelist .actions .button {
-    font-size: 13px;
+    font-size: 0.8125rem;
     border: 1px solid var(--border-color);
     border-radius: 4px;
     background: var(--body-bg);
diff --git a/static/admin/css/dark_mode.css b/static/admin/css/dark_mode.css
new file mode 100644
index 0000000..547717c
--- /dev/null
+++ b/static/admin/css/dark_mode.css
@@ -0,0 +1,33 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+      --primary: #264b5d;
+      --primary-fg: #f7f7f7;
+  
+      --body-fg: #eeeeee;
+      --body-bg: #121212;
+      --body-quiet-color: #e0e0e0;
+      --body-loud-color: #ffffff;
+  
+      --breadcrumbs-link-fg: #e0e0e0;
+      --breadcrumbs-bg: var(--primary);
+  
+      --link-fg: #81d4fa;
+      --link-hover-color: #4ac1f7;
+      --link-selected-fg: #6f94c6;
+  
+      --hairline-color: #272727;
+      --border-color: #353535;
+  
+      --error-fg: #e35f5f;
+      --message-success-bg: #006b1b;
+      --message-warning-bg: #583305;
+      --message-error-bg: #570808;
+  
+      --darkened-bg: #212121;
+      --selected-bg: #1b1b1b;
+      --selected-row: #00363a;
+  
+      --close-button-bg: #333333;
+      --close-button-hover-bg: #666666;
+    }
+  }
diff --git a/static/admin/css/forms.css b/static/admin/css/forms.css
index bb44be7..e1873b3 100644
--- a/static/admin/css/forms.css
+++ b/static/admin/css/forms.css
@@ -5,7 +5,7 @@
 .form-row {
     overflow: hidden;
     padding: 10px;
-    font-size: 13px;
+    font-size: 0.8125rem;
     border-bottom: 1px solid var(--hairline-color);
 }
 
@@ -27,7 +27,7 @@ form .form-row p {
 label {
     font-weight: normal;
     color: var(--body-quiet-color);
-    font-size: 13px;
+    font-size: 0.8125rem;
 }
 
 .required label, label.required {
@@ -248,7 +248,7 @@ fieldset.monospace textarea {
 /* SUBMIT ROW */
 
 .submit-row {
-    padding: 12px 14px;
+    padding: 12px 14px 7px;
     margin: 0 0 20px;
     background: var(--darkened-bg);
     border: 1px solid var(--hairline-color);
@@ -264,11 +264,11 @@ body.popup .submit-row {
 .submit-row input {
     height: 35px;
     line-height: 15px;
-    margin: 0 0 0 5px;
+    margin: 0 0 5px 5px;
 }
 
 .submit-row input.default {
-    margin: 0 0 0 8px;
+    margin: 0 0 5px 8px;
     text-transform: uppercase;
 }
 
@@ -288,6 +288,7 @@ body.popup .submit-row {
     padding: 10px 15px;
     height: 15px;
     line-height: 15px;
+    margin-bottom: 5px;
     color: var(--button-fg);
 }
 
@@ -353,10 +354,6 @@ body.popup .submit-row {
     width: 2.2em;
 }
 
-.vTextField, .vUUIDField {
-    width: 20em;
-}
-
 .vIntegerField {
     width: 5em;
 }
@@ -369,6 +366,10 @@ body.popup .submit-row {
     width: 5em;
 }
 
+.vTextField, .vUUIDField {
+    width: 20em;
+}
+
 /* INLINES */
 
 .inline-group {
@@ -392,7 +393,7 @@ body.popup .submit-row {
     margin: 0;
     color: var(--body-quiet-color);
     padding: 5px;
-    font-size: 13px;
+    font-size: 0.8125rem;
     background: var(--darkened-bg);
     border-top: 1px solid var(--hairline-color);
     border-bottom: 1px solid var(--hairline-color);
@@ -404,7 +405,7 @@ body.popup .submit-row {
 
 .inline-related h3 span.delete label {
     margin-left: 2px;
-    font-size: 11px;
+    font-size: 0.6875rem;
 }
 
 .inline-related fieldset {
@@ -417,7 +418,7 @@ body.popup .submit-row {
 .inline-related fieldset.module h3 {
     margin: 0;
     padding: 2px 5px 3px 5px;
-    font-size: 11px;
+    font-size: 0.6875rem;
     text-align: left;
     font-weight: bold;
     background: #bcd;
@@ -458,7 +459,7 @@ body.popup .submit-row {
     height: 1.1em;
     padding: 2px 9px;
     overflow: hidden;
-    font-size: 9px;
+    font-size: 0.5625rem;
     font-weight: bold;
     color: var(--body-quiet-color);
     _width: 700px;
@@ -493,7 +494,7 @@ body.popup .submit-row {
 .inline-group .tabular tr.add-row td a {
     background: url(../img/icon-addlink.svg) 0 1px no-repeat;
     padding-left: 16px;
-    font-size: 12px;
+    font-size: 0.75rem;
 }
 
 .empty-form {
diff --git a/static/admin/css/login.css b/static/admin/css/login.css
index bf4ba8d..389772f 100644
--- a/static/admin/css/login.css
+++ b/static/admin/css/login.css
@@ -12,7 +12,7 @@
 }
 
 .login #header h1 {
-    font-size: 18px;
+    font-size: 1.125rem;
     margin: 0;
 }
 
diff --git a/static/admin/css/nav_sidebar.css b/static/admin/css/nav_sidebar.css
index 0c590ff..5fd2ff0 100644
--- a/static/admin/css/nav_sidebar.css
+++ b/static/admin/css/nav_sidebar.css
@@ -16,7 +16,7 @@
     border-right: 1px solid var(--hairline-color);
     background-color: var(--body-bg);
     cursor: pointer;
-    font-size: 20px;
+    font-size: 1.25rem;
     color: var(--link-fg);
     padding: 0;
 }
diff --git a/static/admin/css/responsive.css b/static/admin/css/responsive.css
index 5779c5a..9a4615d 100644
--- a/static/admin/css/responsive.css
+++ b/static/admin/css/responsive.css
@@ -14,11 +14,11 @@ input[type="submit"], button {
 
     td, th {
         padding: 10px;
-        font-size: 14px;
+        font-size: 0.875rem;
     }
 
     .small {
-        font-size: 12px;
+        font-size: 0.75rem;
     }
 
     /* Layout */
@@ -28,7 +28,7 @@ input[type="submit"], button {
     }
 
     #content {
-        padding: 20px 30px 30px;
+        padding: 15px 20px 20px;
     }
 
     div.breadcrumbs {
@@ -45,7 +45,6 @@ input[type="submit"], button {
 
     #branding h1 {
         margin: 0 0 8px;
-        font-size: 20px;
         line-height: 1.2;
     }
 
@@ -88,7 +87,7 @@ input[type="submit"], button {
     }
 
     td .changelink, td .addlink {
-        font-size: 13px;
+        font-size: 0.8125rem;
     }
 
     /* Changelist */
@@ -131,10 +130,6 @@ input[type="submit"], button {
         padding: 15px 0;
     }
 
-    #changelist .actions.selected {
-        border: none;
-    }
-
     #changelist .actions label {
         display: flex;
     }
@@ -152,7 +147,7 @@ input[type="submit"], button {
     #changelist .actions span.clear,
     #changelist .actions span.question,
     #changelist .actions span.action-counter {
-        font-size: 11px;
+        font-size: 0.6875rem;
         margin: 0 10px 0 0;
     }
 
@@ -176,7 +171,7 @@ input[type="submit"], button {
     /* Forms */
 
     label {
-        font-size: 14px;
+        font-size: 0.875rem;
     }
 
     .form-row input[type=text],
@@ -192,7 +187,7 @@ input[type="submit"], button {
         margin: 0;
         padding: 6px 8px;
         min-height: 36px;
-        font-size: 14px;
+        font-size: 0.875rem;
     }
 
     .form-row select {
@@ -236,6 +231,22 @@ input[type="submit"], button {
         margin-left: 2px;
     }
 
+    .submit-row {
+        padding: 8px 8px 3px 8px;
+    }
+
+    .submit-row a.deletelink {
+        padding: 10px 7px;
+    }
+
+    .submit-row input.default {
+        margin: 0 0 5px 5px;
+    }
+
+    .button, input[type=submit], input[type=button], .submit-row input, a.button {
+        padding: 7px;
+    }
+
     /* Related widget */
 
     .related-widget-wrapper {
@@ -393,12 +404,12 @@ input[type="submit"], button {
     }
 
     .datetime span {
-        font-size: 13px;
+        font-size: 0.8125rem;
     }
 
     .datetime .timezonewarning {
         display: block;
-        font-size: 11px;
+        font-size: 0.6875rem;
         color: var(--body-quiet-color);
     }
 
@@ -496,7 +507,7 @@ input[type="submit"], button {
 
     #content-related .module h2 {
         padding: 10px 15px;
-        font-size: 16px;
+        font-size: 1rem;
     }
 
     /* Changelist */
@@ -622,7 +633,7 @@ input[type="submit"], button {
 
     .aligned p.file-upload {
         margin-left: 0;
-        font-size: 13px;
+        font-size: 0.8125rem;
     }
 
     span.clearable-file-input {
@@ -630,7 +641,7 @@ input[type="submit"], button {
     }
 
     span.clearable-file-input label {
-        font-size: 13px;
+        font-size: 0.8125rem;
         padding-bottom: 0;
     }
 
@@ -812,7 +823,7 @@ input[type="submit"], button {
     /* Submit row */
 
     .submit-row {
-        padding: 10px 10px 0;
+        padding: 10px 10px 5px;
         margin: 0 0 15px;
         display: flex;
         flex-direction: column;
@@ -907,7 +918,7 @@ input[type="submit"], button {
     .errornote {
         margin: 0 0 20px;
         padding: 8px 12px;
-        font-size: 13px;
+        font-size: 0.8125rem;
     }
 
     /* Calendar and clock */
@@ -954,7 +965,7 @@ input[type="submit"], button {
 
     .calendar-shortcuts {
         padding: 10px 0;
-        font-size: 12px;
+        font-size: 0.75rem;
         line-height: 12px;
     }
 
@@ -987,7 +998,7 @@ input[type="submit"], button {
     /* History */
 
     table#change-history tbody th, table#change-history tbody td {
-        font-size: 13px;
+        font-size: 0.8125rem;
         word-break: break-word;
     }
 
@@ -998,7 +1009,7 @@ input[type="submit"], button {
     /* Docs */
 
     table.model tbody th, table.model tbody td {
-        font-size: 13px;
+        font-size: 0.8125rem;
         word-break: break-word;
     }
 }
diff --git a/static/admin/css/rtl.css b/static/admin/css/rtl.css
index 0447f89..e0fadce 100644
--- a/static/admin/css/rtl.css
+++ b/static/admin/css/rtl.css
@@ -175,12 +175,24 @@ fieldset .fieldBox {
     top: 0;
     left: auto;
     right: 10px;
+    background: url(../img/calendar-icons.svg) 0 -30px no-repeat;
+}
+
+.calendarbox .calendarnav-previous:focus,
+.calendarbox .calendarnav-previous:hover {
+    background-position: 0 -45px;
 }
 
 .calendarnav-next {
     top: 0;
     right: auto;
     left: 10px;
+    background: url(../img/calendar-icons.svg) 0 0 no-repeat;
+}
+
+.calendarbox .calendarnav-next:focus,
+.calendarbox .calendarnav-next:hover {
+    background-position: 0 -15px;
 }
 
 .calendar caption, .calendarbox h2 {
diff --git a/static/admin/css/widgets.css b/static/admin/css/widgets.css
index c7d6456..cd1d6b4 100644
--- a/static/admin/css/widgets.css
+++ b/static/admin/css/widgets.css
@@ -3,18 +3,21 @@
 .selector {
     width: 800px;
     float: left;
+    display: flex;
 }
 
 .selector select {
     width: 380px;
     height: 17.2em;
+    flex: 1 0 auto;
 }
 
 .selector-available, .selector-chosen {
-    float: left;
     width: 380px;
     text-align: center;
     margin-bottom: 5px;
+    display: flex;
+    flex-direction: column;
 }
 
 .selector-chosen select {
@@ -41,7 +44,7 @@
     border-width: 0 1px;
     padding: 8px;
     color: var(--body-quiet-color);
-    font-size: 10px;
+    font-size: 0.625rem;
     margin: 0;
     text-align: left;
 }
@@ -63,12 +66,13 @@
 }
 
 .selector ul.selector-chooser {
-    float: left;
+    align-self: center;
     width: 22px;
     background-color: var(--selected-bg);
     border-radius: 10px;
-    margin: 10em 5px 0 5px;
+    margin: 0 5px;
     padding: 0;
+    transform: translateY(-17px);
 }
 
 .selector-chooser li {
@@ -168,6 +172,7 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover {
 .stacked {
     float: left;
     width: 490px;
+    display: block;
 }
 
 .stacked select {
@@ -193,6 +198,7 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover {
     margin: 0 0 10px 40%;
     background-color: #eee;
     border-radius: 10px;
+    transform: none;
 }
 
 .stacked .selector-chooser li {
@@ -267,7 +273,7 @@ p.datetime {
 .datetime span {
     white-space: nowrap;
     font-weight: normal;
-    font-size: 11px;
+    font-size: 0.6875rem;
     color: var(--body-quiet-color);
 }
 
@@ -277,7 +283,7 @@ p.datetime {
 }
 
 table p.datetime {
-    font-size: 11px;
+    font-size: 0.6875rem;
     margin-left: 0;
     padding-left: 0;
 }
@@ -311,7 +317,7 @@ table p.datetime {
 }
 
 .timezonewarning {
-    font-size: 11px;
+    font-size: 0.6875rem;
     color: var(--body-quiet-color);
 }
 
@@ -322,7 +328,7 @@ p.url {
     margin: 0;
     padding: 0;
     color: var(--body-quiet-color);
-    font-size: 11px;
+    font-size: 0.6875rem;
     font-weight: bold;
 }
 
@@ -337,7 +343,7 @@ p.file-upload {
     margin: 0;
     padding: 0;
     color: var(--body-quiet-color);
-    font-size: 11px;
+    font-size: 0.6875rem;
     font-weight: bold;
 }
 
@@ -355,7 +361,7 @@ p.file-upload {
 
 span.clearable-file-input label {
     color: var(--body-fg);
-    font-size: 11px;
+    font-size: 0.6875rem;
     display: inline;
     float: none;
 }
@@ -364,7 +370,7 @@ span.clearable-file-input label {
 
 .calendarbox, .clockbox {
     margin: 5px auto;
-    font-size: 12px;
+    font-size: 0.75rem;
     width: 19em;
     text-align: center;
     background: var(--body-bg);
@@ -398,7 +404,7 @@ span.clearable-file-input label {
     text-align: center;
     border-top: none;
     font-weight: 700;
-    font-size: 12px;
+    font-size: 0.75rem;
     color: #333;
     background: var(--accent);
 }
@@ -408,14 +414,14 @@ span.clearable-file-input label {
     background: var(--darkened-bg);
     border-bottom: 1px solid var(--border-color);
     font-weight: 400;
-    font-size: 12px;
+    font-size: 0.75rem;
     text-align: center;
     color: var(--body-quiet-color);
 }
 
 .calendar td {
     font-weight: 400;
-    font-size: 12px;
+    font-size: 0.75rem;
     text-align: center;
     padding: 0;
     border-top: 1px solid var(--hairline-color);
@@ -455,7 +461,7 @@ span.clearable-file-input label {
 }
 
 .calendarnav {
-    font-size: 10px;
+    font-size: 0.625rem;
     text-align: center;
     color: #ccc;
     margin: 0;
@@ -470,7 +476,7 @@ span.clearable-file-input label {
 .calendar-shortcuts {
     background: var(--body-bg);
     color: var(--body-quiet-color);
-    font-size: 11px;
+    font-size: 0.6875rem;
     line-height: 11px;
     border-top: 1px solid var(--hairline-color);
     padding: 8px 0;
@@ -509,7 +515,7 @@ span.clearable-file-input label {
 .calendar-cancel {
     margin: 0;
     padding: 4px 0;
-    font-size: 12px;
+    font-size: 0.75rem;
     background: #eee;
     border-top: 1px solid var(--border-color);
     color: var(--body-fg);
diff --git a/static/admin/js/SelectFilter2.js b/static/admin/js/SelectFilter2.js
index 6c709a0..194c2db 100644
--- a/static/admin/js/SelectFilter2.js
+++ b/static/admin/js/SelectFilter2.js
@@ -153,24 +153,6 @@ Requires core.js and SelectBox.js.
             // Move selected from_box options to to_box
             SelectBox.move(field_id + '_from', field_id + '_to');
 
-            if (!is_stacked) {
-                // In horizontal mode, give the same height to the two boxes.
-                const j_from_box = document.getElementById(field_id + '_from');
-                const j_to_box = document.getElementById(field_id + '_to');
-                let height = filter_p.offsetHeight + j_from_box.offsetHeight;
-
-                const j_to_box_style = window.getComputedStyle(j_to_box);
-                if (j_to_box_style.getPropertyValue('box-sizing') === 'border-box') {
-                    // Add the padding and border to the final height.
-                    height += parseInt(j_to_box_style.getPropertyValue('padding-top'), 10)
-                        + parseInt(j_to_box_style.getPropertyValue('padding-bottom'), 10)
-                        + parseInt(j_to_box_style.getPropertyValue('border-top-width'), 10)
-                        + parseInt(j_to_box_style.getPropertyValue('border-bottom-width'), 10);
-                }
-
-                j_to_box.style.height = height + 'px';
-            }
-
             // Initial icon refresh
             SelectFilter.refresh_icons(field_id);
         },
diff --git a/static/admin/js/admin/DateTimeShortcuts.js b/static/admin/js/admin/DateTimeShortcuts.js
index 9bad0f5..176b0e3 100644
--- a/static/admin/js/admin/DateTimeShortcuts.js
+++ b/static/admin/js/admin/DateTimeShortcuts.js
@@ -388,13 +388,7 @@
             DateTimeShortcuts.calendars[num].drawNextMonth();
         },
         handleCalendarCallback: function(num) {
-            let format = get_format('DATE_INPUT_FORMATS')[0];
-            // the format needs to be escaped a little
-            format = format.replace('\\', '\\\\')
-                .replace('\r', '\\r')
-                .replace('\n', '\\n')
-                .replace('\t', '\\t')
-                .replace("'", "\\'");
+            const format = get_format('DATE_INPUT_FORMATS')[0];
             return function(y, m, d) {
                 DateTimeShortcuts.calendarInputs[num].value = new Date(y, m - 1, d).strftime(format);
                 DateTimeShortcuts.calendarInputs[num].focus();
diff --git a/static/admin/js/admin/RelatedObjectLookups.js b/static/admin/js/admin/RelatedObjectLookups.js
index 289e1ce..752dcad 100644
--- a/static/admin/js/admin/RelatedObjectLookups.js
+++ b/static/admin/js/admin/RelatedObjectLookups.js
@@ -4,14 +4,45 @@
 'use strict';
 {
     const $ = django.jQuery;
+    let popupIndex = 0;
+    const relatedWindows = [];
+
+    function dismissChildPopups() {
+        relatedWindows.forEach(function(win) {
+            if(!win.closed) {
+                win.dismissChildPopups();
+                win.close();    
+            }
+        });
+    }
+
+    function setPopupIndex() {
+        if(document.getElementsByName("_popup").length > 0) {
+            const index = window.name.lastIndexOf("__") + 2;
+            popupIndex = parseInt(window.name.substring(index));   
+        } else {
+            popupIndex = 0;
+        }
+    }
+
+    function addPopupIndex(name) {
+        name = name + "__" + (popupIndex + 1);
+        return name;
+    }
+
+    function removePopupIndex(name) {
+        name = name.replace(new RegExp("__" + (popupIndex + 1) + "$"), '');
+        return name;
+    }
 
     function showAdminPopup(triggeringLink, name_regexp, add_popup) {
-        const name = triggeringLink.id.replace(name_regexp, '');
+        const name = addPopupIndex(triggeringLink.id.replace(name_regexp, ''));
         const href = new URL(triggeringLink.href);
         if (add_popup) {
             href.searchParams.set('_popup', 1);
         }
         const win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
+        relatedWindows.push(win);
         win.focus();
         return false;
     }
@@ -21,13 +52,17 @@
     }
 
     function dismissRelatedLookupPopup(win, chosenId) {
-        const name = win.name;
+        const name = removePopupIndex(win.name);
         const elem = document.getElementById(name);
         if (elem.classList.contains('vManyToManyRawIdAdminField') && elem.value) {
             elem.value += ',' + chosenId;
         } else {
             document.getElementById(name).value = chosenId;
         }
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
         win.close();
     }
 
@@ -52,13 +87,44 @@
         }
     }
 
+    function updateRelatedSelectsOptions(currentSelect, win, objId, newRepr, newId) {
+        // After create/edit a model from the options next to the current
+        // select (+ or :pencil:) update ForeignKey PK of the rest of selects
+        // in the page.
+
+        const path = win.location.pathname;
+        // Extract the model from the popup url '.../<model>/add/' or
+        // '.../<model>/<id>/change/' depending the action (add or change).
+        const modelName = path.split('/')[path.split('/').length - (objId ? 4 : 3)];
+        // Exclude autocomplete selects.
+        const selectsRelated = document.querySelectorAll(`[data-model-ref="${modelName}"] select:not(.admin-autocomplete)`);
+
+        selectsRelated.forEach(function(select) {
+            if (currentSelect === select) {
+                return;
+            }
+
+            let option = select.querySelector(`option[value="${objId}"]`);
+
+            if (!option) {
+                option = new Option(newRepr, newId);
+                select.options.add(option);
+                return;
+            }
+
+            option.textContent = newRepr;
+            option.value = newId;
+        });
+    }
+
     function dismissAddRelatedObjectPopup(win, newId, newRepr) {
-        const name = win.name;
+        const name = removePopupIndex(win.name);
         const elem = document.getElementById(name);
         if (elem) {
             const elemName = elem.nodeName.toUpperCase();
             if (elemName === 'SELECT') {
                 elem.options[elem.options.length] = new Option(newRepr, newId, true, true);
+                updateRelatedSelectsOptions(elem, win, null, newRepr, newId);
             } else if (elemName === 'INPUT') {
                 if (elem.classList.contains('vManyToManyRawIdAdminField') && elem.value) {
                     elem.value += ',' + newId;
@@ -74,11 +140,15 @@
             SelectBox.add_to_cache(toId, o);
             SelectBox.redisplay(toId);
         }
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
         win.close();
     }
 
     function dismissChangeRelatedObjectPopup(win, objId, newRepr, newId) {
-        const id = win.name.replace(/^edit_/, '');
+        const id = removePopupIndex(win.name.replace(/^edit_/, ''));
         const selectsSelector = interpolate('#%s, #%s_from, #%s_to', [id, id, id]);
         const selects = $(selectsSelector);
         selects.find('option').each(function() {
@@ -86,18 +156,23 @@
                 this.textContent = newRepr;
                 this.value = newId;
             }
-        });
+        }).trigger('change');
+        updateRelatedSelectsOptions(selects[0], win, objId, newRepr, newId);
         selects.next().find('.select2-selection__rendered').each(function() {
             // The element can have a clear button as a child.
             // Use the lastChild to modify only the displayed value.
             this.lastChild.textContent = newRepr;
             this.title = newRepr;
         });
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
         win.close();
     }
 
     function dismissDeleteRelatedObjectPopup(win, objId) {
-        const id = win.name.replace(/^delete_/, '');
+        const id = removePopupIndex(win.name.replace(/^delete_/, ''));
         const selectsSelector = interpolate('#%s, #%s_from, #%s_to', [id, id, id]);
         const selects = $(selectsSelector);
         selects.find('option').each(function() {
@@ -105,6 +180,10 @@
                 $(this).remove();
             }
         }).trigger('change');
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
         win.close();
     }
 
@@ -115,17 +194,23 @@
     window.dismissAddRelatedObjectPopup = dismissAddRelatedObjectPopup;
     window.dismissChangeRelatedObjectPopup = dismissChangeRelatedObjectPopup;
     window.dismissDeleteRelatedObjectPopup = dismissDeleteRelatedObjectPopup;
+    window.dismissChildPopups = dismissChildPopups;
 
     // Kept for backward compatibility
     window.showAddAnotherPopup = showRelatedObjectPopup;
     window.dismissAddAnotherPopup = dismissAddRelatedObjectPopup;
 
+    window.addEventListener('unload', function(evt) {
+        window.dismissChildPopups();
+    });
+
     $(document).ready(function() {
+        setPopupIndex();
         $("a[data-popup-opener]").on('click', function(event) {
             event.preventDefault();
             opener.dismissRelatedLookupPopup(window, $(this).data("popup-opener"));
         });
-        $('body').on('click', '.related-widget-wrapper-link', function(e) {
+        $('body').on('click', '.related-widget-wrapper-link[data-popup="yes"]', function(e) {
             e.preventDefault();
             if (this.href) {
                 const event = $.Event('django:show-related', {href: this.href});
diff --git a/static/admin/js/autocomplete.js b/static/admin/js/autocomplete.js
index 6095abe..d3daeab 100644
--- a/static/admin/js/autocomplete.js
+++ b/static/admin/js/autocomplete.js
@@ -27,9 +27,7 @@
         $('.admin-autocomplete').not('[name*=__prefix__]').djangoAdminSelect2();
     });
 
-    $(document).on('formset:added', (function() {
-        return function(event, $newFormset) {
-            return $newFormset.find('.admin-autocomplete').djangoAdminSelect2();
-        };
-    })(this));
+    document.addEventListener('formset:added', (event) => {
+        $(event.target).find('.admin-autocomplete').djangoAdminSelect2();
+    });
 }
diff --git a/static/admin/js/filters.js b/static/admin/js/filters.js
new file mode 100644
index 0000000..ba691ac
--- /dev/null
+++ b/static/admin/js/filters.js
@@ -0,0 +1,30 @@
+/**
+ * Persist changelist filters state (collapsed/expanded).
+ */
+'use strict';
+{
+    // Init filters.
+    let filters = JSON.parse(sessionStorage.getItem('django.admin.filtersState'));
+
+    if (!filters) {
+        filters = {};
+    }
+
+    Object.entries(filters).forEach(([key, value]) => {
+        const detailElement = document.querySelector(`[data-filter-title='${key}']`);
+
+        // Check if the filter is present, it could be from other view.
+        if (detailElement) {
+            value ? detailElement.setAttribute('open', '') : detailElement.removeAttribute('open');
+        }
+    });
+
+    // Save filter state when clicks.
+    const details = document.querySelectorAll('details');
+    details.forEach(detail => {
+        detail.addEventListener('toggle', event => {
+            filters[`${event.target.dataset.filterTitle}`] = detail.open;
+            sessionStorage.setItem('django.admin.filtersState', JSON.stringify(filters));
+        });
+    });
+}
diff --git a/static/admin/js/inlines.js b/static/admin/js/inlines.js
index d9a9032..e9a1dfe 100644
--- a/static/admin/js/inlines.js
+++ b/static/admin/js/inlines.js
@@ -88,7 +88,12 @@
             if (options.added) {
                 options.added(row);
             }
-            $(document).trigger('formset:added', [row, options.prefix]);
+            row.get(0).dispatchEvent(new CustomEvent("formset:added", {
+                bubbles: true,
+                detail: {
+                    formsetName: options.prefix
+                }
+            }));
         };
 
         /**
@@ -130,7 +135,11 @@
             if (options.removed) {
                 options.removed(row);
             }
-            $(document).trigger('formset:removed', [row, options.prefix]);
+            document.dispatchEvent(new CustomEvent("formset:removed", {
+                detail: {
+                    formsetName: options.prefix
+                }
+            }));
             // Update the TOTAL_FORMS form count.
             const forms = $("." + options.formCssClass);
             $("#id_" + options.prefix + "-TOTAL_FORMS").val(forms.length);
@@ -296,7 +305,13 @@
                     dependency_list = input.data('dependency_list') || [],
                     dependencies = [];
                 $.each(dependency_list, function(i, field_name) {
-                    dependencies.push('#' + row.find('.form-row .field-' + field_name).find('input, select, textarea').attr('id'));
+                    // Dependency in a fieldset.
+                    let field_element = row.find('.form-row .field-' + field_name);
+                    // Dependency without a fieldset.
+                    if (!field_element.length) {
+                        field_element = row.find('.form-row.field-' + field_name);
+                    }
+                    dependencies.push('#' + field_element.find('input, select, textarea').attr('id'));
                 });
                 if (dependencies.length) {
                     input.prepopulate(dependencies, input.attr('maxlength'));
diff --git a/static/admin/js/prepopulate_init.js b/static/admin/js/prepopulate_init.js
index 72ebdcf..a58841f 100644
--- a/static/admin/js/prepopulate_init.js
+++ b/static/admin/js/prepopulate_init.js
@@ -3,7 +3,11 @@
     const $ = django.jQuery;
     const fields = $('#django-admin-prepopulated-fields-constants').data('prepopulatedFields');
     $.each(fields, function(index, field) {
-        $('.empty-form .form-row .field-' + field.name + ', .empty-form.form-row .field-' + field.name).addClass('prepopulated_field');
+        $(
+            '.empty-form .form-row .field-' + field.name +
+            ', .empty-form.form-row .field-' + field.name +
+            ', .empty-form .form-row.field-' + field.name
+        ).addClass('prepopulated_field');
         $(field.id).data('dependency_list', field.dependency_list).prepopulate(
             field.dependency_ids, field.maxLength, field.allowUnicode
         );
diff --git a/static/css/dist/styles.css b/static/css/dist/styles.css
index 2cb48a7..87a7130 100644
--- a/static/css/dist/styles.css
+++ b/static/css/dist/styles.css
@@ -1295,6 +1295,10 @@ select {
   margin: 1rem;
 }
 
+.m-0 {
+  margin: 0px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1310,6 +1314,21 @@ select {
   margin-bottom: 0.5rem;
 }
 
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1334,6 +1353,10 @@ select {
   margin-bottom: auto;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -1342,10 +1365,6 @@ select {
   display: inline-block;
 }
 
-.inline {
-  display: inline;
-}
-
 .flex {
   display: flex;
 }
@@ -1354,10 +1373,6 @@ select {
   display: table;
 }
 
-.grid {
-  display: grid;
-}
-
 .contents {
   display: contents;
 }
@@ -1366,6 +1381,10 @@ select {
   display: none;
 }
 
+.h-auto {
+  height: auto;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -1418,10 +1437,6 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.resize {
-  resize: both;
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -1667,15 +1682,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.outline {
-  outline-style: solid;
-}
-
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
diff --git a/theme/static/css/dist/styles.css b/theme/static/css/dist/styles.css
index ff80b20..87a7130 100644
--- a/theme/static/css/dist/styles.css
+++ b/theme/static/css/dist/styles.css
@@ -1081,22 +1081,6 @@ select {
   margin-bottom: 0;
 }
 
-.btn {
-  display: inline-block;
-  border-radius: 0.375rem;
-  border-width: 1px;
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .button {
   display: inline-block;
   border-radius: 0.375rem;
@@ -1381,10 +1365,6 @@ select {
   display: inline-block;
 }
 
-.inline {
-  display: inline;
-}
-
 .flex {
   display: flex;
 }
@@ -1393,10 +1373,6 @@ select {
   display: table;
 }
 
-.grid {
-  display: grid;
-}
-
 .contents {
   display: contents;
 }
@@ -1461,10 +1437,6 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.resize {
-  resize: both;
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -1710,15 +1682,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.outline {
-  outline-style: solid;
-}
-
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }