From 3a19f1a0b5bf1ee593b568a22c5c54b716eb803f Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 12 Sep 2019 10:35:49 +0200
Subject: [PATCH] Remove css numbering, use JS instead

---
 .../content-blocks/ContentListBlock.vue       | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/components/content-blocks/ContentListBlock.vue b/client/src/components/content-blocks/ContentListBlock.vue
index bd865cf5..60cd03f9 100644
--- a/client/src/components/content-blocks/ContentListBlock.vue
+++ b/client/src/components/content-blocks/ContentListBlock.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="content-list-block__container">
     <div class="content-list-wrapper">
-      <ol class="content-list" :style="`counter-reset: list ${startingIndex}`">
-        <li class="content-list__item contentlist-item" :key="contentBlock.id" v-for="contentBlock in contentBlocks">
+      <ol class="content-list">
+        <li class="content-list__item contentlist-item"
+            :key="contentBlock.id"
+            v-for="(contentBlock, index) in contentBlocks">
+          <p class="content-list__numbering">{{alphaIndex(index)}})</p>
           <content-block :contentBlock="contentBlock"></content-block>
         </li>
       </ol>
@@ -12,7 +15,8 @@
 </template>
 
 <script>
-  // import ContentBlock from '@/components/ContentBlock';
+
+  const lowerAsciiA = 97;
 
   export default {
     props: ['contents', 'parent', 'startingIndex'],
@@ -23,6 +27,12 @@
       ContentBlock: () => import('@/components/ContentBlock')
     },
 
+    methods: {
+      alphaIndex(index) {
+        return String.fromCharCode(lowerAsciiA + this.startingIndex + index);
+      }
+    },
+
     computed: {
       contentBlocks() {
         return this.contents.map(contentBlock => {
@@ -48,16 +58,14 @@
         list-style: none;
         position: relative;
         padding: 0 2*15px;
+      }
 
-        &::before {
+      &__numbering {
           position: absolute;
           font-weight: 600;
           left: 0;
           color: $color-brand;
-          content: counter(list, lower-alpha) ") ";
-          counter-increment: list;
           line-height: 27px;
-        }
       }
     }
   }