feat: redirect editor UI (wip)

client/components/editor/editor-modal-blocks.vue

@@ -1,38 +1,22 @@
 <template lang='pug'>
   v-card.editor-modal-blocks.animated.fadeInLeft(flat, tile)
     v-container.pa-3(grid-list-lg, fluid)
-      v-layout(row, wrap)
-        v-flex(xs12, lg4, xl3)
-          v-card.radius-7(light)
+      v-row(dense)
+        v-col(
+          v-for='(item, idx) of blocks'
+          :key='`block-` + item.key'
+          cols='12'
+          lg='4'
+          xl='3'
+          )
+          v-card.radius-7(light, flat, @click='selectBlock(item)')
             v-card-text
-              .d-flex
-                v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
-                  .body-2.teal--text Blocks
-              v-list(two-line)
-                template(v-for='(item, idx) of blocks')
-                  v-list-item(@click='selectBlock(item)')
-                    v-list-item-avatar
-                      v-avatar.radius-7(color='teal')
-                        v-icon(dark) dashboard
-                    v-list-item-content
-                      v-list-item-title.body-2 {{item.title}}
-                      v-list-item-sub-title {{item.description}}
-                    v-list-item-avatar(v-if='block.key === item.key')
-                      v-icon.animated.fadeInLeft(color='teal') arrow_forward_ios
-                  v-divider(v-if='idx < blocks.length - 1')
-
-        v-flex(xs3)
-          v-card.radius-7.animated.fadeInLeft(light, v-if='block.key')
-            v-card-text
-              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
-                v-icon.mr-3(color='teal') dashboard
-                .body-2.teal--text {{block.title}}
-              .d-flex.mt-3
-                v-toolbar.radius-7(flat, color='grey lighten-4', dense, height='44')
-                  .body-2 Coming soon
-                v-btn.ml-3.my-0.mr-0.radius-7(color='teal', large, @click='', disabled)
-                  v-icon(left) save_alt
-                  span Insert
+              .d-flex.align-center
+                v-avatar.radius-7(color='teal')
+                  v-icon(dark) {{item.icon}}
+                .pl-3
+                  .body-2: strong.teal--text {{item.title}}
+                  .caption.grey--text {{item.description}}
 </template>
 
 <script>
@@ -49,13 +33,19 @@ export default {
   data() {
     return {
       blocks: [
-        { key: 'hero', title: 'Hero', description: 'A large banner with a title.' },
-        { key: 'toc', title: 'Table of Contents', description: 'A list of children pages.' }
-        // { key: 'form', title: 'Form', description: '' }
-      ],
-      block: {
-        key: false
-      }
+        {
+          key: 'childlist',
+          title: 'List Children Pages',
+          description: 'Display a links list of all children of this page.',
+          icon: 'mdi-format-list-text'
+        },
+        {
+          key: 'tabs',
+          title: 'Tabs',
+          description: 'Organize content within tabs.',
+          icon: 'mdi-tab'
+        }
+      ]
     }
   },
   computed: {