[#2093] Upgrade django-admin-index to 3.1.0

requirements/base.txt

@@ -75,6 +75,7 @@ diff-match-patch==20200713
 django==3.2.23
     # via
     #   -r requirements/base.in
+    #   django-admin-index
     #   django-appconf
     #   django-appdata
     #   django-axes
@@ -118,7 +119,7 @@ django==3.2.23
     #   mozilla-django-oidc-db
     #   notifications-api-common
     #   zgw-consumers
-django-admin-index==1.5.0
+django-admin-index==3.1.0
     # via -r requirements/base.in
 django-appconf==1.0.5
     # via

requirements/ci.txt

@@ -141,6 +141,7 @@ django==3.2.23
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt
+    #   django-admin-index
     #   django-appconf
     #   django-appdata
     #   django-axes
@@ -184,7 +185,7 @@ django==3.2.23
     #   mozilla-django-oidc-db
     #   notifications-api-common
     #   zgw-consumers
-django-admin-index==1.5.0
+django-admin-index==3.1.0
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt

requirements/dev.txt

@@ -174,6 +174,7 @@ django==3.2.23
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
     #   ddt-api-calls
+    #   django-admin-index
     #   django-appconf
     #   django-appdata
     #   django-axes
@@ -219,7 +220,7 @@ django==3.2.23
     #   mozilla-django-oidc-db
     #   notifications-api-common
     #   zgw-consumers
-django-admin-index==1.5.0
+django-admin-index==3.1.0
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt

src/open_inwoner/configurations/migrations/0059_alter_siteconfigurationpage_options.py

@@ -0,0 +1,21 @@
+# Generated by Django 3.2.23 on 2024-02-08 15:13
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("configurations", "0058_siteconfiguration_recipients_email_digest"),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name="siteconfigurationpage",
+            options={
+                "ordering": ("order",),
+                "verbose_name": "Flatpage in the footer",
+                "verbose_name_plural": "Flatpages in the footer",
+            },
+        ),
+    ]

src/open_inwoner/js/components/anchor-menu/scroll_to_top.js

@@ -5,7 +5,9 @@ const mybutton = document.getElementById('scroll-anchor')
 document.addEventListener(
   'scroll',
   (e) => {
-    if (
+    if (!mybutton) {
+      return
+    } else if (
       document.body.scrollTop > 80 ||
       document.documentElement.scrollTop > 80
     ) {

src/open_inwoner/scss/admin/_admin_theme.scss

@@ -69,7 +69,6 @@ div.breadcrumbs {
   color: $color_primary;
   position: sticky;
   top: 60px;
-  z-index: 100000;
 
   a {
     color: $color_dark;
@@ -101,9 +100,13 @@ div.breadcrumbs {
 #content {
   /* adjusting for django-cms page */
   #changelist:not([class~='cms-pagetree-root']) {
-    display: grid;
-    grid-template-columns: 1fr 360px;
+    display: block;
+    grid-template-columns: 1fr 260px;
     gap: 16px;
+
+    @media (min-width: 768px) {
+      display: grid;
+    }
   }
 
   #toolbar,

src/open_inwoner/scss/admin/_app_overrides.scss

@@ -8,71 +8,59 @@
 /**
  * DJANGO ADMIN INDEX
  */
-
-.dropdown-menu,
-div#container .dropdown-menu {
-  /* Override for Environment banner */
-  top: 48px;
-  /* Added to attach body */
-  border-bottom: 8px solid $color_secondary;
+body {
+  --djai-tab-bg: #{$color-primary}; // no fallback to default admin vars
+  --djai-tab-bg--active: #{$color-secondary};
+  --djai-tab-bg--hover: #{$color-primary-dark};
+  --djai-tab-fg--active: #{$color-primary};
+  --djai-dropdown-bg--active: var(--color-primary);
+  --djai-dropdown-bg--hover: #{$color-primary};
 }
 
-.breadcrumbs {
-  top: 48px !important;
-}
+$djai-padding: 40px;
+$djai-padding--mobile: 15px;
+$djai-padding--tablet: 30px;
+$djai-border-width: 8px;
 
-/* Integration into color scheme */
-.dropdown-menu {
-  background-color: $color_primary;
+.djai-dropdown-menu {
+  // use full width on mobile & tablet
+  width: 100%;
 
-  .dropdown-menu__item,
-  .dropdown-menu__item:link,
-  .dropdown-menu__item:visited {
-    color: $color_lightest;
+  /* Added to attach to body/breadcrumbs */
+  border-bottom: $djai-border-width solid $color_secondary;
 
-    &.dropdown-menu__item--active {
-      background-color: $color_secondary;
-      text-decoration: none;
-      color: $color_primary;
+  & &__drop {
+    min-width: 250px !important;
+  }
 
-      &:hover {
-        color: $color_lightest;
-      }
-    }
+  // remove the header padding on mobile and tablet
+  @at-root #header {
+    padding-bottom: 0 !important;
 
-    &:hover {
-      background-color: $color_primary_dark;
+    // remove the border height from the breadcrumbs padding
+    & + .breadcrumbs {
+      padding-top: 10px - $djai-border-width; // 10px is original django value
     }
-  }
-
-  .dropdown-menu__drop {
-    background-color: $color_primary;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
-  }
 
-  .dropdown-menu__link,
-  .dropdown-menu__link:link,
-  .dropdown-menu__link:visited {
-    color: $color_lightest;
+    // overwrite admin '#header a:link' rule which is otherwise more specific
+    .djai-dropdown-menu .djai-dropdown-menu__item--active:link,
+    .djai-dropdown-menu .djai-dropdown-menu__item--active:visited {
+      color: var(--djai-tab-fg--active);
 
-    &:hover {
-      background-color: $color_primary_dark;
+      &:hover {
+        color: var(--djai-tab-fg--hover);
+      }
     }
+  }
 
-    &.dropdown-menu__link--active {
-      background-color: $color_primary_dark;
-      text-decoration: none;
-    }
+  /* Override for wider filer dropzone Taiga #359 */
+  .js-filer-dropzone {
+    min-width: 600px !important;
   }
-}
-/* Override for wider dropdown */
-.dropdown-menu .dropdown-menu__drop {
-  min-width: 250px;
-}
 
-/* Override for wider filer dropzone Taiga #359 */
-.js-filer-dropzone {
-  min-width: 600px !important;
+  @at-root body.login #header {
+    padding-bottom: 15px !important;
+  }
 }
 
 /**