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

maykinmedia · Feb 8, 2024 · d03b7fb · d03b7fb
1 parent d650d79
commit d03b7fb
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 56 deletions.
diff --git a/requirements/base.txt b/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

diff --git a/requirements/ci.txt b/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

diff --git a/requirements/dev.txt b/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

diff --git a/src/open_inwoner/scss/admin/_admin_theme.scss b/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;
@@ -102,7 +101,7 @@ div.breadcrumbs {
   /* adjusting for django-cms page */
   #changelist:not([class~='cms-pagetree-root']) {
     display: grid;
-    grid-template-columns: 1fr 360px;
+    grid-template-columns: 1fr 260px;
     gap: 16px;
   }
 

diff --git a/src/open_inwoner/scss/admin/_app_overrides.scss b/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;
+  }
 }
 
 /**