Deploy: Dockerfile for HF Spaces, Django+WhiteNoise SPA setup, same-origin API, requirements updates

Dockerfile

@@ -0,0 +1,50 @@
+# syntax=docker/dockerfile:1
+
+FROM node:20-slim AS frontend_builder
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm ci --no-audit --fund=false
+COPY frontend/ .
+RUN npm run build
+
+FROM python:3.11-slim AS backend
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1
+
+WORKDIR /app
+
+# System deps
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    curl \
+ && rm -rf /var/lib/apt/lists/*
+
+# Copy backend
+COPY backend /app/backend
+
+# Copy frontend build artifacts
+COPY --from=frontend_builder /app/frontend/build /app/frontend/build
+
+WORKDIR /app/backend
+
+# Install Python deps
+RUN pip install --no-cache-dir --upgrade pip \
+ && pip install --no-cache-dir -r requirements.txt
+
+# Collect static
+ENV DJANGO_SETTINGS_MODULE=core.settings
+RUN python manage.py collectstatic --noinput
+
+# Runtime env
+ENV DJANGO_DEBUG=False \
+    DJANGO_ALLOWED_HOSTS=.hf.space,localhost,127.0.0.1 \
+    DJANGO_CSRF_TRUSTED_ORIGINS=https://*.hf.space \
+    DJANGO_CORS_ALLOWED_ORIGINS= \
+    PORT=7860
+
+EXPOSE 7860
+
+# Run DB migrations at container start, then start gunicorn
+CMD ["sh", "-c", "python manage.py migrate --noinput && gunicorn core.wsgi:application --bind 0.0.0.0:${PORT} --workers 2 --threads 4 --timeout 120"]
+
+

backend/core/settings.py

@@ -68,6 +68,7 @@ CORS_ALLOW_CREDENTIALS = True
 
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
+    'whitenoise.middleware.WhiteNoiseMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -82,7 +83,9 @@ ROOT_URLCONF = 'core.urls'
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [
+            (BASE_DIR.parent / 'frontend' / 'build'),
+        ],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -143,7 +146,11 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/5.2/howto/static-files/
 
-STATIC_URL = 'static/'
+STATIC_URL = '/static/'
+STATIC_ROOT = BASE_DIR / 'staticfiles'
+STATICFILES_DIRS = [
+    BASE_DIR.parent / 'frontend' / 'build' / 'static',
+]
 
 # Media files
 MEDIA_URL = '/media/'
@@ -166,4 +173,5 @@ SESSION_COOKIE_SECURE = not DEBUG
 CSRF_COOKIE_SECURE = not DEBUG
 SECURE_HSTS_SECONDS = 31536000 if not DEBUG else 0
 SECURE_HSTS_INCLUDE_SUBDOMAINS = not DEBUG
-SECURE_HSTS_PRELOAD = not DEBUG
+SECURE_HSTS_PRELOAD = not DEBUG
+STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

backend/core/urls.py

@@ -15,14 +15,16 @@ Including another URLconf
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path, include
+from django.urls import path, include, re_path
 from django.conf import settings
 from django.conf.urls.static import static
+from django.views.generic import TemplateView
 
 urlpatterns = [
     path('super-secret-admin-path/', admin.site.urls),
     path('api/', include('api.urls')),
+    # Catch-all to serve React SPA
+    re_path(r'^(?!api/).*$', TemplateView.as_view(template_name='index.html')),
 ]
 
-if settings.DEBUG:
-    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

backend/requirements.txt

@@ -2,3 +2,5 @@ django
 djangorestframework
 django-cors-headers
 gradio_client
+whitenoise
+gunicorn

backend/staticfiles/admin/css/autocomplete.css

@@ -0,0 +1,279 @@
+select.admin-autocomplete {
+    width: 20em;
+}
+
+.select2-container--admin-autocomplete.select2-container {
+    min-height: 30px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single,
+.select2-container--admin-autocomplete .select2-selection--multiple {
+    min-height: 30px;
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection,
+.select2-container--admin-autocomplete.select2-container--open .select2-selection {
+    border-color: var(--body-quiet-color);
+    min-height: 30px;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--single,
+.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--single {
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--multiple,
+.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--multiple {
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single {
+    background-color: var(--body-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
+    color: var(--body-fg);
+    line-height: 30px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__placeholder {
+    color: var(--body-quiet-color);
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow b {
+    border-color: #888 transparent transparent transparent;
+    border-style: solid;
+    border-width: 5px 4px 0 4px;
+    height: 0;
+    left: 50%;
+    margin-left: -4px;
+    margin-top: -2px;
+    position: absolute;
+    top: 50%;
+    width: 0;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__clear {
+    float: left;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+    left: 1px;
+    right: auto;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single {
+    background-color: var(--darkened-bg);
+    cursor: default;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single .select2-selection__clear {
+    display: none;
+}
+
+.select2-container--admin-autocomplete.select2-container--open .select2-selection--single .select2-selection__arrow b {
+    border-color: transparent transparent #888 transparent;
+    border-width: 0 4px 5px 4px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple {
+    background-color: var(--body-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: text;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered {
+    box-sizing: border-box;
+    list-style: none;
+    margin: 0;
+    padding: 0 10px 5px 5px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered li {
+    list-style: none;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__placeholder {
+    color: var(--body-quiet-color);
+    margin-top: 5px;
+    float: left;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin: 5px;
+    position: absolute;
+    right: 0;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice {
+    background-color: var(--darkened-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove {
+    color: var(--body-quiet-color);
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove:hover {
+    color: var(--body-fg);
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-search--inline {
+    float: right;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+    margin-left: 5px;
+    margin-right: auto;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+    margin-left: 2px;
+    margin-right: auto;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection--multiple {
+    border: solid var(--body-quiet-color) 1px;
+    outline: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--multiple {
+    background-color: var(--darkened-bg);
+    cursor: default;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection__choice__remove {
+    display: none;
+}
+
+.select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--multiple {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--multiple {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.select2-container--admin-autocomplete .select2-search--dropdown {
+    background: var(--darkened-bg);
+}
+
+.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
+    background: var(--body-bg);
+    color: var(--body-fg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.select2-container--admin-autocomplete .select2-search--inline .select2-search__field {
+    background: transparent;
+    color: var(--body-fg);
+    border: none;
+    outline: 0;
+    box-shadow: none;
+    -webkit-appearance: textfield;
+}
+
+.select2-container--admin-autocomplete .select2-results > .select2-results__options {
+    max-height: 200px;
+    overflow-y: auto;
+    color: var(--body-fg);
+    background: var(--body-bg);
+}
+
+.select2-container--admin-autocomplete .select2-results__option[role=group] {
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete .select2-results__option[aria-disabled=true] {
+    color: var(--body-quiet-color);
+}
+
+.select2-container--admin-autocomplete .select2-results__option[aria-selected=true] {
+    background-color: var(--selected-bg);
+    color: var(--body-fg);
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option {
+    padding-left: 1em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__group {
+    padding-left: 0;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -1em;
+    padding-left: 2em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -2em;
+    padding-left: 3em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -3em;
+    padding-left: 4em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -4em;
+    padding-left: 5em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -5em;
+    padding-left: 6em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
+    background-color: var(--primary);
+    color: var(--primary-fg);
+}
+
+.select2-container--admin-autocomplete .select2-results__group {
+    cursor: default;
+    display: block;
+    padding: 6px;
+}
+
+.errors .select2-selection {
+    border: 1px solid var(--error-fg);
+}

backend/staticfiles/admin/css/base.css

@@ -0,0 +1,1180 @@
+/*
+    DJANGO Admin styles
+*/
+
+/* VARIABLE DEFINITIONS */
+html[data-theme="light"],
+:root {
+    --primary: #79aec8;
+    --secondary: #417690;
+    --accent: #f5dd5d;
+    --primary-fg: #fff;
+
+    --body-fg: #333;
+    --body-bg: #fff;
+    --body-quiet-color: #666;
+    --body-medium-color: #444;
+    --body-loud-color: #000;
+
+    --header-color: #ffc;
+    --header-branding-color: var(--accent);
+    --header-bg: var(--secondary);
+    --header-link-color: var(--primary-fg);
+
+    --breadcrumbs-fg: #c4dce8;
+    --breadcrumbs-link-fg: var(--body-bg);
+    --breadcrumbs-bg: #264b5d;
+
+    --link-fg: #417893;
+    --link-hover-color: #036;
+    --link-selected-fg: var(--secondary);
+
+    --hairline-color: #e8e8e8;
+    --border-color: #ccc;
+
+    --error-fg: #ba2121;
+
+    --message-success-bg: #dfd;
+    --message-warning-bg: #ffc;
+    --message-error-bg: #ffefef;
+
+    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
+    --selected-bg: #e4e4e4; /* E.g. selected table cells */
+    --selected-row: #ffc;
+
+    --button-fg: #fff;
+    --button-bg: var(--secondary);
+    --button-hover-bg: #205067;
+    --default-button-bg: #205067;
+    --default-button-hover-bg: var(--secondary);
+    --close-button-bg: #747474;
+    --close-button-hover-bg: #333;
+    --delete-button-bg: #ba2121;
+    --delete-button-hover-bg: #a41515;
+
+    --object-tools-fg: var(--button-fg);
+    --object-tools-bg: var(--close-button-bg);
+    --object-tools-hover-bg: var(--close-button-hover-bg);
+
+    --font-family-primary:
+        "Segoe UI",
+        system-ui,
+        Roboto,
+        "Helvetica Neue",
+        Arial,
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji";
+    --font-family-monospace:
+        ui-monospace,
+        Menlo,
+        Monaco,
+        "Cascadia Mono",
+        "Segoe UI Mono",
+        "Roboto Mono",
+        "Oxygen Mono",
+        "Ubuntu Monospace",
+        "Source Code Pro",
+        "Fira Mono",
+        "Droid Sans Mono",
+        "Courier New",
+        monospace,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji";
+
+    color-scheme: light;
+}
+
+html, body {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-size: 0.875rem;
+    font-family: var(--font-family-primary);
+    color: var(--body-fg);
+    background: var(--body-bg);
+}
+
+/* LINKS */
+
+a:link, a:visited {
+    color: var(--link-fg);
+    text-decoration: none;
+    transition: color 0.15s, background 0.15s;
+}
+
+a:focus, a:hover {
+    color: var(--link-hover-color);
+}
+
+a:focus {
+    text-decoration: underline;
+}
+
+a img {
+    border: none;
+}
+
+a.section:link, a.section:visited {
+    color: var(--header-link-color);
+    text-decoration: none;
+}
+
+a.section:focus, a.section:hover {
+    text-decoration: underline;
+}
+
+/* GLOBAL DEFAULTS */
+
+p, ol, ul, dl {
+    margin: .2em 0 .8em 0;
+}
+
+p {
+    padding: 0;
+    line-height: 140%;
+}
+
+h1,h2,h3,h4,h5 {
+    font-weight: bold;
+}
+
+h1 {
+    margin: 0 0 20px;
+    font-weight: 300;
+    font-size: 1.25rem;
+}
+
+h2 {
+    font-size: 1rem;
+    margin: 1em 0 .5em 0;
+}
+
+h2.subhead {
+    font-weight: normal;
+    margin-top: 0;
+}
+
+h3 {
+    font-size: 0.875rem;
+    margin: .8em 0 .3em 0;
+    color: var(--body-medium-color);
+    font-weight: bold;
+}
+
+h4 {
+    font-size: 0.75rem;
+    margin: 1em 0 .8em 0;
+    padding-bottom: 3px;
+    color: var(--body-medium-color);
+}
+
+h5 {
+    font-size: 0.625rem;
+    margin: 1.5em 0 .5em 0;
+    color: var(--body-quiet-color);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+ul > li {
+    list-style-type: square;
+    padding: 1px 0;
+}
+
+li ul {
+    margin-bottom: 0;
+}
+
+li, dt, dd {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+}
+
+dt {
+    font-weight: bold;
+    margin-top: 4px;
+}
+
+dd {
+    margin-left: 0;
+}
+
+form {
+    margin: 0;
+    padding: 0;
+}
+
+fieldset {
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    border-top: 1px solid var(--hairline-color);
+}
+
+details summary {
+    cursor: pointer;
+}
+
+blockquote {
+    font-size: 0.6875rem;
+    color: #777;
+    margin-left: 2px;
+    padding-left: 10px;
+    border-left: 5px solid #ddd;
+}
+
+code, pre {
+    font-family: var(--font-family-monospace);
+    color: var(--body-quiet-color);
+    font-size: 0.75rem;
+    overflow-x: auto;
+}
+
+pre.literal-block {
+    margin: 10px;
+    background: var(--darkened-bg);
+    padding: 6px 8px;
+}
+
+code strong {
+    color: #930;
+}
+
+hr {
+    clear: both;
+    color: var(--hairline-color);
+    background-color: var(--hairline-color);
+    height: 1px;
+    border: none;
+    margin: 0;
+    padding: 0;
+    line-height: 1px;
+}
+
+/* TEXT STYLES & MODIFIERS */
+
+.small {
+    font-size: 0.6875rem;
+}
+
+.mini {
+    font-size: 0.625rem;
+}
+
+.help, p.help, form p.help, div.help, form div.help, div.help li {
+    font-size: 0.6875rem;
+    color: var(--body-quiet-color);
+}
+
+div.help ul {
+     margin-bottom: 0;
+}
+
+.help-tooltip {
+    cursor: help;
+}
+
+p img, h1 img, h2 img, h3 img, h4 img, td img {
+    vertical-align: middle;
+}
+
+.quiet, a.quiet:link, a.quiet:visited {
+    color: var(--body-quiet-color);
+    font-weight: normal;
+}
+
+.clear {
+    clear: both;
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* TABLES */
+
+table {
+    border-collapse: collapse;
+    border-color: var(--border-color);
+}
+
+td, th {
+    font-size: 0.8125rem;
+    line-height: 1rem;
+    border-bottom: 1px solid var(--hairline-color);
+    vertical-align: top;
+    padding: 8px;
+}
+
+th {
+    font-weight: 500;
+    text-align: left;
+}
+
+thead th,
+tfoot td {
+    color: var(--body-quiet-color);
+    padding: 5px 10px;
+    font-size: 0.6875rem;
+    background: var(--body-bg);
+    border: none;
+    border-top: 1px solid var(--hairline-color);
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+tfoot td {
+    border-bottom: none;
+    border-top: 1px solid var(--hairline-color);
+}
+
+thead th.required {
+    font-weight: bold;
+}
+
+tr.alt {
+    background: var(--darkened-bg);
+}
+
+tr:nth-child(odd), .row-form-errors {
+    background: var(--body-bg);
+}
+
+tr:nth-child(even),
+tr:nth-child(even) .errorlist,
+tr:nth-child(odd) + .row-form-errors,
+tr:nth-child(odd) + .row-form-errors .errorlist {
+    background: var(--darkened-bg);
+}
+
+/* SORTABLE TABLES */
+
+thead th {
+    padding: 5px 10px;
+    line-height: normal;
+    text-transform: uppercase;
+    background: var(--darkened-bg);
+}
+
+thead th a:link, thead th a:visited {
+    color: var(--body-quiet-color);
+}
+
+thead th.sorted {
+    background: var(--selected-bg);
+}
+
+thead th.sorted .text {
+    padding-right: 42px;
+}
+
+table thead th .text span {
+    padding: 8px 10px;
+    display: block;
+}
+
+table thead th .text a {
+    display: block;
+    cursor: pointer;
+    padding: 8px 10px;
+}
+
+table thead th .text a:focus, table thead th .text a:hover {
+    background: var(--selected-bg);
+}
+
+thead th.sorted a.sortremove {
+    visibility: hidden;
+}
+
+table thead th.sorted:hover a.sortremove {
+    visibility: visible;
+}
+
+table thead th.sorted .sortoptions {
+    display: block;
+    padding: 9px 5px 0 5px;
+    float: right;
+    text-align: right;
+}
+
+table thead th.sorted .sortpriority {
+    font-size: .8em;
+    min-width: 12px;
+    text-align: center;
+    vertical-align: 3px;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+table thead th.sorted .sortoptions a {
+    position: relative;
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    background: url(../img/sorting-icons.svg) 0 0 no-repeat;
+    background-size: 14px auto;
+}
+
+table thead th.sorted .sortoptions a.sortremove {
+    background-position: 0 0;
+}
+
+table thead th.sorted .sortoptions a.sortremove:after {
+    content: '\\';
+    position: absolute;
+    top: -6px;
+    left: 3px;
+    font-weight: 200;
+    font-size: 1.125rem;
+    color: var(--body-quiet-color);
+}
+
+table thead th.sorted .sortoptions a.sortremove:focus:after,
+table thead th.sorted .sortoptions a.sortremove:hover:after {
+    color: var(--link-fg);
+}
+
+table thead th.sorted .sortoptions a.sortremove:focus,
+table thead th.sorted .sortoptions a.sortremove:hover {
+    background-position: 0 -14px;
+}
+
+table thead th.sorted .sortoptions a.ascending {
+    background-position: 0 -28px;
+}
+
+table thead th.sorted .sortoptions a.ascending:focus,
+table thead th.sorted .sortoptions a.ascending:hover {
+    background-position: 0 -42px;
+}
+
+table thead th.sorted .sortoptions a.descending {
+    top: 1px;
+    background-position: 0 -56px;
+}
+
+table thead th.sorted .sortoptions a.descending:focus,
+table thead th.sorted .sortoptions a.descending:hover {
+    background-position: 0 -70px;
+}
+
+/* FORM DEFAULTS */
+
+input, textarea, select, .form-row p, form .button {
+    margin: 2px 0;
+    padding: 2px 3px;
+    vertical-align: middle;
+    font-family: var(--font-family-primary);
+    font-weight: normal;
+    font-size: 0.8125rem;
+}
+.form-row div.help {
+    padding: 2px 3px;
+}
+
+textarea {
+    vertical-align: top;
+}
+
+/*
+Minifiers remove the default (text) "type" attribute from "input" HTML tags.
+Add input:not([type]) to make the CSS stylesheet work the same.
+*/
+input:not([type]), input[type=text], input[type=password], input[type=email],
+input[type=url], input[type=number], input[type=tel], textarea, select,
+.vTextField {
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 5px 6px;
+    margin-top: 0;
+    color: var(--body-fg);
+    background-color: var(--body-bg);
+}
+
+/*
+Minifiers remove the default (text) "type" attribute from "input" HTML tags.
+Add input:not([type]) to make the CSS stylesheet work the same.
+*/
+input:not([type]):focus, input[type=text]:focus, input[type=password]:focus,
+input[type=email]:focus, input[type=url]:focus, input[type=number]:focus,
+input[type=tel]:focus, textarea:focus, select:focus, .vTextField:focus {
+    border-color: var(--body-quiet-color);
+}
+
+select {
+    height: 1.875rem;
+}
+
+select[multiple] {
+    /* Allow HTML size attribute to override the height in the rule above. */
+    height: auto;
+    min-height: 150px;
+}
+
+/* FORM BUTTONS */
+
+.button, input[type=submit], input[type=button], .submit-row input, a.button {
+    background: var(--button-bg);
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    color: var(--button-fg);
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+a.button {
+    padding: 4px 5px;
+}
+
+.button:active, input[type=submit]:active, input[type=button]:active,
+.button:focus, input[type=submit]:focus, input[type=button]:focus,
+.button:hover, input[type=submit]:hover, input[type=button]:hover {
+    background: var(--button-hover-bg);
+}
+
+.button[disabled], input[type=submit][disabled], input[type=button][disabled] {
+    opacity: 0.4;
+}
+
+.button.default, input[type=submit].default, .submit-row input.default {
+    border: none;
+    font-weight: 400;
+    background: var(--default-button-bg);
+}
+
+.button.default:active, input[type=submit].default:active,
+.button.default:focus, input[type=submit].default:focus,
+.button.default:hover, input[type=submit].default:hover {
+    background: var(--default-button-hover-bg);
+}
+
+.button[disabled].default,
+input[type=submit][disabled].default,
+input[type=button][disabled].default {
+    opacity: 0.4;
+}
+
+
+/* MODULES */
+
+.module {
+    border: none;
+    margin-bottom: 30px;
+    background: var(--body-bg);
+}
+
+.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.module blockquote {
+    margin-left: 12px;
+}
+
+.module ul, .module ol {
+    margin-left: 1.5em;
+}
+
+.module h3 {
+    margin-top: .6em;
+}
+
+.module h2, .module caption, .inline-group h2 {
+    margin: 0;
+    padding: 8px;
+    font-weight: 400;
+    font-size: 0.8125rem;
+    text-align: left;
+    background: var(--header-bg);
+    color: var(--header-link-color);
+}
+
+.module caption,
+.inline-group h2 {
+    font-size: 0.75rem;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+
+.module table {
+    border-collapse: collapse;
+}
+
+/* MESSAGES & ERRORS */
+
+ul.messagelist {
+    padding: 0;
+    margin: 0;
+}
+
+ul.messagelist li {
+    display: block;
+    font-weight: 400;
+    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 {
+    background: var(--message-warning-bg) url(../img/icon-alert.svg) 40px 14px no-repeat;
+    background-size: 14px auto;
+}
+
+ul.messagelist li.error {
+    background: var(--message-error-bg) url(../img/icon-no.svg) 40px 12px no-repeat;
+    background-size: 16px auto;
+}
+
+.errornote {
+    font-size: 0.875rem;
+    font-weight: 700;
+    display: block;
+    padding: 10px 12px;
+    margin: 0 0 10px 0;
+    color: var(--error-fg);
+    border: 1px solid var(--error-fg);
+    border-radius: 4px;
+    background-color: var(--body-bg);
+    background-position: 5px 12px;
+    overflow-wrap: break-word;
+}
+
+ul.errorlist {
+    margin: 0 0 4px;
+    padding: 0;
+    color: var(--error-fg);
+    background: var(--body-bg);
+}
+
+ul.errorlist li {
+    font-size: 0.8125rem;
+    display: block;
+    margin-bottom: 4px;
+    overflow-wrap: break-word;
+}
+
+ul.errorlist li:first-child {
+    margin-top: 0;
+}
+
+ul.errorlist li a {
+    color: inherit;
+    text-decoration: underline;
+}
+
+td ul.errorlist {
+    margin: 0;
+    padding: 0;
+}
+
+td ul.errorlist li {
+    margin: 0;
+}
+
+.form-row.errors {
+    margin: 0;
+    border: none;
+    border-bottom: 1px solid var(--hairline-color);
+    background: none;
+}
+
+.form-row.errors ul.errorlist li {
+    padding-left: 0;
+}
+
+.errors input, .errors select, .errors textarea,
+td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
+    border: 1px solid var(--error-fg);
+}
+
+.description {
+    font-size: 0.75rem;
+    padding: 5px 0 0 12px;
+}
+
+/* BREADCRUMBS */
+
+div.breadcrumbs {
+    background: var(--breadcrumbs-bg);
+    padding: 10px 40px;
+    border: none;
+    color: var(--breadcrumbs-fg);
+    text-align: left;
+}
+
+div.breadcrumbs a {
+    color: var(--breadcrumbs-link-fg);
+}
+
+div.breadcrumbs a:focus, div.breadcrumbs a:hover {
+    color: var(--breadcrumbs-fg);
+}
+
+/* ACTION ICONS */
+
+.viewlink, .inlineviewlink {
+    padding-left: 16px;
+    background: url(../img/icon-viewlink.svg) 0 1px no-repeat;
+}
+
+.hidelink {
+    padding-left: 16px;
+    background: url(../img/icon-hidelink.svg) 0 1px no-repeat;
+}
+
+.addlink {
+    padding-left: 16px;
+    background: url(../img/icon-addlink.svg) 0 1px no-repeat;
+}
+
+.changelink, .inlinechangelink {
+    padding-left: 16px;
+    background: url(../img/icon-changelink.svg) 0 1px no-repeat;
+}
+
+.deletelink {
+    padding-left: 16px;
+    background: url(../img/icon-deletelink.svg) 0 1px no-repeat;
+}
+
+a.deletelink:link, a.deletelink:visited {
+    color: #CC3434; /* XXX Probably unused? */
+}
+
+a.deletelink:focus, a.deletelink:hover {
+    color: #993333; /* XXX Probably unused? */
+    text-decoration: none;
+}
+
+/* OBJECT TOOLS */
+
+.object-tools {
+    font-size: 0.625rem;
+    font-weight: bold;
+    padding-left: 0;
+    float: right;
+    position: relative;
+    margin-top: -48px;
+}
+
+.object-tools li {
+    display: block;
+    float: left;
+    margin-left: 5px;
+    height: 1rem;
+}
+
+.object-tools a {
+    border-radius: 15px;
+}
+
+.object-tools a:link, .object-tools a:visited {
+    display: block;
+    float: left;
+    padding: 3px 12px;
+    background: var(--object-tools-bg);
+    color: var(--object-tools-fg);
+    font-weight: 400;
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.object-tools a:focus, .object-tools a:hover {
+    background-color: var(--object-tools-hover-bg);
+}
+
+.object-tools a:focus{
+    text-decoration: none;
+}
+
+.object-tools a.viewsitelink, .object-tools a.addlink {
+    background-repeat: no-repeat;
+    background-position: right 7px center;
+    padding-right: 26px;
+}
+
+.object-tools a.viewsitelink {
+    background-image: url(../img/tooltag-arrowright.svg);
+}
+
+.object-tools a.addlink {
+    background-image: url(../img/tooltag-add.svg);
+}
+
+/* OBJECT HISTORY */
+
+#change-history table {
+    width: 100%;
+}
+
+#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 {
+    position: relative;
+    width: 100%;
+    min-width: 980px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#container > .main {
+    display: flex;
+    flex: 1 0 auto;
+}
+
+.main > .content {
+    flex:  1 0;
+    max-width: 100%;
+}
+
+.skip-to-content-link {
+    position: absolute;
+    top: -999px;
+    margin: 5px;
+    padding: 5px;
+    background: var(--body-bg);
+    z-index: 1;
+}
+
+.skip-to-content-link:focus {
+    left: 0px;
+    top: 0px;
+}
+
+#content {
+    padding: 20px 40px;
+}
+
+.dashboard #content {
+    width: 600px;
+}
+
+#content-main {
+    float: left;
+    width: 100%;
+}
+
+#content-related {
+    float: right;
+    width: 260px;
+    position: relative;
+    margin-right: -300px;
+}
+
+@media (forced-colors: active) {
+  #content-related {
+      border: 1px solid;
+  }
+}
+
+/* COLUMN TYPES */
+
+.colMS {
+    margin-right: 300px;
+}
+
+.colSM {
+    margin-left: 300px;
+}
+
+.colSM #content-related {
+    float: left;
+    margin-right: 0;
+    margin-left: -300px;
+}
+
+.colSM #content-main {
+    float: right;
+}
+
+.popup .colM {
+    width: auto;
+}
+
+/* HEADER */
+
+#header {
+    width: auto;
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 40px;
+    background: var(--header-bg);
+    color: var(--header-color);
+}
+
+#header a:link, #header a:visited, #logout-form button {
+    color: var(--header-link-color);
+}
+
+#header a:focus , #header a:hover {
+    text-decoration: underline;
+}
+
+@media (forced-colors: active) {
+  #header {
+      border-bottom: 1px solid;
+  }
+}
+
+#branding {
+    display: flex;
+}
+
+#site-name {
+    padding: 0;
+    margin: 0;
+    margin-inline-end: 20px;
+    font-weight: 300;
+    font-size: 1.5rem;
+    color: var(--header-branding-color);
+}
+
+#site-name a:link, #site-name a:visited {
+    color: var(--accent);
+}
+
+#branding h2 {
+    padding: 0 10px;
+    font-size: 0.875rem;
+    margin: -8px 0 8px 0;
+    font-weight: normal;
+    color: var(--header-color);
+}
+
+#branding a:hover {
+    text-decoration: none;
+}
+
+#logout-form {
+    display: inline;
+}
+
+#logout-form button {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    font-family: var(--font-family-primary);
+}
+
+#user-tools {
+    float: right;
+    margin: 0 0 0 20px;
+    text-align: right;
+}
+
+#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,
+#logout-form button:active, #logout-form button:hover {
+    text-decoration: none;
+    border-bottom: 0;
+}
+
+#logout-form button:active, #logout-form button:hover {
+    margin-bottom: 1px;
+}
+
+/* SIDEBAR */
+
+#content-related {
+    background: var(--darkened-bg);
+}
+
+#content-related .module {
+    background: none;
+}
+
+#content-related h3 {
+    color: var(--body-quiet-color);
+    padding: 0 16px;
+    margin: 0 0 16px;
+}
+
+#content-related h4 {
+    font-size: 0.8125rem;
+}
+
+#content-related p {
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
+#content-related .actionlist {
+    padding: 0;
+    margin: 16px;
+}
+
+#content-related .actionlist li {
+    line-height: 1.2;
+    margin-bottom: 10px;
+    padding-left: 18px;
+}
+
+#content-related .module h2 {
+    background: none;
+    padding: 16px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid var(--hairline-color);
+    font-size: 1.125rem;
+    color: var(--body-fg);
+}
+
+.delete-confirmation form input[type="submit"] {
+    background: var(--delete-button-bg);
+    border-radius: 4px;
+    padding: 10px 15px;
+    color: var(--button-fg);
+}
+
+.delete-confirmation form input[type="submit"]:active,
+.delete-confirmation form input[type="submit"]:focus,
+.delete-confirmation form input[type="submit"]:hover {
+    background: var(--delete-button-hover-bg);
+}
+
+.delete-confirmation form .cancel-link {
+    display: inline-block;
+    vertical-align: middle;
+    height: 0.9375rem;
+    line-height: 0.9375rem;
+    border-radius: 4px;
+    padding: 10px 15px;
+    color: var(--button-fg);
+    background: var(--close-button-bg);
+    margin: 0 0 0 10px;
+}
+
+.delete-confirmation form .cancel-link:active,
+.delete-confirmation form .cancel-link:focus,
+.delete-confirmation form .cancel-link:hover {
+    background: var(--close-button-hover-bg);
+}
+
+/* POPUP */
+.popup #content {
+    padding: 20px;
+}
+
+.popup #container {
+    min-width: 0;
+}
+
+.popup #header {
+    padding: 10px 20px;
+}
+
+/* PAGINATOR */
+
+.paginator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.8125rem;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    line-height: 22px;
+    margin: 0;
+    border-top: 1px solid var(--hairline-color);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.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);
+}
+
+.paginator input {
+    margin-left: auto;
+}
+
+.base-svgs {
+    display: none;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    border: 0;
+    color: var(--body-fg);
+    background-color: var(--body-bg);
+}

