Home restyle

components/Event.vue

@@ -1,26 +1,25 @@
 <template lang="pug">
-  nuxt-link.event(:to='`/event/${event.id}`' :class='{ withImg: event.image_path }')
+  .card.event.mt-1.text-white(body-style='padding: 0px;')
+    nuxt-link(:to='`/event/${event.id}`')
+      img(v-if='showImage && event.image_path' :src='`/media/thumb/${event.image_path}`')
+      .float-right
+        i.text-danger.el-icon-refresh(v-if='event.parentId')
+        .badge.text-info(v-if='settings.enable_resources && event.resources && event.resources.length') {{event.resources.length}}
+      .title {{event.title}}
 
-    //- image
-    el-image(v-if='showImage && event.image_path' lazy :src='`/media/thumb/${event.image_path}`')
+    .card-body
+      div
+        i.el-icon-date
+        span  {{event|when}}
+      el-button.mt-1.bg-dark.text-warning.float-right(plain size='mini' round type='text' icon='el-icon-location-outline' @click='addPlace') {{event.place.name}}
+      //- date / place
+      .description.mt-3(v-if='!event.image_path || !event.tags.length' v-html='description')
 
-    .event-info
-      .content-info
-
-        //-  title
-        h2 {{event.title}}
-
-        //- date / place
-        .date
-          div <v-icon name='clock'/> {{event|when('home')}}
-          div <v-icon name='map-marker-alt' /> {{event.place.name}}
-
-      ul.tags(v-if='showTags && event.tags')
-        li(v-for='tag in event.tags' :key='tag') {{tag}}
-        li(v-if='settings.enable_federation && event.resources && event.resources.length') <u>{{$tc('common.n_resources', event.resources.length)}}</u>
+    .card-footer(v-if='event.tags.length')
+      el-button.ml-1.bg-dark(type='text' plain round size='mini' v-for='tag in event.tags' :key='tag' @click='addTag(tag)') {{tag}}
 </template>
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   props: {
@@ -35,26 +34,74 @@ export default {
     }
   },
   computed: {
-    ...mapState(['settings'])
+    ...mapState(['settings', 'filters']),
+    description () {
+      return this.event.description.slice(0, 500)
+    },
+    show_footer () {
+      return (this.event.tags.length || this.event.resources.length)
+    }
+  },
+  methods: {
+    ...mapActions(['setSearchTags', 'setSearchPlaces']),
+    addTag (tag) {
+      if (this.filters.tags.includes(tag)) {
+        this.setSearchTags(this.filters.tags.filter(t => t !== tag))
+      } else {
+        this.setSearchTags(this.filters.tags.concat([tag]))
+      }
+    },
+    addPlace () {
+      const place = this.event.place.id
+      if (this.filters.places.includes(place)) {
+        this.setSearchPlaces(this.filters.places.filter(p => p !== place))
+      } else {
+        this.setSearchPlaces(this.filters.places.concat(place))
+      }
+    }
   }
 }
 </script>
 <style lang='less'>
