Search in homepage

components/Home.vue

@@ -1,19 +1,19 @@
 <template lang="pug">
-  section
-    el-backtop(target='body')
-    //- el-backtop(target='#home')
-    client-only
-      Calendar
-    .row.m-0
+  section#home
 
-      .p-0.col-sm-6.col-lg-4.col-xl-3(v-for='event in events')
-        a(:id='event.newDay' v-if='event.newDay')
-          .d-block.d-sm-none
-            el-divider {{event.start_datetime|day}}
-        //- p(style='color: white;') {{event}}
+    .row.m-0.mt-1
+      .col-xl-7.col-lg-7.col-sm-6.col-xs-12.p-0
+        client-only
+          Calendar
+      .col
+        Search(past-filter recurrent-filter)
+
+    .row.m-0
+      .p-0.col-sm-6.col-lg-4.col-xl-4(v-for='event in events' :key='event.id')
+        a.d-block.d-sm-none.sticky(:id='event.newDay' v-if='event.newDay')
+          el-divider {{event.start_datetime|day}}
         Event(
           :id='event.start_datetime'
-          :key='event.id'
           :event='event'
         )
 
@@ -23,9 +23,18 @@
 import { mapGetters, mapState } from 'vuex'
 import Event from '@/components/Event'
 import Calendar from '@/components/Calendar'
+import Search from '@/components/Search'
 
 export default {
   name: 'Home',
+  components: { Calendar, Event, Search },
+  computed: {
+    events () {
+      return this.in_past ? this.filteredEventsWithPast : this.filteredEvents
+    },
+    ...mapGetters(['filteredEvents', 'filteredEventsWithPast']),
+    ...mapState(['settings', 'in_past'])
+  },
   head () {
     return {
       title: this.settings.title,
@@ -41,21 +50,6 @@ export default {
         { rel: 'alternate', type: 'application/rss+xml', title: this.settings.title, href: this.settings.baseurl + '/feed/rss' }
       ]
     }
-  },
-  components: { Calendar, Event },
-  computed: {
-    events () {
-      return this.in_past ? this.filteredEventsWithPast : this.filteredEvents
-    },
-    ...mapGetters(['filteredEvents', 'filteredEventsWithPast']),
-    ...mapState(['settings', 'in_past'])
   }
 }
 </script>
-<style lang="less">
-section {
-  width: 100%;
-  max-width: 1500px;
-  margin: 0 auto;
-}
-</style>