backend/staticfiles/admin/css/changelists.css

@@ -0,0 +1,343 @@
+/* CHANGELISTS */
+
+#changelist {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+#changelist .changelist-form-container {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+#changelist table {
+    width: 100%;
+}
+
+.change-list .hiddenfields { display:none; }
+
+.change-list .filtered table {
+    border-right: none;
+}
+
+.change-list .filtered {
+    min-height: 400px;
+}
+
+.change-list .filtered .results, .change-list .filtered .paginator,
+.filtered #toolbar, .filtered div.xfull {
+    width: auto;
+}
+
+.change-list .filtered table tbody th {
+    padding-right: 1em;
+}
+
+#changelist-form .results {
+    overflow-x: auto;
+    width: 100%;
+}
+
+#changelist .toplinks {
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+#changelist .paginator {
+    color: var(--body-quiet-color);
+    border-bottom: 1px solid var(--hairline-color);
+    background: var(--body-bg);
+    overflow: hidden;
+}
+
+/* CHANGELIST TABLES */
+
+#changelist table thead th {
+    padding: 0;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+#changelist table thead th.action-checkbox-column {
+    width: 1.5em;
+    text-align: center;
+}
+
+#changelist table tbody td.action-checkbox {
+    text-align: center;
+}
+
+#changelist table tfoot {
+    color: var(--body-quiet-color);
+}
+
+/* TOOLBAR */
+
+#toolbar {
+    padding: 8px 10px;
+    margin-bottom: 15px;
+    border-top: 1px solid var(--hairline-color);
+    border-bottom: 1px solid var(--hairline-color);
+    background: var(--darkened-bg);
+    color: var(--body-quiet-color);
+}
+
+#toolbar form input {
+    border-radius: 4px;
+    font-size: 0.875rem;
+    padding: 5px;
+    color: var(--body-fg);
+}
+
+#toolbar #searchbar {
+    height: 1.1875rem;
+    border: 1px solid var(--border-color);
+    padding: 2px 5px;
+    margin: 0;
+    vertical-align: top;
+    font-size: 0.8125rem;
+    max-width: 100%;
+}
+
+#toolbar #searchbar:focus {
+    border-color: var(--body-quiet-color);
+}
+
+#toolbar form input[type="submit"] {
+    border: 1px solid var(--border-color);
+    font-size: 0.8125rem;
+    padding: 4px 8px;
+    margin: 0;
+    vertical-align: middle;
+    background: var(--body-bg);
+    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
+    cursor: pointer;
+    color: var(--body-fg);
+}
+
+#toolbar form input[type="submit"]:focus,
+#toolbar form input[type="submit"]:hover {
+    border-color: var(--body-quiet-color);
+}
+
+#changelist-search img {
+    vertical-align: middle;
+    margin-right: 4px;
+}
+
+#changelist-search .help {
+    word-break: break-word;
+}
+
+/* FILTER COLUMN */
+
+#changelist-filter {
+    flex: 0 0 240px;
+    order: 1;
+    background: var(--darkened-bg);
+    border-left: none;
+    margin: 0 0 0 30px;
+}
+
+@media (forced-colors: active) {
+  #changelist-filter {
+      border: 1px solid;
+  }
+}
+
+#changelist-filter h2 {
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 5px 15px;
+    margin-bottom: 12px;
+    border-bottom: none;
+}
+
+#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;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+#changelist-filter ul:last-child {
+    border-bottom: none;
+}
+
+#changelist-filter li {
+    list-style-type: none;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+#changelist-filter a {
+    display: block;
+    color: var(--body-quiet-color);
+    word-break: break-word;
+}
+
+#changelist-filter li.selected {
+    border-left: 5px solid var(--hairline-color);
+    padding-left: 10px;
+    margin-left: -15px;
+}
+
+#changelist-filter li.selected a {
+    color: var(--link-selected-fg);
+}
+
+#changelist-filter a:focus, #changelist-filter a:hover,
+#changelist-filter li.selected a:focus,
+#changelist-filter li.selected a:hover {
+    color: var(--link-hover-color);
+}
+
+#changelist-filter #changelist-filter-extra-actions {
+    font-size: 0.8125rem;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+/* DATE DRILLDOWN */
+
+.change-list .toplinks {
+    display: flex;
+    padding-bottom: 5px;
+    flex-wrap: wrap;
+    gap: 3px 17px;
+    font-weight: bold;
+}
+
+.change-list .toplinks a {
+    font-size: 0.8125rem;
+}
+
+.change-list .toplinks .date-back {
+    color: var(--body-quiet-color);
+}
+
+.change-list .toplinks .date-back:focus,
+.change-list .toplinks .date-back:hover {
+    color: var(--link-hover-color);
+}
+
+/* ACTIONS */
+
+.filtered .actions {
+    border-right: none;
+}
+
+#changelist table input {
+    margin: 0;
+    vertical-align: baseline;
+}
+
+/* Once the :has() pseudo-class is supported by all browsers, the tr.selected
+   selector and the JS adding the class can be removed. */
+#changelist tbody tr.selected {
+    background-color: var(--selected-row);
+}
+
+#changelist tbody tr:has(.action-select:checked) {
+    background-color: var(--selected-row);
+}
+
+@media (forced-colors: active) {
+    #changelist tbody tr.selected {
+        background-color: SelectedItem;
+    }
+    #changelist tbody tr:has(.action-select:checked) {
+        background-color: SelectedItem;
+    }
+}
+
+#changelist .actions {
+    padding: 10px;
+    background: var(--body-bg);
+    border-top: none;
+    border-bottom: none;
+    line-height: 1.5rem;
+    color: var(--body-quiet-color);
+    width: 100%;
+}
+
+#changelist .actions span.all,
+#changelist .actions span.action-counter,
+#changelist .actions span.clear,
+#changelist .actions span.question {
+    font-size: 0.8125rem;
+    margin: 0 0.5em;
+}
+
+#changelist .actions:last-child {
+    border-bottom: none;
+}
+
+#changelist .actions select {
+    vertical-align: top;
+    height: 1.5rem;
+    color: var(--body-fg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    padding: 0 0 0 4px;
+    margin: 0;
+    margin-left: 10px;
+}
+
+#changelist .actions select:focus {
+    border-color: var(--body-quiet-color);
+}
+
+#changelist .actions label {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 0.8125rem;
+}
+
+#changelist .actions .button {
+    font-size: 0.8125rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--body-bg);
+    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
+    cursor: pointer;
+    height: 1.5rem;
+    line-height: 1;
+    padding: 4px 8px;
+    margin: 0;
+    color: var(--body-fg);
+}
+
+#changelist .actions .button:focus, #changelist .actions .button:hover {
+    border-color: var(--body-quiet-color);
+}

backend/staticfiles/admin/css/dark_mode.css