-
-@media only screen and (min-width: 574px) {
-  .event {
-    height: 100%;
-  }
-}
 .event {
-  padding: 3px;
-  display: flex;
-  flex-direction: column;
+  width: 320px;
+  max-width: 450px;
+  flex-grow: 1;
+  margin: .2em;
+  background-color: #202020;
 
-  // height: 100%;
-
-  &:hover {
+  a:hover {
     text-decoration: none;
+    .title {
+      border-bottom: 1px solid #888;
+      color: white;
+    }
+  }
+
+  .title {
+    margin-left: 1rem;
+    margin-top: 1rem;
+    margin-right: 1rem;
+    border-bottom: 1px solid #333;
+    transition: border-color .5s;
+    font-size: 1.2em;
+    max-height: 3em;
+    overflow: hidden;
+    color: #fea;
+  }
+
+  .card-footer {
+    max-height: 4.5em;
+    overflow: hidden;
+    padding: .25rem 0.5rem;
+    line-height: 1.8rem;
+  }
+  .description {
+    color: #999;
+    font-size: 0.8em;
+    p {
+      margin: 0px;
+    }
   }
 
   img {
@@ -63,60 +110,5 @@ export default {
     object-fit: cover;
     object-position: top;
   }
-
-  .event-info {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background-color: #111214;
-
-  }
-
-  .content-info {
-    padding: 0.8em 1em;
-
-    h2 {
-      color: rgb(174, 255, 174);
-      font-size: 16px;
-      font-size: 1.1rem;
-      font-weight: 600;
-      margin: 0px;
-    }
-
-    p {
-      max-height: 92px;
-      overflow: hidden;
-      color: white;
-      margin: 0px;
-    }
-
-    .date {
-      font-weight: 400;
-      font-size: 1rem;
-      color: white;
-    }
-  }
-
-  .tags {
-    font-size: 15px;
-    padding: 1px;
-    margin-bottom: 0;
-    display:flex;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      background: #1B1F21;
-      display: inline-block;
-      padding: 2px 10px;
-      color: rgba(255,255,255,0.9);
-      margin: 1px;
-      text-align: center;
-      flex-grow: 1;
-    }
-
-  }
 }
-
 </style>

components/Home.vue

@@ -8,14 +8,8 @@
       .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 + event.start_datetime')
-        a.d-block.d-sm-none(:id='event.newDay' v-if='event.newDay')
-          el-divider {{event.start_datetime|day}}
-        Event(
-          :id='event.start_datetime'
-          :event='event'
-        )
+    #events
+      Event(v-for='event in events' :key='event.id' :event='event')
 
 </template>
 
@@ -53,3 +47,10 @@ export default {
   }
 }
 </script>
+<style lang='less'>
+#events {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+</style>

components/Search.vue

@@ -19,10 +19,11 @@
         span.float-left {{ item.label }}
         i.float-right.el-icon-place(v-if='item.type==="place"')
         i.float-right.el-icon-collection-tag(v-if='item.type==="tag"')
-    br
-    el-tag.mr-1(type='success' v-for='f in filter' size='small'
-      disable-transitions closable :key='f.type + f.id'
-      @close='removeFilter(f)') {{f.label}}
+    #filters
+      el-button.mr-1.bg-dark(type='text' round plain v-for='t in filters.tags' size='mini'
+        :key='t' @click='removeTag(t)') {{t}}
+      el-button.mr-1.bg-dark.text-warning(type='text' round plain v-for='p in selectedPlaces' size='mini'
+        :key='p' @click='removePlace(p.id)') {{p.name}}
 </template>
 
 <script>
@@ -40,10 +41,12 @@ export default {
   },
   computed: {
     ...mapState(['tags', 'places', 'filters', 'settings']),
-    // TOFIX: optimize
+    selectedPlaces () {
+      return this.places.filter(p => this.filters.places.includes(p.id))
+    },
     keywords () {
-      const tags = this.tags.map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
-      const places = this.places.map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
+      const tags = this.tags.filter(t => !this.filters.tags.includes(t.tag)).map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
+      const places = this.places.filter(p => !this.filters.places.includes(p.id)).map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
       const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
       return keywords
     },
@@ -62,12 +65,11 @@ export default {
   methods: {
     ...mapActions(['setSearchPlaces', 'setSearchTags',
       'showPastEvents', 'showRecurrentEvents', 'updateEvent']),
-    removeFilter (item) {
-      if (item.type === 'tag') {
-        this.setSearchTags(this.filters.tags.filter(t => t.id !== item.id))
-      } else {
-        this.setSearchPlaces(this.filters.places.filter(p => p.id !== item.id))
-      }
+    removeTag (tag) {
+      this.setSearchTags(this.filters.tags.filter(t => t !== tag))
+    },
+    removePlace (place) {
+      this.setSearchPlaces(this.filters.places.filter(p => p !== place))
     },
     querySearch (queryString, cb) {
       const ret = this.keywords
@@ -78,9 +80,9 @@ export default {
     },
     addFilter (item) {
       if (item.type === 'tag') {
-        this.setSearchTags(this.filters.tags.concat(item))
+        this.setSearchTags(this.filters.tags.concat(item.id))
       } else {
-        this.setSearchPlaces(this.filters.places.concat(item))
+        this.setSearchPlaces(this.filters.places.concat(item.id))
       }
       this.search = ''
     }
@@ -93,7 +95,11 @@ export default {
   border-radius: 0px;
   border-bottom: 2px solid lightgray;
   color: white;
-  background-color: #333;
+  background-color: #111;
+}
+
+#filters {
+  line-height: 2rem;
 }
 
 .el-switch__label {