From 50cb811f05cb06e4ff8649b39cd8b6ce0b25279a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 19 Jan 2022 11:23:13 +0100
Subject: [PATCH] Refactor styling of nested content lists

---
 client/src/components/ContentBlock.vue        |  2 +-
 .../components/content-blocks/ContentList.vue | 17 --------------
 client/src/pages/createContentBlock.vue       |  4 +---
 client/src/styles/_nested-content-lists.scss  | 23 ++++++++++++-------
 4 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 6791a52d..8b752366 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{'hideable-element--greyed-out': hidden}"
-    class="content-block__container hideable-element">
+    class="content-block__container hideable-element content-list__parent">
     <div
       :class="specialClass"
       class="content-block">
diff --git a/client/src/components/content-blocks/ContentList.vue b/client/src/components/content-blocks/ContentList.vue
index 5695733c..4f32f2a0 100644
--- a/client/src/components/content-blocks/ContentList.vue
+++ b/client/src/components/content-blocks/ContentList.vue
@@ -4,7 +4,6 @@
       :key="item.id"
       class="content-list__item"
       v-for="(item, index) in items">
-      <p class="content-list__numbering">{{ alphaIndex(index) }})</p>
       <slot
         :item="item"
         :index="index">
@@ -15,29 +14,13 @@
 </template>
 
 <script>
-  const lowerAsciiA = 97;
-
   export default {
     //
     props: {
-      startingIndex: {
-        type: Number,
-        default: 0
-      },
       items: {
         type: Array,
         default: () => ([])
       }
     },
-    methods: {
-      alphaIndex(index) {
-        return String.fromCharCode(lowerAsciiA + this.startingIndex + index);
-      }
-    },
   };
 </script>
-
-<style scoped lang="scss">
-  @import '~styles/helpers';
-
-</style>
diff --git a/client/src/pages/createContentBlock.vue b/client/src/pages/createContentBlock.vue
index e2ed0d6f..74354f35 100644
--- a/client/src/pages/createContentBlock.vue
+++ b/client/src/pages/createContentBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="create-content-block">
+  <div class="create-content-block content-list__parent">
     <div class="create-content-block__content">
       <h1 class="heading-1 create-content-block__heading">Inhaltsblock erfassen</h1>
 
@@ -83,7 +83,6 @@
   import TextForm from '@/components/content-forms/TextForm';
   import InputWithLabel from '@/components/ui/InputWithLabel';
   import AddContentLink from '@/components/content-block-form/AddContentLink';
-  import ContentList from '@/components/content-blocks/ContentList';
   import ContentBlockElementChooserWidget from '@/components/content-forms/ContentBlockElementChooserWidget';
   import ContentElement from '@/components/content-block-form/ContentElement';
 
@@ -91,7 +90,6 @@
     components: {
       ContentElement,
       ContentBlockElementChooserWidget,
-      ContentList,
       AddContentLink,
       InputWithLabel,
       TextForm,
diff --git a/client/src/styles/_nested-content-lists.scss b/client/src/styles/_nested-content-lists.scss
index 75c07e4c..3cc44372 100644
--- a/client/src/styles/_nested-content-lists.scss
+++ b/client/src/styles/_nested-content-lists.scss
@@ -1,17 +1,24 @@
 .content-list {
   /* https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses */
 
+  // parent element needs to reset the counter-increment
+  // either use this class, or use the attribute on it
+  &__parent {
+    counter-reset: content-items;
+  }
+
   &__item {
     list-style: none;
     position: relative;
     padding: 0 0 0 2*15px;
-  }
-
-  &__numbering {
-    position: absolute;
-    font-weight: 600;
-    left: 0;
-    color: $color-brand;
-    line-height: 27px;
+    &:before {
+      content: counter(content-items, lower-alpha) ")";
+      counter-increment: content-items;
+      position: absolute;
+      font-weight: 600;
+      left: 0;
+      color: $color-brand;
+      line-height: 27px;
+    }
   }
 }