@@ -0,0 +1,130 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+      --primary: #264b5d;
+      --primary-fg: #f7f7f7;
+  
+      --body-fg: #eeeeee;
+      --body-bg: #121212;
+      --body-quiet-color: #d0d0d0;
+      --body-medium-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;
+
+      color-scheme: dark;
+    }
+  }
+
+
+html[data-theme="dark"] {
+    --primary: #264b5d;
+    --primary-fg: #f7f7f7;
+
+    --body-fg: #eeeeee;
+    --body-bg: #121212;
+    --body-quiet-color: #d0d0d0;
+    --body-medium-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;
+
+    color-scheme: dark;
+}
+
+/* THEME SWITCH */
+.theme-toggle {
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background: transparent;
+    vertical-align: middle;
+    margin-inline-start: 5px;
+    margin-top: -1px;
+}
+
+.theme-toggle svg {
+    vertical-align: middle;
+    height: 1.5rem;
+    width: 1.5rem;
+    display: none;
+}
+
+/*
+Fully hide screen reader text so we only show the one matching the current
+theme.
+*/
+.theme-toggle .visually-hidden {
+    display: none;
+}
+
+html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
+    display: block;
+}
+
+html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
+    display: block;
+}
+
+html[data-theme="light"] .theme-toggle .theme-label-when-light {
+    display: block;
+}
+
+/* ICONS */
+.theme-toggle svg.theme-icon-when-auto,
+.theme-toggle svg.theme-icon-when-dark,
+.theme-toggle svg.theme-icon-when-light {
+    fill: var(--header-link-color);
+    color: var(--header-bg);
+}
+
+html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto {
+    display: block;
+}
+
+html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
+    display: block;
+}
+
+html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
+    display: block;
+}

backend/staticfiles/admin/css/dashboard.css

@@ -0,0 +1,29 @@
+/* DASHBOARD */
+.dashboard td, .dashboard th {
+    word-break: break-word;
+}
+
+.dashboard .module table th {
+    width: 100%;
+}
+
+.dashboard .module table td {
+    white-space: nowrap;
+}
+
+.dashboard .module table td a {
+    display: block;
+    padding-right: .6em;
+}
+
+/* RECENT ACTIONS MODULE */
+
+.module ul.actionlist {
+    margin-left: 0;
+}
+
+ul.actionlist li {
+    list-style-type: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

backend/staticfiles/admin/css/forms.css

@@ -0,0 +1,498 @@
+@import url('widgets.css');
+
+/* FORM ROWS */
+
+.form-row {
+    overflow: hidden;
+    padding: 10px;
+    font-size: 0.8125rem;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+.form-row img, .form-row input {
+    vertical-align: middle;
+}
+
+.form-row label input[type="checkbox"] {
+    margin-top: 0;
+    vertical-align: 0;
+}
+
+form .form-row p {
+    padding-left: 0;
+}
+
+.flex-container {
+    display: flex;
+}
+
+.form-multiline {
+    flex-wrap: wrap;
+}
+
+.form-multiline > div {
+    padding-bottom: 10px;
+}
+
+/* FORM LABELS */
+
+label {
+    font-weight: normal;
+    color: var(--body-quiet-color);
+    font-size: 0.8125rem;
+}
+
+.required label, label.required {
+    font-weight: bold;
+}
+
+/* RADIO BUTTONS */
+
+form div.radiolist div {
+    padding-right: 7px;
+}
+
+form div.radiolist.inline div {
+    display: inline-block;
+}
+
+form div.radiolist label {
+    width: auto;
+}
+
+form div.radiolist input[type="radio"] {
+    margin: -2px 4px 0 0;
+    padding: 0;
+}
+
+form ul.inline {
+    margin-left: 0;
+    padding: 0;
+}
+
+form ul.inline li {
+    float: left;
+    padding-right: 7px;
+}
+
+/* FIELDSETS */
+
+fieldset .fieldset-heading,
+fieldset .inline-heading,
+:not(.inline-related) .collapse summary {
+    border: 1px solid var(--header-bg);
+    margin: 0;
+    padding: 8px;
+    font-weight: 400;
+    font-size: 0.8125rem;
+    background: var(--header-bg);
+    color: var(--header-link-color);
+}
+
+/* ALIGNED FIELDSETS */
+
+.aligned label {
+    display: block;
+    padding: 4px 10px 0 0;
+    min-width: 160px;
+    width: 160px;
+    word-wrap: break-word;
+}
+
+.aligned label:not(.vCheckboxLabel):after {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.aligned label + p, .aligned .checkbox-row + div.help, .aligned label + div.readonly {
+    padding: 6px 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    overflow-wrap: break-word;
+}
+
+.aligned ul label {
+    display: inline;
+    float: none;
+    width: auto;
+}
+
+.aligned .form-row input {
+    margin-bottom: 0;
+}
+
+.colMS .aligned .vLargeTextField, .colMS .aligned .vXMLLargeTextField {
+    width: 350px;
+}
+
+form .aligned ul {
+    margin-left: 160px;
+    padding-left: 10px;
+}
+
+form .aligned div.radiolist {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+}
+
+form .aligned p.help,
+form .aligned div.help {
+    margin-top: 0;
+    margin-left: 160px;
+    padding-left: 10px;
+}
+
+form .aligned p.date div.help.timezonewarning,
+form .aligned p.datetime div.help.timezonewarning,
+form .aligned p.time div.help.timezonewarning {
+    margin-left: 0;
+    padding-left: 0;
+    font-weight: normal;
+}
+
+form .aligned p.help:last-child,
+form .aligned div.help:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+form .aligned input + p.help,
+form .aligned textarea + p.help,
+form .aligned select + p.help,
+form .aligned input + div.help,
+form .aligned textarea + div.help,
+form .aligned select + div.help {
+    margin-left: 160px;
+    padding-left: 10px;
+}
+
+form .aligned select option:checked {
+    background-color: var(--selected-row);
+}
+
+form .aligned ul li {
+    list-style: none;
+}
+
+form .aligned table p {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.aligned .vCheckboxLabel {
+    padding: 1px 0 0 5px;
+}
+
+.aligned .vCheckboxLabel + p.help,
+.aligned .vCheckboxLabel + div.help {
+    margin-top: -4px;
+}
+
+.colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField {
+    width: 610px;
+}
+
+fieldset .fieldBox {
+    margin-right: 20px;
+}
+
+/* WIDE FIELDSETS */
+
+.wide label {
+    width: 200px;
+}
+
+form .wide p.help,
+form .wide ul.errorlist,
+form .wide div.help {
+    padding-left: 50px;
+}
+
+form div.help ul {
+    padding-left: 0;
+    margin-left: 0;
+}
+
+.colM fieldset.wide .vLargeTextField, .colM fieldset.wide .vXMLLargeTextField {
+    width: 450px;
+}
+
+/* COLLAPSIBLE FIELDSETS */
+
+.collapse summary .fieldset-heading,
+.collapse summary .inline-heading {
+    background: transparent;
+    border: none;
+    color: currentColor;
+    display: inline;
+    margin: 0;
+    padding: 0;
+}
+
+/* MONOSPACE TEXTAREAS */
+
+fieldset.monospace textarea {
+    font-family: var(--font-family-monospace);
+}
+
+/* SUBMIT ROW */
+
+.submit-row {
+    padding: 12px 14px 12px;
+    margin: 0 0 20px;
+    background: var(--darkened-bg);
+    border: 1px solid var(--hairline-color);
+    border-radius: 4px;
+    overflow: hidden;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+body.popup .submit-row {
+    overflow: auto;
+}
+
+.submit-row input {
+    height: 2.1875rem;
+    line-height: 0.9375rem;
+}
+
+.submit-row input, .submit-row a {
+    margin: 0;
+}
+
+.submit-row input.default {
+    text-transform: uppercase;
+}
+
+.submit-row a.deletelink {
+    margin-left: auto;
+}
+
+.submit-row a.deletelink {
+    display: block;
+    background: var(--delete-button-bg);
+    border-radius: 4px;
+    padding: 0.625rem 0.9375rem;
+    height: 0.9375rem;
+    line-height: 0.9375rem;
+    color: var(--button-fg);
+}
+
+.submit-row a.closelink {
+    display: inline-block;
+    background: var(--close-button-bg);
+    border-radius: 4px;
+    padding: 10px 15px;
+    height: 0.9375rem;
+    line-height: 0.9375rem;
+    color: var(--button-fg);
+}
+
+.submit-row a.deletelink:focus,
+.submit-row a.deletelink:hover,
+.submit-row a.deletelink:active {
+    background: var(--delete-button-hover-bg);
+    text-decoration: none;
+}
+
+.submit-row a.closelink:focus,
+.submit-row a.closelink:hover,
+.submit-row a.closelink:active {
+    background: var(--close-button-hover-bg);
+    text-decoration: none;
+}
+
+/* CUSTOM FORM FIELDS */
+
+.vSelectMultipleField {
+    vertical-align: top;
+}
+
+.vCheckboxField {
+    border: none;
+}
+
+.vDateField, .vTimeField {
+    margin-right: 2px;
+    margin-bottom: 4px;
+}
+
+.vDateField {
+    min-width: 6.85em;
+}
+
+.vTimeField {
+    min-width: 4.7em;
+}
+
+.vURLField {
+    width: 30em;
+}
+
+.vLargeTextField, .vXMLLargeTextField {
+    width: 48em;
+}
+
+.flatpages-flatpage #id_content {
+    height: 40.2em;
+}
+
+.module table .vPositiveSmallIntegerField {
+    width: 2.2em;
+}
+
+.vIntegerField {
+    width: 5em;
+}
+
+.vBigIntegerField {
+    width: 10em;
+}
+
+.vForeignKeyRawIdAdminField {
+    width: 5em;
+}
+
+.vTextField, .vUUIDField {
+    width: 20em;
+}
+
+/* INLINES */
+
+.inline-group {
+    padding: 0;
+    margin: 0 0 30px;
+}
+
+.inline-group thead th {
+    padding: 8px 10px;
+}
+
+.inline-group .aligned label {
+    width: 160px;
+}
+
+.inline-related {
+    position: relative;
+}
+
+.inline-related h4,
+.inline-related:not(.tabular) .collapse summary {
+    margin: 0;
+    color: var(--body-medium-color);
+    padding: 5px;
+    font-size: 0.8125rem;
+    background: var(--darkened-bg);
+    border: 1px solid var(--hairline-color);
+    border-left-color: var(--darkened-bg);
+    border-right-color: var(--darkened-bg);
+}
+
+.inline-related h3 span.delete {
+    float: right;
+}
+
+.inline-related h3 span.delete label {
+    margin-left: 2px;
+    font-size: 0.6875rem;
+}
+
+.inline-related fieldset {
+    margin: 0;
+    background: var(--body-bg);
+    border: none;
+    width: 100%;
+}
+
+.inline-group .tabular fieldset.module {
+    border: none;
+}
+
+.inline-related.tabular fieldset.module table {
+    width: 100%;
+    overflow-x: scroll;
+}
+
+.last-related fieldset {
+    border: none;
+}
+
+.inline-group .tabular tr.has_original td {
+    padding-top: 2em;
+}
+
+.inline-group .tabular tr td.original {
+    padding: 2px 0 0 0;
+    width: 0;
+    _position: relative;
+}
+
+.inline-group .tabular th.original {
+    width: 0px;
+    padding: 0;
+}
+
+.inline-group .tabular td.original p {
+    position: absolute;
+    left: 0;
+    height: 1.1em;
+    padding: 2px 9px;
+    overflow: hidden;
+    font-size: 0.5625rem;
+    font-weight: bold;
+    color: var(--body-quiet-color);
+    _width: 700px;
+}
+
+.inline-group div.add-row,
+.inline-group .tabular tr.add-row td {
+    color: var(--body-quiet-color);
+    background: var(--darkened-bg);
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+.inline-group .tabular tr.add-row td {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+.inline-group div.add-row a,
+.inline-group .tabular tr.add-row td a {
+    font-size: 0.75rem;
+}
+
+.empty-form {
+    display: none;
+}
+
+/* RELATED FIELD ADD ONE / LOOKUP */
+
+.related-lookup {
+    margin-left: 5px;
+    display: inline-block;
+    vertical-align: middle;
+    background-repeat: no-repeat;
+    background-size: 14px;
+}
+
+.related-lookup {
+    width: 1rem;
+    height: 1rem;
+    background-image: url(../img/search.svg);
+}
+
+form .related-widget-wrapper ul {
+    display: inline-block;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.clearable-file-input input {
+    margin-top: 0;
+}

backend/staticfiles/admin/css/login.css

@@ -0,0 +1,61 @@
+/* LOGIN FORM */
+
+.login {
+    background: var(--darkened-bg);
+    height: auto;
+}
+
+.login #header {
+    height: auto;
+    padding: 15px 16px;
+    justify-content: center;
+}
+
+.login #header h1 {
+    font-size: 1.125rem;
+    margin: 0;
+}
+
+.login #header h1 a {
+    color: var(--header-link-color);
+}
+
+.login #content {
+    padding: 20px;
+}
+
+.login #container {
+    background: var(--body-bg);
+    border: 1px solid var(--hairline-color);
+    border-radius: 4px;
+    overflow: hidden;
+    width: 28em;
+    min-width: 300px;
+    margin: 100px auto;
+    height: auto;
+}
+
+.login .form-row {
+    padding: 4px 0;
+}
+
+.login .form-row label {
+    display: block;
+    line-height: 2em;
+}
+
+.login .form-row #id_username, .login .form-row #id_password {
+    padding: 8px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.login .submit-row {
+    padding: 1em 0 0 0;
+    margin: 0;
+    text-align: center;
+}
+
+.login .password-reset-link {
+    text-align: center;
+}

backend/staticfiles/admin/css/nav_sidebar.css

@@ -0,0 +1,150 @@
+.sticky {
+    position: sticky;
+    top: 0;
+    max-height: 100vh;
+}
+
+.toggle-nav-sidebar {
+    z-index: 20;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 23px;
+    width: 23px;
+    border: 0;
+    border-right: 1px solid var(--hairline-color);
+    background-color: var(--body-bg);
+    cursor: pointer;
+    font-size: 1.25rem;
+    color: var(--link-fg);
+    padding: 0;
+}
+
+[dir="rtl"] .toggle-nav-sidebar {
+    border-left: 1px solid var(--hairline-color);
+    border-right: 0;
+}
+
+.toggle-nav-sidebar:hover,
+.toggle-nav-sidebar:focus {
+    background-color: var(--darkened-bg);
+}
+
+#nav-sidebar {
+    z-index: 15;
+    flex: 0 0 275px;
+    left: -276px;
+    margin-left: -276px;
+    border-top: 1px solid transparent;
+    border-right: 1px solid var(--hairline-color);
+    background-color: var(--body-bg);
+    overflow: auto;
+}
+
+[dir="rtl"] #nav-sidebar {
+    border-left: 1px solid var(--hairline-color);
+    border-right: 0;
+    left: 0;
+    margin-left: 0;
+    right: -276px;
+    margin-right: -276px;
+}
+
+.toggle-nav-sidebar::before {
+    content: '\00BB';
+}
+
+.main.shifted .toggle-nav-sidebar::before {
+    content: '\00AB';
+}
+
+.main > #nav-sidebar {
+    visibility: hidden;
+}
+
+.main.shifted > #nav-sidebar {
+    margin-left: 0;
+    visibility: visible;
+}
+
+[dir="rtl"] .main.shifted > #nav-sidebar {
+    margin-right: 0;
+}
+
+#nav-sidebar .module th {
+    width: 100%;
+    overflow-wrap: anywhere;
+}
+
+#nav-sidebar .module th,
+#nav-sidebar .module caption {
+    padding-left: 16px;
+}
+
+#nav-sidebar .module td {
+    white-space: nowrap;
+}
+
+[dir="rtl"] #nav-sidebar .module th,
+[dir="rtl"] #nav-sidebar .module caption {
+    padding-left: 8px;
+    padding-right: 16px;
+}
+
+#nav-sidebar .current-app .section:link,
+#nav-sidebar .current-app .section:visited {
+    color: var(--header-color);
+    font-weight: bold;
+}
+
+#nav-sidebar .current-model {
+    background: var(--selected-row);
+}
+
+@media (forced-colors: active) {
+    #nav-sidebar .current-model {
+        background-color: SelectedItem;
+    }
+}
+
+.main > #nav-sidebar + .content {
+    max-width: calc(100% - 23px);
+}
+
+.main.shifted > #nav-sidebar + .content {
+    max-width: calc(100% - 299px);
+}
+
+@media (max-width: 767px) {
+    #nav-sidebar, #toggle-nav-sidebar {
+        display: none;
+    }
+
+    .main > #nav-sidebar + .content,
+    .main.shifted > #nav-sidebar + .content {
+        max-width: 100%;
+    }
+}
+
+#nav-filter {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 2px 5px;
+    margin: 5px 0;
+    border: 1px solid var(--border-color);
+    background-color: var(--darkened-bg);
+    color: var(--body-fg);
+}
+
+#nav-filter:focus {
+    border-color: var(--body-quiet-color);
+}
+
+#nav-filter.no-results {
+    background: var(--message-error-bg);
+}
+
+#nav-sidebar table {
+    width: 100%;
+}

backend/staticfiles/admin/css/responsive.css

