[#1535] improve styling of sidebar and namespace slugs

- color only focused part of border - bold-face only focused heading/sub-heading - create namespace for subheading slugs to avoid conflicts
maykinmedia · Aug 30, 2023 · faac2ca · faac2ca
1 parent 27b86a3
commit faac2ca
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 27 deletions.
diff --git a/src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html b/src/open_inwoner/components/templates/components/AnchorMenu/AnchorMenu.html
@@ -6,13 +6,13 @@
         {% button href="#" icon="expand_more" icon_position="after" extra_classes="anchor-menu--mobile__title anchor-menu__toggle" bordered=False text=_("Op deze pagina") %}
         <ul class="anchor-menu__list">
             {% for anchor in anchors %}
-                <li class="anchor-menu__list__item">
+                <li class="anchor-menu__list-item">
                     <a class="link" href="{{ anchor.0 }}">{{ anchor.1 }}</a>
                     <!-- subheadings -->
                     {% if anchor.2 %}
                         <ul class="anchor-menu__sublist anchor-menu__sublist--mobile">
                             {% for subheading in anchor.2 %}
-                                <li class-"anchor-menu__sublist__item">
+                                <li class="anchor-menu__list-item">
                                     <a class="link" href="#{{ subheading.1 }}">{{ subheading.0 }}</a>
                                 </li>
                             {% endfor %}
@@ -28,13 +28,13 @@
 
     <ul class="anchor-menu__list">
         {% for anchor in anchors %}
-            <li class="anchor-menu__list__item">
+            <li class="anchor-menu__list-item">
                 <a class="link" href="{{ anchor.0 }}">{{ anchor.1 }}</a>
                 <!-- subheadings -->
                     {% if anchor.2 %}
                         <ul class="anchor-menu__sublist">
                             {% for subheading in anchor.2 %}
-                                <li>
+                                <li class="anchor-menu__list-item">
                                     <a class="link" href="#{{ subheading.1 }}">{{ subheading.0 }}</a>
                                 </li>
                             {% endfor %}

diff --git a/src/open_inwoner/js/components/anchor-menu/anchor-menu.js b/src/open_inwoner/js/components/anchor-menu/anchor-menu.js
@@ -5,7 +5,8 @@ export class CreateGumshoe {
 
   constructor(node) {
     new Gumshoe(CreateGumshoe.selector, {
-      navClass: 'anchor-menu__list__item--active',
+      nested: true,
+      navClass: 'anchor-menu__list-item--active',
       offset: 30,
     })
   }

diff --git a/src/open_inwoner/pdc/tests/test_product.py b/src/open_inwoner/pdc/tests/test_product.py
@@ -296,13 +296,13 @@ def test_subheadings_in_sidebar(self):
         self.assertEqual(len(links), 4)
 
         self.assertEqual(links[0].text, "First subheading")
-        self.assertEqual(links[0].attrib["href"], "#first-subheading")
+        self.assertEqual(links[0].attrib["href"], "#subheader-first-subheading")
 
         self.assertEqual(links[1].text, "Second subheading")
-        self.assertEqual(links[1].attrib["href"], "#second-subheading")
+        self.assertEqual(links[1].attrib["href"], "#subheader-second-subheading")
 
         self.assertEqual(links[2].text, "First subheading")
-        self.assertEqual(links[2].attrib["href"], "#first-subheading")
+        self.assertEqual(links[2].attrib["href"], "#subheader-first-subheading")
 
         self.assertEqual(links[3].text, "Second subheading")
-        self.assertEqual(links[3].attrib["href"], "#second-subheading")
+        self.assertEqual(links[3].attrib["href"], "#subheader-second-subheading")
diff --git a/src/open_inwoner/pdc/utils.py b/src/open_inwoner/pdc/utils.py
@@ -19,7 +19,7 @@ def extract_subheadings(content: str, tag: str) -> list[tuple[str, str]]:
     subs = []
     for tag in soup.find_all("h2"):
         subheading = tag.text
-        slug = slugify(subheading)
+        slug = f"subheader-{slugify(subheading)}"
         subs.append((subheading, slug))
 
     return subs
diff --git a/src/open_inwoner/scss/components/Header/AnchorMenu.scss b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
@@ -63,40 +63,41 @@
     margin-left: var(--spacing-large);
   }
 
-  &__list__item {
+  &__list-item {
     box-sizing: border-box;
-    padding: var(--spacing-large) var(--spacing-medium);
     font-weight: normal;
+    margin: 0;
 
     @media (min-width: 768px) {
-      border-left: var(--border-width) solid;
-      border-color: var(--color-gray-light);
-      padding: var(--spacing-large);
+      margin: 0;
     }
   }
 
-  &__list__item--active > .link {
+  &__list-item .link {
+    padding: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
+
+    @media (min-width: 768px) {
+      border-left: var(--border-width) solid var(--color-gray-light);
+    }
+  }
+
+  &__list-item--active > .link {
     font-weight: bold;
 
     @media (min-width: 768px) {
-      border-color: var(--color-primary);
+      border-left-color: var(--color-primary);
     }
   }
 
   // nested list
   &__sublist {
     list-style-type: none;
-    padding-left: var(--spacing-large);
-    padding-top: var(--spacing-large);
+    padding: 0;
     line-height: var(--spacing-large);
 
-    &__item {
-      border-left: none;
-    }
-    li:not(:last-child) {
-      margin-bottom: var(--spacing-large);
-    }
-    li > a {
+    li .link {
+      padding: var(--spacing-small) 0 var(--spacing-small)
+        var(--spacing-extra-large);
       font-size: var(--font-size-body-small);
     }
 

diff --git a/src/open_inwoner/utils/ckeditor.py b/src/open_inwoner/utils/ckeditor.py
@@ -54,7 +54,7 @@ def get_product_rendered_content(product):
             element.attrs["class"] = class_name
 
             if tag == "h2":
-                element.attrs["id"] = slugify(element.text)
+                element.attrs["id"] = f"subheader-{slugify(element.text)}"
 
             if "[CTABUTTON]" in element.text:
                 # decompose the element when product doesn't have either a link or a form