cleaning embed event list

assets/style.less

@@ -33,3 +33,17 @@ li {
 .container {
   max-width: 1400px;
 }
+
+.v-dialog {
+  width: 600px;
+  max-width: 800px;
+}
+
+.theme--dark.v-list {
+  background-color: #333;
+}
+
+.v-autocomplete__content.v-menu__content {
+  scrollbar-width: thin;
+  scrollbar-color: #FF4511 #111;
+}

components/List.vue

@@ -1,13 +1,18 @@
 <template lang='pug'>
 div#list
-  p(v-if='title') {{title}}
-  v-timeline(dense)
-    v-timeline-item(
+  v-list(dense)
+    v-list-item
+      h3(v-if='title') {{title}}
+    v-list-item(
+      target='_blank'
+      :to='`/event/${event.id}`'
       v-for='event in computedEvents'
-      :key='`${event.id}_${event.start_datetime}`')
-      .text-subtitle <v-icon small color='success' v-if='event.parentId'>mdi-repeat</v-icon> {{event|when}}
-        .text-subtitle.float-right @{{event.place.name}}
-      a.text-body-1(:href='`/event/${event.id}`' target='_blank') {{event.title}}
+      :key='`${event.id}_${event.start_datetime}`' small)
+      v-list-item-content
+        v-list-item-subtitle <v-icon small color='success' v-if='event.parentId'>mdi-repeat</v-icon> {{event|when}}
+          span.primary--text.ml-1 @{{event.place.name}}
+        v-list-item-title(v-text='event.title')
+      //- a.text-body-1(:href='`/event/${event.id}`' target='_blank') {{event.title}}
 </template>
 <script>
 
@@ -57,5 +62,8 @@ export default {
   #list {
     max-width: 500px;
     margin: 0 auto;
+    .v-list-item__title {
+      white-space: normal !important;
+    }
   }
 </style>

layouts/iframe.vue

@@ -1,8 +1,9 @@
-<template>
-  <nuxt />
+<template lang='pug'>
+  v-app#iframe
+    nuxt
 </template>
 <style lang='less'>
-  html, body {
-    background-color: transparent;
+  #iframe.v-application {
+    background-color: transparent !important;
 }
 </style>

pages/embed/list.vue

@@ -5,13 +5,8 @@
 import List from '../../components/List'
 
 export default {
-  layout: 'iframe',
   components: { List },
-  data () {
-    return {
-      title: ''
-    }
-  },
+  layout: 'iframe',
   async asyncData ({ query, $axios }) {
     const title = query.title
     const tags = query.tags