@@ -0,0 +1,904 @@
+/* Tablets */
+
+input[type="submit"], button {
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+@media (max-width: 1024px) {
+    /* Basic */
+
+    html {
+        -webkit-text-size-adjust: 100%;
+    }
+
+    td, th {
+        padding: 10px;
+        font-size: 0.875rem;
+    }
+
+    .small {
+        font-size: 0.75rem;
+    }
+
+    /* Layout */
+
+    #container {
+        min-width: 0;
+    }
+
+    #content {
+        padding: 15px 20px 20px;
+    }
+
+    div.breadcrumbs {
+        padding: 10px 30px;
+    }
+
+    /* Header */
+
+    #header {
+        flex-direction: column;
+        padding: 15px 30px;
+        justify-content: flex-start;
+    }
+
+    #site-name {
+        margin: 0 0 8px;
+        line-height: 1.2;
+    }
+
+    #user-tools {
+        margin: 0;
+        font-weight: 400;
+        line-height: 1.85;
+        text-align: left;
+    }
+
+    #user-tools a {
+        display: inline-block;
+        line-height: 1.4;
+    }
+
+    /* Dashboard */
+
+    .dashboard #content {
+        width: auto;
+    }
+
+    #content-related {
+        margin-right: -290px;
+    }
+
+    .colSM #content-related {
+        margin-left: -290px;
+    }
+
+    .colMS {
+        margin-right: 290px;
+    }
+
+    .colSM {
+        margin-left: 290px;
+    }
+
+    .dashboard .module table td a {
+        padding-right: 0;
+    }
+
+    td .changelink, td .addlink {
+        font-size: 0.8125rem;
+    }
+
+    /* Changelist */
+
+    #toolbar {
+        border: none;
+        padding: 15px;
+    }
+
+    #changelist-search > div {
+        display: flex;
+        flex-wrap: nowrap;
+        max-width: 480px;
+    }
+
+    #changelist-search label {
+        line-height: 1.375rem;
+    }
+
+    #toolbar form #searchbar {
+        flex: 1 0 auto;
+        width: 0;
+        height: 1.375rem;
+        margin: 0 10px 0 6px;
+    }
+
+    #toolbar form input[type=submit] {
+        flex: 0 1 auto;
+    }
+
+    #changelist-search .quiet {
+        width: 0;
+        flex: 1 0 auto;
+        margin: 5px 0 0 25px;
+    }
+
+    #changelist .actions {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 15px 0;
+    }
+
+    #changelist .actions label {
+        display: flex;
+    }
+
+    #changelist .actions select {
+        background: var(--body-bg);
+    }
+
+    #changelist .actions .button {
+        min-width: 48px;
+        margin: 0 10px;
+    }
+
+    #changelist .actions span.all,
+    #changelist .actions span.clear,
+    #changelist .actions span.question,
+    #changelist .actions span.action-counter {
+        font-size: 0.6875rem;
+        margin: 0 10px 0 0;
+    }
+
+    #changelist-filter {
+        flex-basis: 200px;
+    }
+
+    .change-list .filtered .results,
+    .change-list .filtered .paginator,
+    .filtered #toolbar,
+    .filtered .actions,
+
+    #changelist .paginator {
+        border-top-color: var(--hairline-color); /* XXX Is this used at all? */
+    }
+
+    #changelist .results + .paginator {
+        border-top: none;
+    }
+
+    /* Forms */
+
+    label {
+        font-size: 1rem;
+    }
+
+    /*
+    Minifiers remove the default (text) "type" attribute from "input" HTML
+    tags. Add input:not([type]) to make the CSS stylesheet work the same.
+    */
+    .form-row input:not([type]),
+    .form-row input[type=text],
+    .form-row input[type=password],
+    .form-row input[type=email],
+    .form-row input[type=url],
+    .form-row input[type=tel],
+    .form-row input[type=number],
+    .form-row textarea,
+    .form-row select,
+    .form-row .vTextField {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 6px 8px;
+        min-height: 2.25rem;
+        font-size: 1rem;
+    }
+
+    .form-row select {
+        height: 2.25rem;
+    }
+
+    .form-row select[multiple] {
+        height: auto;
+        min-height: 0;
+    }
+
+    fieldset .fieldBox + .fieldBox {
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid var(--hairline-color);
+    }
+
+    textarea {
+        max-width: 100%;
+        max-height: 120px;
+    }
+
+    .aligned label {
+        padding-top: 6px;
+    }
+
+    .aligned .related-lookup,
+    .aligned .datetimeshortcuts,
+    .aligned .related-lookup + strong {
+        align-self: center;
+        margin-left: 15px;
+    }
+
+    form .aligned div.radiolist {
+        margin-left: 2px;
+    }
+
+    .submit-row {
+        padding: 8px;
+    }
+
+    .submit-row a.deletelink {
+        padding: 10px 7px;
+    }
+
+    .button, input[type=submit], input[type=button], .submit-row input, a.button {
+        padding: 7px;
+    }
+
+    /* Selector */
+
+    .selector {
+        display: flex;
+        width: 100%;
+    }
+
+    .selector .selector-filter {
+        display: flex;
+        align-items: center;
+    }
+
+    .selector .selector-filter input {
+        width: 100%;
+        min-height: 0;
+        flex: 1 1;
+    }
+
+    .selector-available, .selector-chosen {
+        width: auto;
+        flex: 1 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .selector select {
+        width: 100%;
+        flex: 1 0 auto;
+        margin-bottom: 5px;
+    }
+
+    .selector-chooseall, .selector-clearall {
+        align-self: center;
+    }
+
+    .stacked {
+        flex-direction: column;
+        max-width: 480px;
+    }
+
+    .stacked > * {
+        flex: 0 1 auto;
+    }
+
+    .stacked select {
+        margin-bottom: 0;
+    }
+
+    .stacked .selector-available, .stacked .selector-chosen {
+        width: auto;
+    }
+
+    .stacked ul.selector-chooser {
+        padding: 0 2px;
+        transform: none;
+    }
+
+    .stacked .selector-chooser li {
+        padding: 3px;
+    }
+
+    .help-tooltip, .selector .help-icon {
+        display: none;
+    }
+
+    .datetime input {
+        width: 50%;
+        max-width: 120px;
+    }
+
+    .datetime span {
+        font-size: 0.8125rem;
+    }
+
+    .datetime .timezonewarning {
+        display: block;
+        font-size: 0.6875rem;
+        color: var(--body-quiet-color);
+    }
+
+    .datetimeshortcuts {
+        color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */
+    }
+
+    .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
+        width: 75%;
+    }
+
+    .inline-group {
+        overflow: auto;
+    }
+
+    /* Messages */
+
+    ul.messagelist li {
+        padding-left: 55px;
+        background-position: 30px 12px;
+    }
+
+    ul.messagelist li.error {
+        background-position: 30px 12px;
+    }
+
+    ul.messagelist li.warning {
+        background-position: 30px 14px;
+    }
+
+    /* Login */
+
+    .login #header {
+        padding: 15px 20px;
+    }
+
+    .login #site-name {
+        margin: 0;
+    }
+
+    /* GIS */
+
+    div.olMap {
+        max-width: calc(100vw - 30px);
+        max-height: 300px;
+    }
+
+    .olMap + .clear_features {
+        display: block;
+        margin-top: 10px;
+    }
+
+    /* Docs */
+
+    .module table.xfull {
+        width: 100%;
+    }
+
+    pre.literal-block {
+        overflow: auto;
+    }
+}
+
+/* Mobile */
+
+@media (max-width: 767px) {
+    /* Layout */
+
+    #header, #content {
+        padding: 15px;
+    }
+
+    div.breadcrumbs {
+        padding: 10px 15px;
+    }
+
+    /* Dashboard */
+
+    .colMS, .colSM {
+        margin: 0;
+    }
+
+    #content-related, .colSM #content-related {
+        width: 100%;
+        margin: 0;
+    }
+
+    #content-related .module {
+        margin-bottom: 0;
+    }
+
+    #content-related .module h2 {
+        padding: 10px 15px;
+        font-size: 1rem;
+    }
+
+    /* Changelist */
+
+    #changelist {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    #toolbar {
+        padding: 10px;
+    }
+
+    #changelist-filter {
+        margin-left: 0;
+    }
+
+    #changelist .actions label {
+        flex: 1 1;
+    }
+
+    #changelist .actions select {
+        flex: 1 0;
+        width: 100%;
+    }
+
+    #changelist .actions span {
+        flex: 1 0 100%;
+    }
+
+    #changelist-filter {
+        position: static;
+        width: auto;
+        margin-top: 30px;
+    }
+
+    .object-tools {
+        float: none;
+        margin: 0 0 15px;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    .object-tools li {
+        height: auto;
+        margin-left: 0;
+    }
+
+    .object-tools li + li {
+        margin-left: 15px;
+    }
+
+    /* Forms */
+
+    .form-row {
+        padding: 15px 0;
+    }
+
+    .aligned .form-row,
+    .aligned .form-row > div {
+        max-width: 100vw;
+    }
+
+    .aligned .form-row > div {
+        width: calc(100vw - 30px);
+    }
+
+    .flex-container {
+        flex-flow: column;
+    }
+
+    .flex-container.checkbox-row {
+        flex-flow: row;
+    }
+
+    textarea {
+        max-width: none;
+    }
+
+    .vURLField {
+        width: auto;
+    }
+
+    fieldset .fieldBox + .fieldBox {
+        margin-top: 15px;
+        padding-top: 15px;
+    }
+
+    .aligned label {
+        width: 100%;
+        min-width: auto;
+        padding: 0 0 10px;
+    }
+
+    .aligned label:after {
+        max-height: 0;
+    }
+
+    .aligned .form-row input,
+    .aligned .form-row select,
+    .aligned .form-row textarea {
+        flex: 1 1 auto;
+        max-width: 100%;
+    }
+
+    .aligned .checkbox-row input {
+        flex: 0 1 auto;
+        margin: 0;
+    }
+
+    .aligned .vCheckboxLabel {
+        flex: 1 0;
+        padding: 1px 0 0 5px;
+    }
+
+    .aligned label + p,
+    .aligned label + div.help,
+    .aligned label + div.readonly {
+        padding: 0;
+        margin-left: 0;
+    }
+
+    .aligned p.file-upload {
+        font-size: 0.8125rem;
+    }
+
+    span.clearable-file-input {
+        margin-left: 15px;
+    }
+
+    span.clearable-file-input label {
+        font-size: 0.8125rem;
+        padding-bottom: 0;
+    }
+
+    .aligned .timezonewarning {
+        flex: 1 0 100%;
+        margin-top: 5px;
+    }
+
+    form .aligned .form-row div.help {
+        width: 100%;
+        margin: 5px 0 0;
+        padding: 0;
+    }
+
+    form .aligned ul,
+    form .aligned ul.errorlist {
+        margin-left: 0;
+        padding-left: 0;
+    }
+
+    form .aligned div.radiolist {
+        margin-top: 5px;
+        margin-right: 15px;
+        margin-bottom: -3px;
+    }
+
+    form .aligned div.radiolist:not(.inline) div + div {
+        margin-top: 5px;
+    }
+
+    /* Related widget */
+
+    .related-widget-wrapper {
+        width: 100%;
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .related-widget-wrapper .selector {
+        order: 1;
+        flex: 1 0 auto;
+    }
+
+    .related-widget-wrapper > a {
+        order: 2;
+    }
+
+    .related-widget-wrapper .radiolist ~ a {
+        align-self: flex-end;
+    }
+
+    .related-widget-wrapper > select ~ a {
+        align-self: center;
+    }
+
+    /* Selector */
+
+    .selector {
+        flex-direction: column;
+        gap: 10px 0;
+    }
+
+    .selector-available, .selector-chosen {
+        flex: 1 1 auto;
+    }
+
+    .selector select {
+        max-height: 96px;
+    }
+
+    .selector ul.selector-chooser {
+        display: flex;
+        width: 60px;
+        height: 30px;
+        padding: 0 2px;
+        transform: none;
+    }
+
+    .selector ul.selector-chooser li {
+        float: left;
+    }
+
+    .selector-remove {
+        background-position: 0 0;
+    }
+
+    :enabled.selector-remove:focus, :enabled.selector-remove:hover {
+        background-position: 0 -24px;
+    }
+
+    .selector-add  {
+        background-position: 0 -48px;
+    }
+
+    :enabled.selector-add:focus, :enabled.selector-add:hover {
+        background-position: 0 -72px;
+    }
+
+    /* Inlines */
+
+    .inline-group[data-inline-type="stacked"] .inline-related {
+        border: 1px solid var(--hairline-color);
+        border-radius: 4px;
+        margin-top: 15px;
+        overflow: auto;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related > * {
+        box-sizing: border-box;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related .module {
+        padding: 0 10px;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related .module .form-row {
+        border-top: 1px solid var(--hairline-color);
+        border-bottom: none;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related .module .form-row:first-child {
+        border-top: none;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related h3 {
+        padding: 10px;
+        border-top-width: 0;
+        border-bottom-width: 2px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related h3 .inline_label {
+        margin-right: auto;
+    }
+
+    .inline-group[data-inline-type="stacked"] .inline-related h3 span.delete {
+        float: none;
+        flex: 1 1 100%;
+        margin-top: 5px;
+    }
+
+    .inline-group[data-inline-type="stacked"] .aligned .form-row > div:not([class]) {
+        width: 100%;
+    }
+
+    .inline-group[data-inline-type="stacked"] .aligned label {
+        width: 100%;
+    }
+
+    .inline-group[data-inline-type="stacked"] div.add-row {
+        margin-top: 15px;
+        border: 1px solid var(--hairline-color);
+        border-radius: 4px;
+    }
+
+    .inline-group div.add-row,
+    .inline-group .tabular tr.add-row td {
+        padding: 0;
+    }
+
+    .inline-group div.add-row a,
+    .inline-group .tabular tr.add-row td a {
+        display: block;
+        padding: 8px 10px 8px 26px;
+        background-position: 8px 9px;
+    }
+
+    /* Submit row */
+
+    .submit-row {
+        padding: 10px;
+        margin: 0 0 15px;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .submit-row input, .submit-row input.default, .submit-row a {
+        text-align: center;
+    }
+
+    .submit-row a.closelink {
+        padding: 10px 0;
+        text-align: center;
+    }
+
+    .submit-row a.deletelink {
+        margin: 0;
+    }
+
+    /* Messages */
+
+    ul.messagelist li {
+        padding-left: 40px;
+        background-position: 15px 12px;
+    }
+
+    ul.messagelist li.error {
+        background-position: 15px 12px;
+    }
+
+    ul.messagelist li.warning {
+        background-position: 15px 14px;
+    }
+
+    /* Paginator */
+
+    .paginator .this-page, .paginator a:link, .paginator a:visited {
+        padding: 4px 10px;
+    }
+
+    /* Login */
+
+    body.login {
+        padding: 0 15px;
+    }
+
+    .login #container {
+        width: auto;
+        max-width: 480px;
+        margin: 50px auto;
+    }
+
+    .login #header,
+    .login #content {
+        padding: 15px;
+    }
+
+    .login #content-main {
+        float: none;
+    }
+
+    .login .form-row {
+        padding: 0;
+    }
+
+    .login .form-row + .form-row {
+        margin-top: 15px;
+    }
+
+    .login .form-row label {
+        margin: 0 0 5px;
+        line-height: 1.2;
+    }
+
+    .login .submit-row {
+        padding: 15px 0 0;
+    }
+
+    .login br {
+        display: none;
+    }
+
+    .login .submit-row input {
+        margin: 0;
+        text-transform: uppercase;
+    }
+
+    .errornote {
+        margin: 0 0 20px;
+        padding: 8px 12px;
+        font-size: 0.8125rem;
+    }
+
+    /* Calendar and clock */
+
+    .calendarbox, .clockbox {
+        position: fixed !important;
+        top: 50% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%);
+        margin: 0;
+        border: none;
+        overflow: visible;
+    }
+
+    .calendarbox:before, .clockbox:before {
+        content: '';
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.75);
+        transform: translate(-50%, -50%);
+    }
+
+    .calendarbox > *, .clockbox > * {
+        position: relative;
+        z-index: 1;
+    }
+
+    .calendarbox > div:first-child {
+        z-index: 2;
+    }
+
+    .calendarbox .calendar, .clockbox h2 {
+        border-radius: 4px 4px 0 0;
+        overflow: hidden;
+    }
+
+    .calendarbox .calendar-cancel, .clockbox .calendar-cancel {
+        border-radius: 0 0 4px 4px;
+        overflow: hidden;
+    }
+
+    .calendar-shortcuts {
+        padding: 10px 0;
+        font-size: 0.75rem;
+        line-height: 0.75rem;
+    }
+
+    .calendar-shortcuts a {
+        margin: 0 4px;
+    }
+
+    .timelist a {
+        background: var(--body-bg);
+        padding: 4px;
+    }
+
+    .calendar-cancel {
+        padding: 8px 10px;
+    }
+
+    .clockbox h2 {
+        padding: 8px 15px;
+    }
+
+    .calendar caption {
+        padding: 10px;
+    }
+
+    .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
+        z-index: 1;
+        top: 10px;
+    }
+
+    /* History */
+
+    table#change-history tbody th, table#change-history tbody td {
+        font-size: 0.8125rem;
+        word-break: break-word;
+    }
+
+    table#change-history tbody th {
+        width: auto;
+    }
+
+    /* Docs */
+
+    table.model tbody th, table.model tbody td {
+        font-size: 0.8125rem;
+        word-break: break-word;
+    }
+}

backend/staticfiles/admin/css/responsive_rtl.css

@@ -0,0 +1,89 @@
+/* TABLETS */
+
+@media (max-width: 1024px) {
+    [dir="rtl"] .colMS {
+        margin-right: 0;
+    }
+
+    [dir="rtl"] #user-tools {
+        text-align: right;
+    }
+
+    [dir="rtl"] #changelist .actions label {
+        padding-left: 10px;
+        padding-right: 0;
+    }
+
+    [dir="rtl"] #changelist .actions select {
+        margin-left: 0;
+        margin-right: 15px;
+    }
+
+    [dir="rtl"] .change-list .filtered .results,
+    [dir="rtl"] .change-list .filtered .paginator,
+    [dir="rtl"] .filtered #toolbar,
+    [dir="rtl"] .filtered div.xfull,
+    [dir="rtl"] .filtered .actions,
+    [dir="rtl"] #changelist-filter {
+        margin-left: 0;
+    }
+
+    [dir="rtl"] .inline-group div.add-row a,
+    [dir="rtl"] .inline-group .tabular tr.add-row td a {
+        padding: 8px 26px 8px 10px;
+        background-position: calc(100% - 8px) 9px;
+    }
+
+    [dir="rtl"] .object-tools li {
+        float: right;
+    }
+
+    [dir="rtl"] .object-tools li + li {
+        margin-left: 0;
+        margin-right: 15px;
+    }
+
+    [dir="rtl"] .dashboard .module table td a {
+        padding-left: 0;
+        padding-right: 16px;
+    }
+}
+
+/* MOBILE */
+
+@media (max-width: 767px) {
+    [dir="rtl"] .aligned .related-lookup,
+    [dir="rtl"] .aligned .datetimeshortcuts {
+        margin-left: 0;
+        margin-right: 15px;
+    }
+
+    [dir="rtl"] .aligned ul,
+    [dir="rtl"] form .aligned ul.errorlist {
+        margin-right: 0;
+    }
+
+    [dir="rtl"] #changelist-filter {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    [dir="rtl"] .aligned .vCheckboxLabel {
+        padding: 1px 5px 0 0;
+    }
+
+    [dir="rtl"] .selector-remove {
+        background-position: 0 0;
+    }
+
+    [dir="rtl"] :enabled.selector-remove:focus, :enabled.selector-remove:hover {
+        background-position: 0 -24px;
+    }
+
+    [dir="rtl"] .selector-add  {
+        background-position: 0 -48px;
+    }
+
+    [dir="rtl"] :enabled.selector-add:focus, :enabled.selector-add:hover {
+        background-position: 0 -72px;
+    }
+}

backend/staticfiles/admin/css/rtl.css

