add child list toggle for smartphone

src/components/nodes/NodeView.vue

@@ -23,7 +23,7 @@
 
     <node-view-child-list-group
       v-if="!loading && preview && node.children && node.children.length"
-      :children="node.children"
+      :children="node.children" :id="node.id"
     />
 
     <b-overlay

src/components/nodes/NodeViewChildListGroup.vue

@@ -1,15 +1,29 @@
 <template>
   <nav class="node-view-child-list-group">
-    <b-list-group>
-      <b-list-group-item
-        v-for="child in children" :key="child.id"
-        :variant="child.variant"
-        href="javascript:;"
-        @click="$parent.$emit('open-child', { childId: child.id })"
-      >
-        {{ $t('variants.' + child.variant) }}
-      </b-list-group-item>
-    </b-list-group>
+    <b-collapse :id="'collapse-child-list-' + id" v-model="visible">
+      <b-list-group>
+        <b-list-group-item
+          v-for="child in children" :key="child.id"
+          :variant="child.variant"
+          href="javascript:;"
+          @click="$parent.$emit('open-child', { childId: child.id })"
+        >
+          {{ $t('variants.' + child.variant) }}
+        </b-list-group-item>
+      </b-list-group>
+    </b-collapse>
+
+    <b-button
+      class="btn-children"
+      :class="visible ? null : 'collapsed'"
+      :aria-expanded="visible ? 'true' : 'false'"
+      :aria-controls="'collapse-child-list-' + id"
+      @click.stop="visible = !visible"
+      variant="dark"
+      block
+    >
+      {{ $t('children')}} <span class="collapse-icon" :class="{ collapsed: !visible }">></span>
+    </b-button>
   </nav>
 </template>
 
@@ -18,7 +32,14 @@ export default {
   name: 'NodeViewChildListGroup',
 
   props: {
-    children: { type: Array, required: true }
+    children: { type: Array, required: true },
+    id: { type: Number, required: true }
+  },
+
+  data () {
+    return {
+      visible: window.innerWidth > 769
+    }
   }
 }
 </script>
@@ -35,9 +56,26 @@ export default {
     @include media-breakpoint-up($size-bp) {
       font-size: 1.75rem;
     }
+  }
 
-    &-item {
+  .btn-children {
+    display: flex;
+    border-radius: 0 !important;
+    font-weight: $font-weight-bold;
+    padding: $list-group-item-padding-y $list-group-item-padding-x;
 
+    .collapse-icon {
+      font-weight: inherit;
+      margin-left: auto;
+      transform: translate(15px, 0px) rotate(270deg);
+
+      &.collapsed {
+        transform: translate(-3px, 0px) rotate(90deg) ;
+      }
+    }
+
+    @include media-breakpoint-up('tb') {
+      display: none;
     }
   }
 }

src/messages/fr.json

@@ -43,6 +43,7 @@
     }
   },
   "siblings": "Textes rebonds",
+  "children": "Textes produits",
   "text": {
     "read": "Voir le texte",
     "read-origin": "Voir le texte de départ",