@@ -0,0 +1,293 @@
+/* GLOBAL */
+
+th {
+    text-align: right;
+}
+
+.module h2, .module caption {
+    text-align: right;
+}
+
+.module ul, .module ol {
+    margin-left: 0;
+    margin-right: 1.5em;
+}
+
+.viewlink, .addlink, .changelink, .hidelink {
+    padding-left: 0;
+    padding-right: 16px;
+    background-position: 100% 1px;
+}
+
+.deletelink {
+    padding-left: 0;
+    padding-right: 16px;
+    background-position: 100% 1px;
+}
+
+.object-tools {
+    float: left;
+}
+
+thead th:first-child,
+tfoot td:first-child {
+    border-left: none;
+}
+
+/* LAYOUT */
+
+#user-tools {
+    right: auto;
+    left: 0;
+    text-align: left;
+}
+
+div.breadcrumbs {
+    text-align: right;
+}
+
+#content-main {
+    float: right;
+}
+
+#content-related {
+    float: left;
+    margin-left: -300px;
+    margin-right: auto;
+}
+
+.colMS {
+    margin-left: 300px;
+    margin-right: 0;
+}
+
+/* SORTABLE TABLES */
+
+table thead th.sorted .sortoptions {
+   float: left;
+}
+
+thead th.sorted .text {
+    padding-right: 0;
+    padding-left: 42px;
+}
+
+/* dashboard styles */
+
+.dashboard .module table td a {
+    padding-left: .6em;
+    padding-right: 16px;
+}
+
+/* changelists styles */
+
+.change-list .filtered table {
+    border-left: none;
+    border-right: 0px none;
+}
+
+#changelist-filter {
+    border-left: none;
+    border-right: none;
+    margin-left: 0;
+    margin-right: 30px;
+}
+
+#changelist-filter li.selected {
+    border-left: none;
+    padding-left: 10px;
+    margin-left: 0;
+    border-right: 5px solid var(--hairline-color);
+    padding-right: 10px;
+    margin-right: -15px;
+}
+
+#changelist table tbody td:first-child, #changelist table tbody th:first-child {
+    border-right: none;
+    border-left: none;
+}
+
+.paginator .end {
+    margin-left: 6px;
+    margin-right: 0;
+}
+
+.paginator input {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+/* FORMS */
+
+.aligned label {
+    padding: 0 0 3px 1em;
+}
+
+.submit-row a.deletelink {
+    margin-left: 0;
+    margin-right: auto;
+}
+
+.vDateField, .vTimeField {
+    margin-left: 2px;
+}
+
+.aligned .form-row input {
+    margin-left: 5px;
+}
+
+form .aligned ul {
+    margin-right: 163px;
+    padding-right: 10px;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+form ul.inline li {
+    float: right;
+    padding-right: 0;
+    padding-left: 7px;
+}
+
+form .aligned p.help,
+form .aligned div.help {
+    margin-left: 0;
+    margin-right: 160px;
+    padding-right: 10px;
+}
+
+form div.help ul,
+form .aligned .checkbox-row + .help,
+form .aligned p.date div.help.timezonewarning,
+form .aligned p.datetime div.help.timezonewarning,
+form .aligned p.time div.help.timezonewarning {
+    margin-right: 0;
+    padding-right: 0;
+}
+
+form .wide p.help,
+form .wide ul.errorlist,
+form .wide div.help {
+    padding-left: 0;
+    padding-right: 50px;
+}
+
+.submit-row {
+    text-align: right;
+}
+
+fieldset .fieldBox {
+    margin-left: 20px;
+    margin-right: 0;
+}
+
+.errorlist li {
+    background-position: 100% 12px;
+    padding: 0;
+}
+
+.errornote {
+    background-position: 100% 12px;
+    padding: 10px 12px;
+}
+
+/* WIDGETS */
+
+.calendarnav-previous {
+    top: 0;
+    left: auto;
+    right: 10px;
+    background: url(../img/calendar-icons.svg) 0 -15px no-repeat;
+}
+
+.calendarnav-next {
+    top: 0;
+    right: auto;
+    left: 10px;
+    background: url(../img/calendar-icons.svg) 0 0 no-repeat;
+}
+
+.calendar caption, .calendarbox h2 {
+    text-align: center;
+}
+
+.selector {
+    float: right;
+}
+
+.selector .selector-filter {
+    text-align: right;
+}
+
+.selector-add {
+    background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+    background-size: 24px auto;
+}
+
+:enabled.selector-add:focus, :enabled.selector-add:hover {
+    background-position: 0 -120px;
+}
+
+.selector-remove {
+    background: url(../img/selector-icons.svg) 0 -144px no-repeat;
+    background-size: 24px auto;
+}
+
+:enabled.selector-remove:focus, :enabled.selector-remove:hover {
+    background-position: 0 -168px;
+}
+
+.selector-chooseall {
+    background: url(../img/selector-icons.svg) right -128px no-repeat;
+}
+
+:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover {
+    background-position: 100% -144px;
+}
+
+.selector-clearall {
+    background: url(../img/selector-icons.svg) 0 -160px no-repeat;
+}
+
+:enabled.selector-clearall:focus, :enabled.selector-clearall:hover {
+    background-position: 0 -176px;
+}
+
+.inline-deletelink {
+    float: left;
+}
+
+form .form-row p.datetime {
+    overflow: hidden;
+}
+
+.related-widget-wrapper {
+    float: right;
+}
+
+/* MISC */
+
+.inline-related h2, .inline-group h2 {
+    text-align: right
+}
+
+.inline-related h3 span.delete {
+    padding-right: 20px;
+    padding-left: inherit;
+    left: 10px;
+    right: inherit;
+    float:left;
+}
+
+.inline-related h3 span.delete label {
+    margin-left: inherit;
+    margin-right: 2px;
+}
+
+.inline-group .tabular td.original p {
+    right: 0;
+}
+
+.selector .selector-chooser {
+    margin: 0;
+}

backend/staticfiles/admin/css/unusable_password_field.css

@@ -0,0 +1,19 @@
+/* Hide warnings fields if usable password is selected */
+form:has(#id_usable_password input[value="true"]:checked) .messagelist {
+    display: none;
+}
+
+/* Hide password fields if unusable password is selected */
+form:has(#id_usable_password input[value="false"]:checked) .field-password1,
+form:has(#id_usable_password input[value="false"]:checked) .field-password2 {
+    display: none;
+}
+
+/* Select appropriate submit button */
+form:has(#id_usable_password input[value="true"]:checked) input[type="submit"].unset-password {
+    display: none;
+}
+
+form:has(#id_usable_password input[value="false"]:checked) input[type="submit"].set-password {
+    display: none;
+}

backend/staticfiles/admin/css/vendor/select2/LICENSE-SELECT2.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2012-2017 Kevin Brown, Igor Vaynberg, and Select2 contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

backend/staticfiles/admin/css/vendor/select2/select2.css

@@ -0,0 +1,481 @@
+.select2-container {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  position: relative;
+  vertical-align: middle; }
+  .select2-container .select2-selection--single {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: block;
+    height: 28px;
+    user-select: none;
+    -webkit-user-select: none; }
+    .select2-container .select2-selection--single .select2-selection__rendered {
+      display: block;
+      padding-left: 8px;
+      padding-right: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+    .select2-container .select2-selection--single .select2-selection__clear {
+      position: relative; }
+  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
+    padding-right: 8px;
+    padding-left: 20px; }
+  .select2-container .select2-selection--multiple {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: block;
+    min-height: 32px;
+    user-select: none;
+    -webkit-user-select: none; }
+    .select2-container .select2-selection--multiple .select2-selection__rendered {
+      display: inline-block;
+      overflow: hidden;
+      padding-left: 8px;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+  .select2-container .select2-search--inline {
+    float: left; }
+    .select2-container .select2-search--inline .select2-search__field {
+      box-sizing: border-box;
+      border: none;
+      font-size: 100%;
+      margin-top: 5px;
+      padding: 0; }
+      .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
+        -webkit-appearance: none; }
+
+.select2-dropdown {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  left: -100000px;
+  width: 100%;
+  z-index: 1051; }
+
+.select2-results {
+  display: block; }
+
+.select2-results__options {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
+.select2-results__option {
+  padding: 6px;
+  user-select: none;
+  -webkit-user-select: none; }
+  .select2-results__option[aria-selected] {
+    cursor: pointer; }
+
+.select2-container--open .select2-dropdown {
+  left: 0; }
+
+.select2-container--open .select2-dropdown--above {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container--open .select2-dropdown--below {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
+.select2-search--dropdown {
+  display: block;
+  padding: 4px; }
+  .select2-search--dropdown .select2-search__field {
+    padding: 4px;
+    width: 100%;
+    box-sizing: border-box; }
+    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
+      -webkit-appearance: none; }
+  .select2-search--dropdown.select2-search--hide {
+    display: none; }
+
+.select2-close-mask {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  min-width: 100%;
+  height: auto;
+  width: auto;
+  opacity: 0;
+  z-index: 99;
+  background-color: #fff;
+  filter: alpha(opacity=0); }
+
+.select2-hidden-accessible {
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; }
+
+.select2-container--default .select2-selection--single {
+  background-color: #fff;
+  border: 1px solid #aaa;
+  border-radius: 4px; }
+  .select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: #444;
+    line-height: 28px; }
+  .select2-container--default .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold; }
+  .select2-container--default .select2-selection--single .select2-selection__placeholder {
+    color: #999; }
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px; }
+    .select2-container--default .select2-selection--single .select2-selection__arrow b {
+      border-color: #888 transparent transparent transparent;
+      border-style: solid;
+      border-width: 5px 4px 0 4px;
+      height: 0;
+      left: 50%;
+      margin-left: -4px;
+      margin-top: -2px;
+      position: absolute;
+      top: 50%;
+      width: 0; }
+
+.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
+  float: left; }
+
+.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+  left: 1px;
+  right: auto; }
+
+.select2-container--default.select2-container--disabled .select2-selection--single {
+  background-color: #eee;
+  cursor: default; }
+  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
+    display: none; }
+
+.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+  border-color: transparent transparent #888 transparent;
+  border-width: 0 4px 5px 4px; }
+
+.select2-container--default .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: text; }
+  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
+    box-sizing: border-box;
+    list-style: none;
+    margin: 0;
+    padding: 0 5px;
+    width: 100%; }
+    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
+      list-style: none; }
+  .select2-container--default .select2-selection--multiple .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-top: 5px;
+    margin-right: 10px;
+    padding: 1px; }
+  .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #e4e4e4;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px; }
+  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+    color: #999;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px; }
+    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+      color: #333; }
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
+  float: right; }
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+  margin-left: 5px;
+  margin-right: auto; }
+
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+  margin-left: 2px;
+  margin-right: auto; }
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: solid black 1px;
+  outline: 0; }
+
+.select2-container--default.select2-container--disabled .select2-selection--multiple {
+  background-color: #eee;
+  cursor: default; }
+
+.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
+  display: none; }
+
+.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
+.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container--default .select2-search--dropdown .select2-search__field {
+  border: 1px solid #aaa; }
+
+.select2-container--default .select2-search--inline .select2-search__field {
+  background: transparent;
+  border: none;
+  outline: 0;
+  box-shadow: none;
+  -webkit-appearance: textfield; }
+
+.select2-container--default .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto; }
+
+.select2-container--default .select2-results__option[role=group] {
+  padding: 0; }
+
+.select2-container--default .select2-results__option[aria-disabled=true] {
+  color: #999; }
+
+.select2-container--default .select2-results__option[aria-selected=true] {
+  background-color: #ddd; }
+
+.select2-container--default .select2-results__option .select2-results__option {
+  padding-left: 1em; }
+  .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
+    padding-left: 0; }
+  .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -1em;
+    padding-left: 2em; }
+    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+      margin-left: -2em;
+      padding-left: 3em; }
+      .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+        margin-left: -3em;
+        padding-left: 4em; }
+        .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+          margin-left: -4em;
+          padding-left: 5em; }
+          .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+            margin-left: -5em;
+            padding-left: 6em; }
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: #5897fb;
+  color: white; }
+
+.select2-container--default .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px; }
+
+.select2-container--classic .select2-selection--single {
+  background-color: #f7f7f7;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  outline: 0;
+  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
+  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
+  .select2-container--classic .select2-selection--single:focus {
+    border: 1px solid #5897fb; }
+  .select2-container--classic .select2-selection--single .select2-selection__rendered {
+    color: #444;
+    line-height: 28px; }
+  .select2-container--classic .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin-right: 10px; }
+  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
+    color: #999; }
+  .select2-container--classic .select2-selection--single .select2-selection__arrow {
+    background-color: #ddd;
+    border: none;
+    border-left: 1px solid #aaa;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px;
+    background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+    background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+    background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
+    .select2-container--classic .select2-selection--single .select2-selection__arrow b {
+      border-color: #888 transparent transparent transparent;
+      border-style: solid;
+      border-width: 5px 4px 0 4px;
+      height: 0;
+      left: 50%;
+      margin-left: -4px;
+      margin-top: -2px;
+      position: absolute;
+      top: 50%;
+      width: 0; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
+  float: left; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+  border: none;
+  border-right: 1px solid #aaa;
+  border-radius: 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  left: 1px;
+  right: auto; }
+
+.select2-container--classic.select2-container--open .select2-selection--single {
+  border: 1px solid #5897fb; }
+  .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
+    background: transparent;
+    border: none; }
+    .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
+      border-color: transparent transparent #888 transparent;
+      border-width: 0 4px 5px 4px; }
+
+.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
+  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
+
+.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
+
+.select2-container--classic .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: text;
+  outline: 0; }
+  .select2-container--classic .select2-selection--multiple:focus {
+    border: 1px solid #5897fb; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
+    list-style: none;
+    margin: 0;
+    padding: 0 5px; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__clear {
+    display: none; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
+    background-color: #e4e4e4;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
+    color: #888;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px; }
+    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
+      color: #555; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+  float: right;
+  margin-left: 5px;
+  margin-right: auto; }
+
+.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+  margin-left: 2px;
+  margin-right: auto; }
+
+.select2-container--classic.select2-container--open .select2-selection--multiple {
+  border: 1px solid #5897fb; }
+
+.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
+.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.select2-container--classic .select2-search--dropdown .select2-search__field {
+  border: 1px solid #aaa;
+  outline: 0; }
+
+.select2-container--classic .select2-search--inline .select2-search__field {
+  outline: 0;
+  box-shadow: none; }
+
+.select2-container--classic .select2-dropdown {
+  background-color: white;
+  border: 1px solid transparent; }
+
+.select2-container--classic .select2-dropdown--above {
+  border-bottom: none; }
+
+.select2-container--classic .select2-dropdown--below {
+  border-top: none; }
+
+.select2-container--classic .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto; }
+
+.select2-container--classic .select2-results__option[role=group] {
+  padding: 0; }
+
+.select2-container--classic .select2-results__option[aria-disabled=true] {
+  color: grey; }
+
+.select2-container--classic .select2-results__option--highlighted[aria-selected] {
+  background-color: #3875d7;
+  color: white; }
+
+.select2-container--classic .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px; }
+
+.select2-container--classic.select2-container--open .select2-dropdown {
+  border-color: #5897fb; }

backend/staticfiles/admin/css/vendor/select2/select2.min.css

@@ -0,0 +1 @@
+.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right;margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}

backend/staticfiles/admin/css/widgets.css

@@ -0,0 +1,613 @@
+/* SELECTOR (FILTER INTERFACE) */
+
+.selector {
+    display: flex;
+    flex: 1;
+    gap: 0 10px;
+}
+
+.selector select {
+    height: 17.2em;
+    flex: 1 0 auto;
+    overflow: scroll;
+    width: 100%;
+}
+
+.selector-available, .selector-chosen {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1;
+}
+
+.selector-available-title, .selector-chosen-title {
+    border: 1px solid var(--border-color);
+    border-radius: 4px 4px 0 0;
+}
+
+.selector .helptext {
+    font-size: 0.6875rem;
+}
+
+.selector-chosen .list-footer-display {
+    border: 1px solid var(--border-color);
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    margin: 0 0 10px;
+    padding: 8px;
+    text-align: center;
+    background: var(--primary);
+    color: var(--header-link-color);
+    cursor: pointer;
+}
+.selector-chosen .list-footer-display__clear {
+    color: var(--breadcrumbs-fg);
+}
+
+.selector-chosen-title {
+    background: var(--secondary);
+    color: var(--header-link-color);
+    padding: 8px;
+}
+
+.aligned .selector-chosen-title label {
+    color: var(--header-link-color);
+    width: 100%;
+}
+
+.selector-available-title {
+    background: var(--darkened-bg);
+    color: var(--body-quiet-color);
+    padding: 8px;
+}
+
+.aligned .selector-available-title label {
+    width: 100%;
+}
+
+.selector .selector-filter {
+    border: 1px solid var(--border-color);
+    border-width: 0 1px;
+    padding: 8px;
+    color: var(--body-quiet-color);
+    font-size: 0.625rem;
+    margin: 0;
+    text-align: left;
+    display: flex;
+    gap: 8px;
+}
+
+.selector .selector-filter label,
+.inline-group .aligned .selector .selector-filter label {
+    float: left;
+    margin: 7px 0 0;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    overflow: hidden;
+    line-height: 1;
+    min-width: auto;
+}
+
+.selector-filter input {
+    flex-grow: 1;
+}
+
+.selector ul.selector-chooser {
+    align-self: center;
+    width: 30px;
+    background-color: var(--selected-bg);
+    border-radius: 10px;
+    margin: 0;
+    padding: 0;
+    transform: translateY(-17px);
+}
+
+.selector-chooser li {
+    margin: 0;
+    padding: 3px;
+    list-style-type: none;
+}
+
+.selector select {
+    padding: 0 10px;
+    margin: 0 0 10px;
+    border-radius: 0 0 4px 4px;
+}
+.selector .selector-chosen--with-filtered select {
+    margin: 0;
+    border-radius: 0;
+    height: 14em;
+}
+
+.selector .selector-chosen:not(.selector-chosen--with-filtered) .list-footer-display {
+    display: none;
+}
+
+.selector-add, .selector-remove {
+    width: 24px;
+    height: 24px;
+    display: block;
+    text-indent: -3000px;
+    overflow: hidden;
+    cursor: default;
+    opacity: 0.55;
+    border: none;
+}
+
+:enabled.selector-add, :enabled.selector-remove {
+    opacity: 1;
+}
+
+:enabled.selector-add:hover, :enabled.selector-remove:hover {
+    cursor: pointer;
+}
+
+.selector-add {
+    background: url(../img/selector-icons.svg) 0 -144px no-repeat;
+    background-size: 24px auto;
+}
+
+:enabled.selector-add:focus, :enabled.selector-add:hover {
+    background-position: 0 -168px;
+}
+
+.selector-remove {
+    background: url(../img/selector-icons.svg) 0 -96px no-repeat;
+    background-size: 24px auto;
+}
+
+:enabled.selector-remove:focus, :enabled.selector-remove:hover {
+    background-position: 0 -120px;
+}
+
+.selector-chooseall, .selector-clearall {
+    display: inline-block;
+    height: 16px;
+    text-align: left;
+    margin: 0 auto;
+    overflow: hidden;
+    font-weight: bold;
+    line-height: 16px;
+    color: var(--body-quiet-color);
+    text-decoration: none;
+    opacity: 0.55;
+    border: none;
+}
+
+:enabled.selector-chooseall:focus, :enabled.selector-clearall:focus,
+:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover {
+    color: var(--link-fg);
+}
+
+:enabled.selector-chooseall, :enabled.selector-clearall {
+    opacity: 1;
+}
+
+:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover {
+    cursor: pointer;
+}
+
+.selector-chooseall {
+    padding: 0 18px 0 0;
+    background: url(../img/selector-icons.svg) right -160px no-repeat;
+    cursor: default;
+}
+
+:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover {
+    background-position: 100% -176px;
+}
+
+.selector-clearall {
+    padding: 0 0 0 18px;
+    background: url(../img/selector-icons.svg) 0 -128px no-repeat;
+    cursor: default;
+}
+
+:enabled.selector-clearall:focus, :enabled.selector-clearall:hover {
+    background-position: 0 -144px;
+}
+
+/* STACKED SELECTORS */
+
+.stacked {
+    float: left;
+    width: 490px;
+    display: block;
+}
+
+.stacked select {
+    width: 480px;
+    height: 10.1em;
+}
+
+.stacked .selector-available, .stacked .selector-chosen {
+    width: 480px;
+}
+
+.stacked .selector-available {
+    margin-bottom: 0;
+}
+
+.stacked .selector-available input {
+    width: 422px;
+}
+
+.stacked ul.selector-chooser {
+    display: flex;
+    height: 30px;
+    width: 64px;
+    margin: 0 0 10px 40%;
+    background-color: #eee;
+    border-radius: 10px;
+    transform: none;
+}
+
+.stacked .selector-chooser li {
+    float: left;
+    padding: 3px 3px 3px 5px;
+}
+
+.stacked .selector-chooseall, .stacked .selector-clearall {
+    display: none;
+}
+
+.stacked .selector-add {
+    background: url(../img/selector-icons.svg) 0 -48px no-repeat;
+    background-size: 24px auto;
+    cursor: default;
+}
+
+.stacked :enabled.selector-add {
+    background-position: 0 -48px;
+    cursor: pointer;
+}
+
+.stacked :enabled.selector-add:focus, .stacked :enabled.selector-add:hover {
+    background-position: 0 -72px;
+    cursor: pointer;
+}
+
+.stacked .selector-remove {
+    background: url(../img/selector-icons.svg) 0 0 no-repeat;
+    background-size: 24px auto;
+    cursor: default;
+}
+
+.stacked :enabled.selector-remove {
+    background-position: 0 0px;
+    cursor: pointer;
+}
+
+.stacked :enabled.selector-remove:focus, .stacked :enabled.selector-remove:hover {
+    background-position: 0 -24px;
+    cursor: pointer;
+}
+
+.selector .help-icon {
+    background: url(../img/icon-unknown.svg) 0 0 no-repeat;
+    display: inline-block;
+    vertical-align: middle;
+    margin: -2px 0 0 2px;
+    width: 13px;
+    height: 13px;
+}
+
+.selector .selector-chosen .help-icon {
+    background: url(../img/icon-unknown-alt.svg) 0 0 no-repeat;
+}
+
+.selector .search-label-icon {
+    background: url(../img/search.svg) 0 0 no-repeat;
+    display: inline-block;
+    height: 1.125rem;
+    width: 1.125rem;
+}
+
+/* DATE AND TIME */
+
+p.datetime {
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+    color: var(--body-quiet-color);
+    font-weight: bold;
+}
+
+.datetime span {
+    white-space: nowrap;
+    font-weight: normal;
+    font-size: 0.6875rem;
+    color: var(--body-quiet-color);
+}
+
+.datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
+    margin-left: 5px;
+    margin-bottom: 4px;
+}
+
+table p.datetime {
+    font-size: 0.6875rem;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    height: 24px;
+    width: 24px;
+    overflow: hidden;
+}
+
+.datetimeshortcuts .clock-icon {
+    background: url(../img/icon-clock.svg) 0 0 no-repeat;
+    background-size: 24px auto;
+}
+
+.datetimeshortcuts a:focus .clock-icon,
+.datetimeshortcuts a:hover .clock-icon {
+    background-position: 0 -24px;
+}
+
+.datetimeshortcuts .date-icon {
+    background: url(../img/icon-calendar.svg) 0 0 no-repeat;
+    background-size: 24px auto;
+    top: -1px;
+}
+
+.datetimeshortcuts a:focus .date-icon,
+.datetimeshortcuts a:hover .date-icon {
+    background-position: 0 -24px;
+}
+
+.timezonewarning {
+    font-size: 0.6875rem;
+    color: var(--body-quiet-color);
+}
+
+/* URL */
+
+p.url {
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+    color: var(--body-quiet-color);
+    font-size: 0.6875rem;
+    font-weight: bold;
+}
+
+.url a {
+    font-weight: normal;
+}
+
+/* FILE UPLOADS */
+
+p.file-upload {
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+    color: var(--body-quiet-color);
+    font-size: 0.6875rem;
+    font-weight: bold;
+}
+
+.file-upload a {
+    font-weight: normal;
+}
+
+.file-upload .deletelink {
+    margin-left: 5px;
+}
+
+span.clearable-file-input label {
+    color: var(--body-fg);
+    font-size: 0.6875rem;
+    display: inline;
+    float: none;
+}
+
+/* CALENDARS & CLOCKS */
+
+.calendarbox, .clockbox {
+    margin: 5px auto;
+    font-size: 0.75rem;
+    width: 19em;
+    text-align: center;
+    background: var(--body-bg);
+    color: var(--body-fg);
+    border: 1px solid var(--hairline-color);
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    position: relative;
+}
+
+.clockbox {
+    width: auto;
+}
+
+.calendar {
+    margin: 0;
+    padding: 0;
+}
+
+.calendar table {
+    margin: 0;
+    padding: 0;
+    border-collapse: collapse;
+    background: white;
+    width: 100%;
+}
+
+.calendar caption, .calendarbox h2 {
+    margin: 0;
+    text-align: center;
+    border-top: none;
+    font-weight: 700;
+    font-size: 0.75rem;
+    color: #333;
+    background: var(--accent);
+}
+
+.calendar th {
+    padding: 8px 5px;
+    background: var(--darkened-bg);
+    border-bottom: 1px solid var(--border-color);
+    font-weight: 400;
+    font-size: 0.75rem;
+    text-align: center;
+    color: var(--body-quiet-color);
+}
+
+.calendar td {
+    font-weight: 400;
+    font-size: 0.75rem;
+    text-align: center;
+    padding: 0;
+    border-top: 1px solid var(--hairline-color);
+    border-bottom: none;
+}
+
+.calendar td.selected a {
+    background: var(--secondary);
+    color: var(--button-fg);
+}
+
+.calendar td.nonday {
+    background: var(--darkened-bg);
+}
+
+.calendar td.today a {
+    font-weight: 700;
+}
+
+.calendar td a, .timelist a {
+    display: block;
+    font-weight: 400;
+    padding: 6px;
+    text-decoration: none;
+    color: var(--body-quiet-color);
+}
+
+.calendar td a:focus, .timelist a:focus,
+.calendar td a:hover, .timelist a:hover {
+    background: var(--primary);
+    color: white;
+}
+
+.calendar td a:active, .timelist a:active {
+    background: var(--header-bg);
+    color: white;
+}
+
+.calendarnav {
+    font-size: 0.625rem;
+    text-align: center;
+    color: #ccc;
+    margin: 0;
+    padding: 1px 3px;
+}
+
+.calendarnav a:link, #calendarnav a:visited,
+#calendarnav a:focus, #calendarnav a:hover {
+    color: var(--body-quiet-color);
+}
+
+.calendar-shortcuts {
+    background: var(--body-bg);
+    color: var(--body-quiet-color);
+    font-size: 0.6875rem;
+    line-height: 0.6875rem;
+    border-top: 1px solid var(--hairline-color);
+    padding: 8px 0;
+}
+
+.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
+    display: block;
+    position: absolute;
+    top: 8px;
+    width: 15px;
+    height: 15px;
+    text-indent: -9999px;
+    padding: 0;
+}
+
+.calendarnav-previous {
+    left: 10px;
+    background: url(../img/calendar-icons.svg) 0 0 no-repeat;
+}
+
+.calendarnav-next {
+    right: 10px;
+    background: url(../img/calendar-icons.svg) 0 -15px no-repeat;
+}
+
+.calendar-cancel {
+    margin: 0;
+    padding: 4px 0;
+    font-size: 0.75rem;
+    background: var(--close-button-bg);
+    border-top: 1px solid var(--border-color);
+    color: var(--button-fg);
+}
+
+.calendar-cancel:focus, .calendar-cancel:hover {
+    background: var(--close-button-hover-bg);
+}
+
+.calendar-cancel a {
+    color: var(--button-fg);
+    display: block;
+}
+
+ul.timelist, .timelist li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.timelist a {
+    padding: 2px;
+}
+
+/* EDIT INLINE */
+
+.inline-deletelink {
+    float: right;
+    text-indent: -9999px;
+    background: url(../img/inline-delete.svg) 0 0 no-repeat;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 0px none;
+    margin-bottom: .25rem;
+}
+
+.inline-deletelink:focus, .inline-deletelink:hover {
+    cursor: pointer;
+}
+
+/* RELATED WIDGET WRAPPER */
+.related-widget-wrapper {
+    display: flex;
+    gap: 0 10px;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    margin-bottom: 5px;
+}
+
+.related-widget-wrapper-link {
+    opacity: .6;
+    filter: grayscale(1);
+}
+
+.related-widget-wrapper-link:link {
+    opacity: 1;
+    filter: grayscale(0);
+}
+
+/* GIS MAPS */
+.dj_map {
+    width: 600px;
+    height: 400px;
+}

backend/staticfiles/admin/img/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Code Charm Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

backend/staticfiles/admin/img/README.txt

@@ -0,0 +1,7 @@
+All icons are taken from Font Awesome (https://fontawesome.com/) project.
+The Font Awesome font is licensed under the SIL OFL 1.1:
+- https://scripts.sil.org/OFL
+
+SVG icons source: https://github.com/encharm/Font-Awesome-SVG-PNG
+Font-Awesome-SVG-PNG is licensed under the MIT license (see file license
+in current folder).

backend/staticfiles/admin/js/SelectBox.js

@@ -0,0 +1,116 @@
+'use strict';
+{
+    const SelectBox = {
+        cache: {},
+        init: function(id) {
+            const box = document.getElementById(id);
+            SelectBox.cache[id] = [];
+            const cache = SelectBox.cache[id];
+            for (const node of box.options) {
+                cache.push({value: node.value, text: node.text, displayed: 1});
+            }
+        },
+        redisplay: function(id) {
+            // Repopulate HTML select box from cache
+            const box = document.getElementById(id);
+            const scroll_value_from_top = box.scrollTop;
+            box.innerHTML = '';
+            for (const node of SelectBox.cache[id]) {
+                if (node.displayed) {
+                    const new_option = new Option(node.text, node.value, false, false);
+                    // Shows a tooltip when hovering over the option
+                    new_option.title = node.text;
+                    box.appendChild(new_option);
+                }
+            }
+            box.scrollTop = scroll_value_from_top;
+        },
+        filter: function(id, text) {
+            // Redisplay the HTML select box, displaying only the choices containing ALL
+            // the words in text. (It's an AND search.)
+            const tokens = text.toLowerCase().split(/\s+/);
+            for (const node of SelectBox.cache[id]) {
+                node.displayed = 1;
+                const node_text = node.text.toLowerCase();
+                for (const token of tokens) {
+                    if (!node_text.includes(token)) {
+                        node.displayed = 0;
+                        break; // Once the first token isn't found we're done
+                    }
+                }
+            }
+            SelectBox.redisplay(id);
+        },
+        get_hidden_node_count(id) {
+            const cache = SelectBox.cache[id] || [];
+            return cache.filter(node => node.displayed === 0).length;
+        },
+        delete_from_cache: function(id, value) {
+            let delete_index = null;
+            const cache = SelectBox.cache[id];
+            for (const [i, node] of cache.entries()) {
+                if (node.value === value) {
+                    delete_index = i;
+                    break;
+                }
+            }
+            cache.splice(delete_index, 1);
+        },
+        add_to_cache: function(id, option) {
+            SelectBox.cache[id].push({value: option.value, text: option.text, displayed: 1});
+        },
+        cache_contains: function(id, value) {
+            // Check if an item is contained in the cache
+            for (const node of SelectBox.cache[id]) {
+                if (node.value === value) {
+                    return true;
+                }
+            }
+            return false;
+        },
+        move: function(from, to) {
+            const from_box = document.getElementById(from);
+            for (const option of from_box.options) {
+                const option_value = option.value;
+                if (option.selected && SelectBox.cache_contains(from, option_value)) {
+                    SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
+                    SelectBox.delete_from_cache(from, option_value);
+                }
+            }
+            SelectBox.redisplay(from);
+            SelectBox.redisplay(to);
+        },
+        move_all: function(from, to) {
+            const from_box = document.getElementById(from);
+            for (const option of from_box.options) {
+                const option_value = option.value;
+                if (SelectBox.cache_contains(from, option_value)) {
+                    SelectBox.add_to_cache(to, {value: option_value, text: option.text, displayed: 1});
+                    SelectBox.delete_from_cache(from, option_value);
+                }
+            }
+            SelectBox.redisplay(from);
+            SelectBox.redisplay(to);
+        },
+        sort: function(id) {
+            SelectBox.cache[id].sort(function(a, b) {
+                a = a.text.toLowerCase();
+                b = b.text.toLowerCase();
+                if (a > b) {
+                    return 1;
+                }
+                if (a < b) {
+                    return -1;
+                }
+                return 0;
+            } );
+        },
+        select_all: function(id) {
+            const box = document.getElementById(id);
+            for (const option of box.options) {
+                option.selected = true;
+            }
+        }
+    };
+    window.SelectBox = SelectBox;
+}

backend/staticfiles/admin/js/SelectFilter2.js

@@ -0,0 +1,311 @@
+/*global SelectBox, gettext, ngettext, interpolate, quickElement, SelectFilter*/
+/*
+SelectFilter2 - Turns a multiple-select box into a filter interface.
+
+Requires core.js and SelectBox.js.
+*/
+'use strict';
+{
+    window.SelectFilter = {
+        init: function(field_id, field_name, is_stacked) {
+            if (field_id.match(/__prefix__/)) {
+                // Don't initialize on empty forms.
+                return;
+            }
+            const from_box = document.getElementById(field_id);
+            from_box.id += '_from'; // change its ID
+            from_box.className = 'filtered';
+            from_box.setAttribute('aria-labelledby', field_id + '_from_title');
+
+            for (const p of from_box.parentNode.getElementsByTagName('p')) {
+                if (p.classList.contains("info")) {
+                    // Remove <p class="info">, because it just gets in the way.
+                    from_box.parentNode.removeChild(p);
+                } else if (p.classList.contains("help")) {
+                    // Move help text up to the top so it isn't below the select
+                    // boxes or wrapped off on the side to the right of the add
+                    // button:
+                    from_box.parentNode.insertBefore(p, from_box.parentNode.firstChild);
+                }
+            }
+
+            // <div class="selector"> or <div class="selector stacked">
+            const selector_div = quickElement('div', from_box.parentNode);
+            // Make sure the selector div is at the beginning so that the
+            // add link would be displayed to the right of the widget.
+            from_box.parentNode.prepend(selector_div);
+            selector_div.className = is_stacked ? 'selector stacked' : 'selector';
+
+            // <div class="selector-available">
+            const selector_available = quickElement('div', selector_div);
+            selector_available.className = 'selector-available';
+            const selector_available_title = quickElement('div', selector_available);
+            selector_available_title.id = field_id + '_from_title';
+            selector_available_title.className = 'selector-available-title';
+            quickElement('label', selector_available_title, interpolate(gettext('Available %s') + ' ', [field_name]), 'for', field_id + '_from');
+            quickElement(
+                'p',
+                selector_available_title,
+                interpolate(gettext('Choose %s by selecting them and then select the "Choose" arrow button.'), [field_name]),
+                'class', 'helptext'
+            );
+
+            const filter_p = quickElement('p', selector_available, '', 'id', field_id + '_filter');
+            filter_p.className = 'selector-filter';
+
+            const search_filter_label = quickElement('label', filter_p, '', 'for', field_id + '_input');
+
+            quickElement(
+                'span', search_filter_label, '',
+                'class', 'help-tooltip search-label-icon',
+                'aria-label', interpolate(gettext("Type into this box to filter down the list of available %s."), [field_name])
+            );
+
+            filter_p.appendChild(document.createTextNode(' '));
+
+            const filter_input = quickElement('input', filter_p, '', 'type', 'text', 'placeholder', gettext("Filter"));
+            filter_input.id = field_id + '_input';
+
+            selector_available.appendChild(from_box);
+            const choose_all = quickElement(
+                'button',
+                selector_available,
+                interpolate(gettext('Choose all %s'), [field_name]),
+                'id', field_id + '_add_all',
+                'class', 'selector-chooseall',
+                'type', 'button'
+            );
+
+            // <ul class="selector-chooser">
+            const selector_chooser = quickElement('ul', selector_div);
+            selector_chooser.className = 'selector-chooser';
+            const add_button = quickElement(
+                'button',
+                quickElement('li', selector_chooser),
+                interpolate(gettext('Choose selected %s'), [field_name]),
+                'id', field_id + '_add',
+                'class', 'selector-add',
+                'type', 'button'
+            );
+            const remove_button = quickElement(
+                'button',
+                quickElement('li', selector_chooser),
+                interpolate(gettext('Remove selected %s'), [field_name]),
+                'id', field_id + '_remove',
+                'class', 'selector-remove',
+                'type', 'button'
+            );
+
+            // <div class="selector-chosen">
+            const selector_chosen = quickElement('div', selector_div, '', 'id', field_id + '_selector_chosen');
+            selector_chosen.className = 'selector-chosen';
+            const selector_chosen_title = quickElement('div', selector_chosen);
+            selector_chosen_title.className = 'selector-chosen-title';
+            selector_chosen_title.id = field_id + '_to_title';
+            quickElement('label', selector_chosen_title, interpolate(gettext('Chosen %s') + ' ', [field_name]), 'for', field_id + '_to');
+            quickElement(
+                'p',
+                selector_chosen_title,
+                interpolate(gettext('Remove %s by selecting them and then select the "Remove" arrow button.'), [field_name]),
+                'class', 'helptext'
+            );
+            
+            const filter_selected_p = quickElement('p', selector_chosen, '', 'id', field_id + '_filter_selected');
+            filter_selected_p.className = 'selector-filter';
+
+            const search_filter_selected_label = quickElement('label', filter_selected_p, '', 'for', field_id + '_selected_input');
+
+            quickElement(
+                'span', search_filter_selected_label, '',
+                'class', 'help-tooltip search-label-icon',
+                'aria-label', interpolate(gettext("Type into this box to filter down the list of selected %s."), [field_name])
+            );
+
+            filter_selected_p.appendChild(document.createTextNode(' '));
+
+            const filter_selected_input = quickElement('input', filter_selected_p, '', 'type', 'text', 'placeholder', gettext("Filter"));
+            filter_selected_input.id = field_id + '_selected_input';
+
+            quickElement(
+                'select',
+                selector_chosen,
+                '',
+                'id', field_id + '_to',
+                'multiple', '',
+                'size', from_box.size,
+                'name', from_box.name,
+                'aria-labelledby', field_id + '_to_title',
+                'class', 'filtered'
+            );
+            const warning_footer = quickElement('div', selector_chosen, '', 'class', 'list-footer-display');
+            quickElement('span', warning_footer, '', 'id', field_id + '_list-footer-display-text');
+            quickElement('span', warning_footer, ' ' + gettext('(click to clear)'), 'class', 'list-footer-display__clear');
+            const clear_all = quickElement(
+                'button',
+                selector_chosen,
+                interpolate(gettext('Remove all %s'), [field_name]),
+                'id', field_id + '_remove_all',
+                'class', 'selector-clearall',
+                'type', 'button'
+            );
+
+            from_box.name = from_box.name + '_old';
+
+            // Set up the JavaScript event handlers for the select box filter interface
+            const move_selection = function(e, elem, move_func, from, to) {
+                if (!elem.hasAttribute('disabled')) {
+                    move_func(from, to);
+                    SelectFilter.refresh_icons(field_id);
+                    SelectFilter.refresh_filtered_selects(field_id);
+                    SelectFilter.refresh_filtered_warning(field_id);
+                }
+                e.preventDefault();
+            };
+            choose_all.addEventListener('click', function(e) {
+                move_selection(e, this, SelectBox.move_all, field_id + '_from', field_id + '_to');
+            });
+            add_button.addEventListener('click', function(e) {
+                move_selection(e, this, SelectBox.move, field_id + '_from', field_id + '_to');
+            });
+            remove_button.addEventListener('click', function(e) {
+                move_selection(e, this, SelectBox.move, field_id + '_to', field_id + '_from');
+            });
+            clear_all.addEventListener('click', function(e) {
+                move_selection(e, this, SelectBox.move_all, field_id + '_to', field_id + '_from');
+            });
+            warning_footer.addEventListener('click', function(e) {
+                filter_selected_input.value = '';
+                SelectBox.filter(field_id + '_to', '');
+                SelectFilter.refresh_filtered_warning(field_id);
+                SelectFilter.refresh_icons(field_id);
+            });
+            filter_input.addEventListener('keypress', function(e) {
+                SelectFilter.filter_key_press(e, field_id, '_from', '_to');
+            });
+            filter_input.addEventListener('keyup', function(e) {
+                SelectFilter.filter_key_up(e, field_id, '_from');
+            });
+            filter_input.addEventListener('keydown', function(e) {
+                SelectFilter.filter_key_down(e, field_id, '_from', '_to');
+            });
+            filter_selected_input.addEventListener('keypress', function(e) {
+                SelectFilter.filter_key_press(e, field_id, '_to', '_from');
+            });
+            filter_selected_input.addEventListener('keyup', function(e) {
+                SelectFilter.filter_key_up(e, field_id, '_to', '_selected_input');
+            });
+            filter_selected_input.addEventListener('keydown', function(e) {
+                SelectFilter.filter_key_down(e, field_id, '_to', '_from');
+            });
+            selector_div.addEventListener('change', function(e) {
+                if (e.target.tagName === 'SELECT') {
+                    SelectFilter.refresh_icons(field_id);
+                }
+            });
+            selector_div.addEventListener('dblclick', function(e) {
+                if (e.target.tagName === 'OPTION') {
+                    if (e.target.closest('select').id === field_id + '_to') {
+                        SelectBox.move(field_id + '_to', field_id + '_from');
+                    } else {
+                        SelectBox.move(field_id + '_from', field_id + '_to');
+                    }
+                    SelectFilter.refresh_icons(field_id);
+                }
+            });
+            from_box.closest('form').addEventListener('submit', function() {
+                SelectBox.filter(field_id + '_to', '');
+                SelectBox.select_all(field_id + '_to');
+            });
+            SelectBox.init(field_id + '_from');
+            SelectBox.init(field_id + '_to');
+            // Move selected from_box options to to_box
+            SelectBox.move(field_id + '_from', field_id + '_to');
+
+            // Initial icon refresh
+            SelectFilter.refresh_icons(field_id);
+        },
+        any_selected: function(field) {
+            // Temporarily add the required attribute and check validity.
+            field.required = true;
+            const any_selected = field.checkValidity();
+            field.required = false;
+            return any_selected;
+        },
+        refresh_filtered_warning: function(field_id) {
+            const count = SelectBox.get_hidden_node_count(field_id + '_to');
+            const selector = document.getElementById(field_id + '_selector_chosen');
+            const warning = document.getElementById(field_id + '_list-footer-display-text');
+            selector.className = selector.className.replace('selector-chosen--with-filtered', '');
+            warning.textContent = interpolate(ngettext(
+                '%s selected option not visible',
+                '%s selected options not visible',
+                count
+            ), [count]);
+            if(count > 0) {
+                selector.className += ' selector-chosen--with-filtered';
+            }
+        },
+        refresh_filtered_selects: function(field_id) {
+            SelectBox.filter(field_id + '_from', document.getElementById(field_id + "_input").value);
+            SelectBox.filter(field_id + '_to', document.getElementById(field_id + "_selected_input").value);
+        },
+        refresh_icons: function(field_id) {
+            const from = document.getElementById(field_id + '_from');
+            const to = document.getElementById(field_id + '_to');
+            // Disabled if no items are selected.
+            document.getElementById(field_id + '_add').disabled = !SelectFilter.any_selected(from);
+            document.getElementById(field_id + '_remove').disabled = !SelectFilter.any_selected(to);
+            // Disabled if the corresponding box is empty.
+            document.getElementById(field_id + '_add_all').disabled = !from.querySelector('option');
+            document.getElementById(field_id + '_remove_all').disabled = !to.querySelector('option');
+        },
+        filter_key_press: function(event, field_id, source, target) {
+            const source_box = document.getElementById(field_id + source);
+            // don't submit form if user pressed Enter
+            if ((event.which && event.which === 13) || (event.keyCode && event.keyCode === 13)) {
+                source_box.selectedIndex = 0;
+                SelectBox.move(field_id + source, field_id + target);
+                source_box.selectedIndex = 0;
+                event.preventDefault();
+            }
+        },
+        filter_key_up: function(event, field_id, source, filter_input) {
+            const input = filter_input || '_input';
+            const source_box = document.getElementById(field_id + source);
+            const temp = source_box.selectedIndex;
+            SelectBox.filter(field_id + source, document.getElementById(field_id + input).value);
+            source_box.selectedIndex = temp;
+            SelectFilter.refresh_filtered_warning(field_id);
+            SelectFilter.refresh_icons(field_id);
+        },
+        filter_key_down: function(event, field_id, source, target) {
+            const source_box = document.getElementById(field_id + source);
+            // right key (39) or left key (37)
+            const direction = source === '_from' ? 39 : 37;
+            // right arrow -- move across
+            if ((event.which && event.which === direction) || (event.keyCode && event.keyCode === direction)) {
+                const old_index = source_box.selectedIndex;
+                SelectBox.move(field_id + source, field_id + target);
+                SelectFilter.refresh_filtered_selects(field_id);
+                SelectFilter.refresh_filtered_warning(field_id);
+                source_box.selectedIndex = (old_index === source_box.length) ? source_box.length - 1 : old_index;
+                return;
+            }
+            // down arrow -- wrap around
+            if ((event.which && event.which === 40) || (event.keyCode && event.keyCode === 40)) {
+                source_box.selectedIndex = (source_box.length === source_box.selectedIndex + 1) ? 0 : source_box.selectedIndex + 1;
+            }
+            // up arrow -- wrap around
+            if ((event.which && event.which === 38) || (event.keyCode && event.keyCode === 38)) {
+                source_box.selectedIndex = (source_box.selectedIndex === 0) ? source_box.length - 1 : source_box.selectedIndex - 1;
+            }
+        }
+    };
+
+    window.addEventListener('load', function(e) {
+        document.querySelectorAll('select.selectfilter, select.selectfilterstacked').forEach(function(el) {
+            const data = el.dataset;
+            SelectFilter.init(el.id, data.fieldName, parseInt(data.isStacked, 10));
+        });
+    });
+}

backend/staticfiles/admin/js/actions.js

@@ -0,0 +1,204 @@
+/*global gettext, interpolate, ngettext, Actions*/
+'use strict';
+{
+    function show(selector) {
+        document.querySelectorAll(selector).forEach(function(el) {
+            el.classList.remove('hidden');
+        });
+    }
+
+    function hide(selector) {
+        document.querySelectorAll(selector).forEach(function(el) {
+            el.classList.add('hidden');
+        });
+    }
+
+    function showQuestion(options) {
+        hide(options.acrossClears);
+        show(options.acrossQuestions);
+        hide(options.allContainer);
+    }
+
+    function showClear(options) {
+        show(options.acrossClears);
+        hide(options.acrossQuestions);
+        document.querySelector(options.actionContainer).classList.remove(options.selectedClass);
+        show(options.allContainer);
+        hide(options.counterContainer);
+    }
+
+    function reset(options) {
+        hide(options.acrossClears);
+        hide(options.acrossQuestions);
+        hide(options.allContainer);
+        show(options.counterContainer);
+    }
+
+    function clearAcross(options) {
+        reset(options);
+        const acrossInputs = document.querySelectorAll(options.acrossInput);
+        acrossInputs.forEach(function(acrossInput) {
+            acrossInput.value = 0;
+        });
+        document.querySelector(options.actionContainer).classList.remove(options.selectedClass);
+    }
+
+    function checker(actionCheckboxes, options, checked) {
+        if (checked) {
+            showQuestion(options);
+        } else {
+            reset(options);
+        }
+        actionCheckboxes.forEach(function(el) {
+            el.checked = checked;
+            el.closest('tr').classList.toggle(options.selectedClass, checked);
+        });
+    }
+
+    function updateCounter(actionCheckboxes, options) {
+        const sel = Array.from(actionCheckboxes).filter(function(el) {
+            return el.checked;
+        }).length;
+        const counter = document.querySelector(options.counterContainer);
+        // data-actions-icnt is defined in the generated HTML
+        // and contains the total amount of objects in the queryset
+        const actions_icnt = Number(counter.dataset.actionsIcnt);
+        counter.textContent = interpolate(
+            ngettext('%(sel)s of %(cnt)s selected', '%(sel)s of %(cnt)s selected', sel), {
+                sel: sel,
+                cnt: actions_icnt
+            }, true);
+        const allToggle = document.getElementById(options.allToggleId);
+        allToggle.checked = sel === actionCheckboxes.length;
+        if (allToggle.checked) {
+            showQuestion(options);
+        } else {
+            clearAcross(options);
+        }
+    }
+
+    const defaults = {
+        actionContainer: "div.actions",
+        counterContainer: "span.action-counter",
+        allContainer: "div.actions span.all",
+        acrossInput: "div.actions input.select-across",
+        acrossQuestions: "div.actions span.question",
+        acrossClears: "div.actions span.clear",
+        allToggleId: "action-toggle",
+        selectedClass: "selected"
+    };
+
+    window.Actions = function(actionCheckboxes, options) {
+        options = Object.assign({}, defaults, options);
+        let list_editable_changed = false;
+        let lastChecked = null;
+        let shiftPressed = false;
+
+        document.addEventListener('keydown', (event) => {
+            shiftPressed = event.shiftKey;
+        });
+
+        document.addEventListener('keyup', (event) => {
+            shiftPressed = event.shiftKey;
+        });
+
+        document.getElementById(options.allToggleId).addEventListener('click', function(event) {
+            checker(actionCheckboxes, options, this.checked);
+            updateCounter(actionCheckboxes, options);
+        });
+
+        document.querySelectorAll(options.acrossQuestions + " a").forEach(function(el) {
+            el.addEventListener('click', function(event) {
+                event.preventDefault();
+                const acrossInputs = document.querySelectorAll(options.acrossInput);
+                acrossInputs.forEach(function(acrossInput) {
+                    acrossInput.value = 1;
+                });
+                showClear(options);
+            });
+        });
+
+        document.querySelectorAll(options.acrossClears + " a").forEach(function(el) {
+            el.addEventListener('click', function(event) {
+                event.preventDefault();
+                document.getElementById(options.allToggleId).checked = false;
+                clearAcross(options);
+                checker(actionCheckboxes, options, false);
+                updateCounter(actionCheckboxes, options);
+            });
+        });
+
+        function affectedCheckboxes(target, withModifier) {
+            const multiSelect = (lastChecked && withModifier && lastChecked !== target);
+            if (!multiSelect) {
+                return [target];
+            }
+            const checkboxes = Array.from(actionCheckboxes);
+            const targetIndex = checkboxes.findIndex(el => el === target);
+            const lastCheckedIndex = checkboxes.findIndex(el => el === lastChecked);
+            const startIndex = Math.min(targetIndex, lastCheckedIndex);
+            const endIndex = Math.max(targetIndex, lastCheckedIndex);
+            const filtered = checkboxes.filter((el, index) => (startIndex <= index) && (index <= endIndex));
+            return filtered;
+        };
+
+        Array.from(document.getElementById('result_list').tBodies).forEach(function(el) {
+            el.addEventListener('change', function(event) {
+                const target = event.target;
+                if (target.classList.contains('action-select')) {
+                    const checkboxes = affectedCheckboxes(target, shiftPressed);
+                    checker(checkboxes, options, target.checked);
+                    updateCounter(actionCheckboxes, options);
+                    lastChecked = target;
+                } else {
+                    list_editable_changed = true;
+                }
+            });
+        });
+
+        document.querySelector('#changelist-form button[name=index]').addEventListener('click', function(event) {
+            if (list_editable_changed) {
+                const confirmed = confirm(gettext("You have unsaved changes on individual editable fields. If you run an action, your unsaved changes will be lost."));
+                if (!confirmed) {
+                    event.preventDefault();
+                }
+            }
+        });
+
+        const el = document.querySelector('#changelist-form input[name=_save]');
+        // The button does not exist if no fields are editable.
+        if (el) {
+            el.addEventListener('click', function(event) {
+                if (document.querySelector('[name=action]').value) {
+                    const text = list_editable_changed
+                        ? gettext("You have selected an action, but you haven’t saved your changes to individual fields yet. Please click OK to save. You’ll need to re-run the action.")
+                        : gettext("You have selected an action, and you haven’t made any changes on individual fields. You’re probably looking for the Go button rather than the Save button.");
+                    if (!confirm(text)) {
+                        event.preventDefault();
+                    }
+                }
+            });
+        }
+        // Sync counter when navigating to the page, such as through the back
+        // button.
+        window.addEventListener('pageshow', (event) => updateCounter(actionCheckboxes, options));
+    };
+
+    // Call function fn when the DOM is loaded and ready. If it is already
+    // loaded, call the function now.
+    // http://youmightnotneedjquery.com/#ready
+    function ready(fn) {
+        if (document.readyState !== 'loading') {
+            fn();
+        } else {
+            document.addEventListener('DOMContentLoaded', fn);
+        }
+    }
+
+    ready(function() {
+        const actionsEls = document.querySelectorAll('tr input.action-select');
+        if (actionsEls.length > 0) {
+            Actions(actionsEls);
+        }
+    });
+}

backend/staticfiles/admin/js/admin/DateTimeShortcuts.js

@@ -0,0 +1,408 @@
+/*global Calendar, findPosX, findPosY, get_format, gettext, gettext_noop, interpolate, ngettext, quickElement*/
+// Inserts shortcut buttons after all of the following:
+//     <input type="text" class="vDateField">
+//     <input type="text" class="vTimeField">
+'use strict';
+{
+    const DateTimeShortcuts = {
+        calendars: [],
+        calendarInputs: [],
+        clockInputs: [],
+        clockHours: {
+            default_: [
+                [gettext_noop('Now'), -1],
+                [gettext_noop('Midnight'), 0],
+                [gettext_noop('6 a.m.'), 6],
+                [gettext_noop('Noon'), 12],
+                [gettext_noop('6 p.m.'), 18]
+            ]
+        },
+        dismissClockFunc: [],
+        dismissCalendarFunc: [],
+        calendarDivName1: 'calendarbox', // name of calendar <div> that gets toggled
+        calendarDivName2: 'calendarin', // name of <div> that contains calendar
+        calendarLinkName: 'calendarlink', // name of the link that is used to toggle
+        clockDivName: 'clockbox', // name of clock <div> that gets toggled
+        clockLinkName: 'clocklink', // name of the link that is used to toggle
+        shortCutsClass: 'datetimeshortcuts', // class of the clock and cal shortcuts
+        timezoneWarningClass: 'timezonewarning', // class of the warning for timezone mismatch
+        timezoneOffset: 0,
+        init: function() {
+            const serverOffset = document.body.dataset.adminUtcOffset;
+            if (serverOffset) {
+                const localOffset = new Date().getTimezoneOffset() * -60;
+                DateTimeShortcuts.timezoneOffset = localOffset - serverOffset;
+            }
+
+            for (const inp of document.getElementsByTagName('input')) {
+                if (inp.type === 'text' && inp.classList.contains('vTimeField')) {
+                    DateTimeShortcuts.addClock(inp);
+                    DateTimeShortcuts.addTimezoneWarning(inp);
+                }
+                else if (inp.type === 'text' && inp.classList.contains('vDateField')) {
+                    DateTimeShortcuts.addCalendar(inp);
+                    DateTimeShortcuts.addTimezoneWarning(inp);
+                }
+            }
+        },
+        // Return the current time while accounting for the server timezone.
+        now: function() {
+            const serverOffset = document.body.dataset.adminUtcOffset;
+            if (serverOffset) {
+                const localNow = new Date();
+                const localOffset = localNow.getTimezoneOffset() * -60;
+                localNow.setTime(localNow.getTime() + 1000 * (serverOffset - localOffset));
+                return localNow;
+            } else {
+                return new Date();
+            }
+        },
+        // Add a warning when the time zone in the browser and backend do not match.
+        addTimezoneWarning: function(inp) {
+            const warningClass = DateTimeShortcuts.timezoneWarningClass;
+            let timezoneOffset = DateTimeShortcuts.timezoneOffset / 3600;
+
+            // Only warn if there is a time zone mismatch.
+            if (!timezoneOffset) {
+                return;
+            }
+
+            // Check if warning is already there.
+            if (inp.parentNode.querySelectorAll('.' + warningClass).length) {
+                return;
+            }
+
+            let message;
+            if (timezoneOffset > 0) {
+                message = ngettext(
+                    'Note: You are %s hour ahead of server time.',
+                    'Note: You are %s hours ahead of server time.',
+                    timezoneOffset
+                );
+            }
+            else {
+                timezoneOffset *= -1;
+                message = ngettext(
+                    'Note: You are %s hour behind server time.',
+                    'Note: You are %s hours behind server time.',
+                    timezoneOffset
+                );
+            }
+            message = interpolate(message, [timezoneOffset]);
+
+            const warning = document.createElement('div');
+            warning.classList.add('help', warningClass);
+            warning.textContent = message;
+            inp.parentNode.appendChild(warning);
+        },
+        // Add clock widget to a given field
+        addClock: function(inp) {
+            const num = DateTimeShortcuts.clockInputs.length;
+            DateTimeShortcuts.clockInputs[num] = inp;
+            DateTimeShortcuts.dismissClockFunc[num] = function() { DateTimeShortcuts.dismissClock(num); return true; };
+
+            // Shortcut links (clock icon and "Now" link)
+            const shortcuts_span = document.createElement('span');
+            shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
+            inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
+            const now_link = document.createElement('a');
+            now_link.href = "#";
+            now_link.textContent = gettext('Now');
+            now_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleClockQuicklink(num, -1);
+            });
+            const clock_link = document.createElement('a');
+            clock_link.href = '#';
+            clock_link.id = DateTimeShortcuts.clockLinkName + num;
+            clock_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                // avoid triggering the document click handler to dismiss the clock
+                e.stopPropagation();
+                DateTimeShortcuts.openClock(num);
+            });
+
+            quickElement(
+                'span', clock_link, '',
+                'class', 'clock-icon',
+                'title', gettext('Choose a Time')
+            );
+            shortcuts_span.appendChild(document.createTextNode('\u00A0'));
+            shortcuts_span.appendChild(now_link);
+            shortcuts_span.appendChild(document.createTextNode('\u00A0|\u00A0'));
+            shortcuts_span.appendChild(clock_link);
+
+            // Create clock link div
+            //
+            // Markup looks like:
+            // <div id="clockbox1" class="clockbox module">
+            //     <h2>Choose a time</h2>
+            //     <ul class="timelist">
+            //         <li><a href="#">Now</a></li>
+            //         <li><a href="#">Midnight</a></li>
+            //         <li><a href="#">6 a.m.</a></li>
+            //         <li><a href="#">Noon</a></li>
+            //         <li><a href="#">6 p.m.</a></li>
+            //     </ul>
+            //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
+            // </div>
+
+            const clock_box = document.createElement('div');
+            clock_box.style.display = 'none';
+            clock_box.style.position = 'absolute';
+            clock_box.className = 'clockbox module';
+            clock_box.id = DateTimeShortcuts.clockDivName + num;
+            document.body.appendChild(clock_box);
+            clock_box.addEventListener('click', function(e) { e.stopPropagation(); });
+
+            quickElement('h2', clock_box, gettext('Choose a time'));
+            const time_list = quickElement('ul', clock_box);
+            time_list.className = 'timelist';
+            // The list of choices can be overridden in JavaScript like this:
+            // DateTimeShortcuts.clockHours.name = [['3 a.m.', 3]];
+            // where name is the name attribute of the <input>.
+            const name = typeof DateTimeShortcuts.clockHours[inp.name] === 'undefined' ? 'default_' : inp.name;
+            DateTimeShortcuts.clockHours[name].forEach(function(element) {
+                const time_link = quickElement('a', quickElement('li', time_list), gettext(element[0]), 'href', '#');
+                time_link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    DateTimeShortcuts.handleClockQuicklink(num, element[1]);
+                });
+            });
+
+            const cancel_p = quickElement('p', clock_box);
+            cancel_p.className = 'calendar-cancel';
+            const cancel_link = quickElement('a', cancel_p, gettext('Cancel'), 'href', '#');
+            cancel_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.dismissClock(num);
+            });
+
+            document.addEventListener('keyup', function(event) {
+                if (event.which === 27) {
+                    // ESC key closes popup
+                    DateTimeShortcuts.dismissClock(num);
+                    event.preventDefault();
+                }
+            });
+        },
+        openClock: function(num) {
+            const clock_box = document.getElementById(DateTimeShortcuts.clockDivName + num);
+            const clock_link = document.getElementById(DateTimeShortcuts.clockLinkName + num);
+
+            // Recalculate the clockbox position
+            // is it left-to-right or right-to-left layout ?
+            if (window.getComputedStyle(document.body).direction !== 'rtl') {
+                clock_box.style.left = findPosX(clock_link) + 17 + 'px';
+            }
+            else {
+                // since style's width is in em, it'd be tough to calculate
+                // px value of it. let's use an estimated px for now
+                clock_box.style.left = findPosX(clock_link) - 110 + 'px';
+            }
+            clock_box.style.top = Math.max(0, findPosY(clock_link) - 30) + 'px';
+
+            // Show the clock box
+            clock_box.style.display = 'block';
+            document.addEventListener('click', DateTimeShortcuts.dismissClockFunc[num]);
+        },
+        dismissClock: function(num) {
+            document.getElementById(DateTimeShortcuts.clockDivName + num).style.display = 'none';
+            document.removeEventListener('click', DateTimeShortcuts.dismissClockFunc[num]);
+        },
+        handleClockQuicklink: function(num, val) {
+            let d;
+            if (val === -1) {
+                d = DateTimeShortcuts.now();
+            }
+            else {
+                d = new Date(1970, 1, 1, val, 0, 0, 0);
+            }
+            DateTimeShortcuts.clockInputs[num].value = d.strftime(get_format('TIME_INPUT_FORMATS')[0]);
+            DateTimeShortcuts.clockInputs[num].focus();
+            DateTimeShortcuts.dismissClock(num);
+        },
+        // Add calendar widget to a given field.
+        addCalendar: function(inp) {
+            const num = DateTimeShortcuts.calendars.length;
+
+            DateTimeShortcuts.calendarInputs[num] = inp;
+            DateTimeShortcuts.dismissCalendarFunc[num] = function() { DateTimeShortcuts.dismissCalendar(num); return true; };
+
+            // Shortcut links (calendar icon and "Today" link)
+            const shortcuts_span = document.createElement('span');
+            shortcuts_span.className = DateTimeShortcuts.shortCutsClass;
+            inp.parentNode.insertBefore(shortcuts_span, inp.nextSibling);
+            const today_link = document.createElement('a');
+            today_link.href = '#';
+            today_link.appendChild(document.createTextNode(gettext('Today')));
+            today_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleCalendarQuickLink(num, 0);
+            });
+            const cal_link = document.createElement('a');
+            cal_link.href = '#';
+            cal_link.id = DateTimeShortcuts.calendarLinkName + num;
+            cal_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                // avoid triggering the document click handler to dismiss the calendar
+                e.stopPropagation();
+                DateTimeShortcuts.openCalendar(num);
+            });
+            quickElement(
+                'span', cal_link, '',
+                'class', 'date-icon',
+                'title', gettext('Choose a Date')
+            );
+            shortcuts_span.appendChild(document.createTextNode('\u00A0'));
+            shortcuts_span.appendChild(today_link);
+            shortcuts_span.appendChild(document.createTextNode('\u00A0|\u00A0'));
+            shortcuts_span.appendChild(cal_link);
+
+            // Create calendarbox div.
+            //
+            // Markup looks like:
+            //
+            // <div id="calendarbox3" class="calendarbox module">
+            //     <h2>
+            //           <a href="#" class="link-previous">&lsaquo;</a>
+            //           <a href="#" class="link-next">&rsaquo;</a> February 2003
+            //     </h2>
+            //     <div class="calendar" id="calendarin3">
+            //         <!-- (cal) -->
+            //     </div>
+            //     <div class="calendar-shortcuts">
+            //          <a href="#">Yesterday</a> | <a href="#">Today</a> | <a href="#">Tomorrow</a>
+            //     </div>
+            //     <p class="calendar-cancel"><a href="#">Cancel</a></p>
+            // </div>
+            const cal_box = document.createElement('div');
+            cal_box.style.display = 'none';
+            cal_box.style.position = 'absolute';
+            cal_box.className = 'calendarbox module';
+            cal_box.id = DateTimeShortcuts.calendarDivName1 + num;
+            document.body.appendChild(cal_box);
+            cal_box.addEventListener('click', function(e) { e.stopPropagation(); });
+
+            // next-prev links
+            const cal_nav = quickElement('div', cal_box);
+            const cal_nav_prev = quickElement('a', cal_nav, '<', 'href', '#');
+            cal_nav_prev.className = 'calendarnav-previous';
+            cal_nav_prev.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.drawPrev(num);
+            });
+
+            const cal_nav_next = quickElement('a', cal_nav, '>', 'href', '#');
+            cal_nav_next.className = 'calendarnav-next';
+            cal_nav_next.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.drawNext(num);
+            });
+
+            // main box
+            const cal_main = quickElement('div', cal_box, '', 'id', DateTimeShortcuts.calendarDivName2 + num);
+            cal_main.className = 'calendar';
+            DateTimeShortcuts.calendars[num] = new Calendar(DateTimeShortcuts.calendarDivName2 + num, DateTimeShortcuts.handleCalendarCallback(num));
+            DateTimeShortcuts.calendars[num].drawCurrent();
+
+            // calendar shortcuts
+            const shortcuts = quickElement('div', cal_box);
+            shortcuts.className = 'calendar-shortcuts';
+            let day_link = quickElement('a', shortcuts, gettext('Yesterday'), 'href', '#');
+            day_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleCalendarQuickLink(num, -1);
+            });
+            shortcuts.appendChild(document.createTextNode('\u00A0|\u00A0'));
+            day_link = quickElement('a', shortcuts, gettext('Today'), 'href', '#');
+            day_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleCalendarQuickLink(num, 0);
+            });
+            shortcuts.appendChild(document.createTextNode('\u00A0|\u00A0'));
+            day_link = quickElement('a', shortcuts, gettext('Tomorrow'), 'href', '#');
+            day_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.handleCalendarQuickLink(num, +1);
+            });
+
+            // cancel bar
+            const cancel_p = quickElement('p', cal_box);
+            cancel_p.className = 'calendar-cancel';
+            const cancel_link = quickElement('a', cancel_p, gettext('Cancel'), 'href', '#');
+            cancel_link.addEventListener('click', function(e) {
+                e.preventDefault();
+                DateTimeShortcuts.dismissCalendar(num);
+            });
+            document.addEventListener('keyup', function(event) {
+                if (event.which === 27) {
+                    // ESC key closes popup
+                    DateTimeShortcuts.dismissCalendar(num);
+                    event.preventDefault();
+                }
+            });
+        },
+        openCalendar: function(num) {
+            const cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1 + num);
+            const cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName + num);
+            const inp = DateTimeShortcuts.calendarInputs[num];
+
+            // Determine if the current value in the input has a valid date.
+            // If so, draw the calendar with that date's year and month.
+            if (inp.value) {
+                const format = get_format('DATE_INPUT_FORMATS')[0];
+                const selected = inp.value.strptime(format);
+                const year = selected.getUTCFullYear();
+                const month = selected.getUTCMonth() + 1;
+                const re = /\d{4}/;
+                if (re.test(year.toString()) && month >= 1 && month <= 12) {
+                    DateTimeShortcuts.calendars[num].drawDate(month, year, selected);
+                }
+            }
+
+            // Recalculate the clockbox position
+            // is it left-to-right or right-to-left layout ?
+            if (window.getComputedStyle(document.body).direction !== 'rtl') {
+                cal_box.style.left = findPosX(cal_link) + 17 + 'px';
+            }
+            else {
+                // since style's width is in em, it'd be tough to calculate
+                // px value of it. let's use an estimated px for now
+                cal_box.style.left = findPosX(cal_link) - 180 + 'px';
+            }
+            cal_box.style.top = Math.max(0, findPosY(cal_link) - 75) + 'px';
+
+            cal_box.style.display = 'block';
+            document.addEventListener('click', DateTimeShortcuts.dismissCalendarFunc[num]);
+        },
+        dismissCalendar: function(num) {
+            document.getElementById(DateTimeShortcuts.calendarDivName1 + num).style.display = 'none';
+            document.removeEventListener('click', DateTimeShortcuts.dismissCalendarFunc[num]);
+        },
+        drawPrev: function(num) {
+            DateTimeShortcuts.calendars[num].drawPreviousMonth();
+        },
+        drawNext: function(num) {
+            DateTimeShortcuts.calendars[num].drawNextMonth();
+        },
+        handleCalendarCallback: function(num) {
+            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();
+                document.getElementById(DateTimeShortcuts.calendarDivName1 + num).style.display = 'none';
+            };
+        },
+        handleCalendarQuickLink: function(num, offset) {
+            const d = DateTimeShortcuts.now();
+            d.setDate(d.getDate() + offset);
+            DateTimeShortcuts.calendarInputs[num].value = d.strftime(get_format('DATE_INPUT_FORMATS')[0]);
+            DateTimeShortcuts.calendarInputs[num].focus();
+            DateTimeShortcuts.dismissCalendar(num);
+        }
+    };
+
+    window.addEventListener('load', DateTimeShortcuts.init);
+    window.DateTimeShortcuts = DateTimeShortcuts;
+}

backend/staticfiles/admin/js/admin/RelatedObjectLookups.js

@@ -0,0 +1,252 @@
+/*global SelectBox, interpolate*/
+// Handles related-objects functionality: lookup link for raw_id_fields
+// and Add Another links.
+'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) {
+        return name + "__" + (popupIndex + 1);
+    }
+
+    function removePopupIndex(name) {
+        return name.replace(new RegExp("__" + (popupIndex + 1) + "$"), '');
+    }
+
+    function showAdminPopup(triggeringLink, name_regexp, add_popup) {
+        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;
+    }
+
+    function showRelatedObjectLookupPopup(triggeringLink) {
+        return showAdminPopup(triggeringLink, /^lookup_/, true);
+    }
+
+    function dismissRelatedLookupPopup(win, chosenId) {
+        const name = removePopupIndex(win.name);
+        const elem = document.getElementById(name);
+        if (elem.classList.contains('vManyToManyRawIdAdminField') && elem.value) {
+            elem.value += ',' + chosenId;
+        } else {
+            elem.value = chosenId;
+        }
+        $(elem).trigger('change');
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
+        win.close();
+    }
+
+    function showRelatedObjectPopup(triggeringLink) {
+        return showAdminPopup(triggeringLink, /^(change|add|delete)_/, false);
+    }
+
+    function updateRelatedObjectLinks(triggeringLink) {
+        const $this = $(triggeringLink);
+        const siblings = $this.nextAll('.view-related, .change-related, .delete-related');
+        if (!siblings.length) {
+            return;
+        }
+        const value = $this.val();
+        if (value) {
+            siblings.each(function() {
+                const elm = $(this);
+                elm.attr('href', elm.attr('data-href-template').replace('__fk__', value));
+                elm.removeAttr('aria-disabled');
+            });
+        } else {
+            siblings.removeAttr('href');
+            siblings.attr('aria-disabled', true);
+        }
+    }
+
+    function updateRelatedSelectsOptions(currentSelect, win, objId, newRepr, newId, skipIds = []) {
+        // 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)];
+        // Select elements with a specific model reference and context of "available-source".
+        const selectsRelated = document.querySelectorAll(`[data-model-ref="${modelName}"] [data-context="available-source"]`);
+
+        selectsRelated.forEach(function(select) {
+            if (currentSelect === select || skipIds && skipIds.includes(select.id)) {
+                return;
+            }
+
+            let option = select.querySelector(`option[value="${objId}"]`);
+
+            if (!option) {
+                option = new Option(newRepr, newId);
+                select.options.add(option);
+                // Update SelectBox cache for related fields.
+                if (window.SelectBox !== undefined && !SelectBox.cache[currentSelect.id]) {
+                    SelectBox.add_to_cache(select.id, option);
+                    SelectBox.redisplay(select.id);
+                }
+                return;
+            }
+
+            option.textContent = newRepr;
+            option.value = newId;
+        });
+    }
+
+    function dismissAddRelatedObjectPopup(win, newId, newRepr) {
+        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;
+                } else {
+                    elem.value = newId;
+                }
+            }
+            // Trigger a change event to update related links if required.
+            $(elem).trigger('change');
+        } else {
+            const toId = name + "_to";
+            const toElem = document.getElementById(toId);
+            const o = new Option(newRepr, newId);
+            SelectBox.add_to_cache(toId, o);
+            SelectBox.redisplay(toId);
+            if (toElem && toElem.nodeName.toUpperCase() === 'SELECT') {
+                const skipIds = [name + "_from"];
+                updateRelatedSelectsOptions(toElem, win, null, newRepr, newId, skipIds);
+            }
+        }
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
+        win.close();
+    }
+
+    function dismissChangeRelatedObjectPopup(win, objId, newRepr, newId) {
+        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() {
+            if (this.value === objId) {
+                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 = removePopupIndex(win.name.replace(/^delete_/, ''));
+        const selectsSelector = interpolate('#%s, #%s_from, #%s_to', [id, id, id]);
+        const selects = $(selectsSelector);
+        selects.find('option').each(function() {
+            if (this.value === objId) {
+                $(this).remove();
+            }
+        }).trigger('change');
+        const index = relatedWindows.indexOf(win);
+        if (index > -1) {
+            relatedWindows.splice(index, 1);
+        }
+        win.close();
+    }
+
+    window.showRelatedObjectLookupPopup = showRelatedObjectLookupPopup;
+    window.dismissRelatedLookupPopup = dismissRelatedLookupPopup;
+    window.showRelatedObjectPopup = showRelatedObjectPopup;
+    window.updateRelatedObjectLinks = updateRelatedObjectLinks;
+    window.dismissAddRelatedObjectPopup = dismissAddRelatedObjectPopup;
+    window.dismissChangeRelatedObjectPopup = dismissChangeRelatedObjectPopup;
+    window.dismissDeleteRelatedObjectPopup = dismissDeleteRelatedObjectPopup;
+    window.dismissChildPopups = dismissChildPopups;
+    window.relatedWindows = relatedWindows;
+
+    // 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[data-popup="yes"]', function(e) {
+            e.preventDefault();
+            if (this.href) {
+                const event = $.Event('django:show-related', {href: this.href});
+                $(this).trigger(event);
+                if (!event.isDefaultPrevented()) {
+                    showRelatedObjectPopup(this);
+                }
+            }
+        });
+        $('body').on('change', '.related-widget-wrapper select', function(e) {
+            const event = $.Event('django:update-related');
+            $(this).trigger(event);
+            if (!event.isDefaultPrevented()) {
+                updateRelatedObjectLinks(this);
+            }
+        });
+        $('.related-widget-wrapper select').trigger('change');
+        $('body').on('click', '.related-lookup', function(e) {
+            e.preventDefault();
+            const event = $.Event('django:lookup-related');
+            $(this).trigger(event);
+            if (!event.isDefaultPrevented()) {
+                showRelatedObjectLookupPopup(this);
+            }
+        });
+    });
+}