Improve some components

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/EventCard.vue

@@ -1,7 +1,7 @@
 <template>
   <router-link
     class="card"
-    :to="{ name: 'Event', params: { uuid: event.uuid } }"
+    :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
     <div class="card-image">
       <figure class="image is-16by9">

js/src/components/Event/FullAddressAutoComplete.vue

@@ -42,7 +42,7 @@
             ><br />
             <small>{{ option.poiInfos.alternativeName }}</small>
           </template>
-          <template slot="empty">
+          <template #empty>
             <span v-if="isFetching">{{ $t("Searching…") }}</span>
             <div v-else-if="queryText.length >= 3" class="is-enabled">
               <span>{{
@@ -83,7 +83,7 @@
     </div>
     <div
       class="map column"
-      v-if="selected && selected.geom && selected.poiInfos"
+      v-if="!hideMap && selected && selected.geom && selected.poiInfos"
     >
       <map-leaflet
         :coords="selected.geom"
@@ -96,47 +96,6 @@
         :readOnly="false"
       />
     </div>
-    <!--        <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
-    <!--            <div class="modal-card" style="width: auto">-->
-    <!--                <header class="modal-card-head">-->
-    <!--                    <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
-    <!--                </header>-->
-    <!--                <section class="modal-card-body">-->
-    <!--                    <form>-->
-    <!--                        <b-field :label="$t('Name')">-->
-    <!--                            <b-input aria-required="true" required v-model="selected.description" />-->
-    <!--                        </b-field>-->
-
-    <!--                        <b-field :label="$t('Street')">-->
-    <!--                            <b-input v-model="selected.street" />-->
-    <!--                        </b-field>-->
-
-    <!--                        <b-field grouped>-->
-    <!--                            <b-field :label="$t('Postal Code')">-->
-    <!--                                <b-input v-model="selected.postalCode" />-->
-    <!--                            </b-field>-->
-
-    <!--                            <b-field :label="$t('Locality')">-->
-    <!--                                <b-input v-model="selected.locality" />-->
-    <!--                            </b-field>-->
-    <!--                        </b-field>-->
-
-    <!--                        <b-field grouped>-->
-    <!--                            <b-field :label="$t('Region')">-->
-    <!--                                <b-input v-model="selected.region" />-->
-    <!--                            </b-field>-->
-
-    <!--                            <b-field :label="$t('Country')">-->
-    <!--                                <b-input v-model="selected.country" />-->
-    <!--                            </b-field>-->
-    <!--                        </b-field>-->
-    <!--                    </form>-->
-    <!--                </section>-->
-    <!--                <footer class="modal-card-foot">-->
-    <!--                    <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
-    <!--                </footer>-->
-    <!--            </div>-->
-    <!--        </b-modal>-->
   </div>
 </template>
 <script lang="ts">
@@ -158,6 +117,7 @@ export default class FullAddressAutoComplete extends Mixins(
   @Prop({ required: false, default: "" }) label!: string;
   @Prop({ required: false }) userTimezone!: string;
   @Prop({ required: false, default: false, type: Boolean }) disabled!: boolean;
+  @Prop({ required: false, default: false, type: Boolean }) hideMap!: boolean;
 
   addressModalActive = false;
 
@@ -175,10 +135,6 @@ export default class FullAddressAutoComplete extends Mixins(
   updateEditing(): void {
     if (!(this.value && this.value.id)) return;
     this.selected = this.value;
-    const address = new Address(this.selected);
-    if (address.poiInfos) {
-      this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
-    }
   }
 
   updateSelected(option: IAddress): void {
@@ -212,20 +168,6 @@ export default class FullAddressAutoComplete extends Mixins(
   get canShowLocateMeButton(): boolean {
     return window.isSecureContext;
   }
-
-  @Watch("queryText")
-  resetAddressOnEmptyField(queryText: string): void {
-    if (queryText === "" && this.selected?.id) {
-      console.log("doing reset");
-      this.resetAddress();
-    }
-  }
-
-  resetAddress(): void {
-    this.$emit("input", null);
-    this.queryText = "";
-    this.selected = new Address();
-  }
 }
 </script>
 <style lang="scss">

js/src/components/Event/MultiCard.vue

@@ -29,14 +29,7 @@ export default class MultiCard extends Vue {
   grid-auto-rows: 1fr;
   grid-column-gap: 30px;
   grid-row-gap: 30px;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  // @media (min-width: 400px) {
-  //   grid-template-columns: repeat(2, 1fr);
-  // }
-  // @media (min-width: 800px) {
-  //   grid-template-columns: repeat(4, 1fr);
-  // }
-
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   .event-card {
     height: 100%;
     display: flex;

js/src/components/Group/GroupCard.vue

@@ -1,7 +1,21 @@
 <template>
-  <div class="card">
+  <router-link
+    :to="{
+      name: RouteName.GROUP,
+      params: { preferredUsername: usernameWithDomain(group) },
+    }"
+    class="card"
+  >
+    <div class="card-image">
+      <figure class="image is-16by9">
+        <lazy-image-wrapper
+          :picture="group.banner"
+          style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
+        />
+      </figure>
+    </div>
     <div class="card-content">
-      <div class="media">
+      <div class="media mb-3">
         <div class="media-left">
           <figure class="image is-48x48" v-if="group.avatar">
             <img class="is-rounded" :src="group.avatar.url" alt="" />
@@ -9,40 +23,101 @@
           <b-icon v-else size="is-large" icon="account-group" />
         </div>
         <div class="media-content">
-          <router-link
-            :to="{
-              name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-          >
-            <h3>{{ group.name }}</h3>
-            <p class="is-6 has-text-grey">
-              <span v-if="group.domain">{{
-                `@${group.preferredUsername}@${group.domain}`
-              }}</span>
-              <span v-else>{{ `@${group.preferredUsername}` }}</span>
-            </p>
-          </router-link>
+          <h3 class="is-size-5 group-title">{{ displayName(group) }}</h3>
+          <span class="is-6 has-text-grey-dark">
+            {{ `@${usernameWithDomain(group)}` }}
+          </span>
         </div>
       </div>
-      <div class="content">
-        <p>{{ group.summary }}</p>
+      <div class="content" v-html="group.summary" />
+      <div class="card-custom-footer">
+        <span class="has-text-grey-dark">
+          {{
+            $tc(
+              "{count} members or followers",
+              group.members.total + group.followers.total,
+              {
+                count: group.members.total + group.followers.total,
+              }
+            )
+          }}
+        </span>
       </div>
     </div>
-  </div>
+  </router-link>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IGroup, usernameWithDomain } from "@/types/actor";
+import { displayName, IGroup, usernameWithDomain } from "@/types/actor";
+import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import RouteName from "../../router/name";
 
-@Component
+@Component({
+  components: {
+    LazyImageWrapper,
+  },
+})
 export default class GroupCard extends Vue {
   @Prop({ required: true }) group!: IGroup;
 
   RouteName = RouteName;
 
   usernameWithDomain = usernameWithDomain;
+
+  displayName = displayName;
 }
 </script>
+<style lang="scss" scoped>
+.card {
+  .card-content {
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .content {
+      flex: 1;
+    }
+
+    ::v-deep .content {
+      & > *:first-child {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        margin-bottom: 0;
+
+        * {
+          font-weight: normal;
+          text-transform: none;
+          font-style: normal;
+          text-decoration: none;
+        }
+      }
+      & > *:not(:first-child) {
+        display: none;
+      }
+    }
+
+    .media-left {
+      margin-right: inherit;
+      margin-inline-end: 0.5rem;
+    }
+
+    .media-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .group-title {
+        line-height: 1.75rem;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

js/src/components/Group/MultiGroupCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="multi-card-group">
+    <group-card
+      class="group-card"
+      v-for="group in groups"
+      :group="group"
+      :key="group.id"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { IGroup } from "@/types/actor";
+import { PropType } from "vue";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import GroupCard from "./GroupCard.vue";
+@Component({
+  components: {
+    GroupCard,
+  },
+})
+export default class MultiGroupCard extends Vue {
+  @Prop({ type: Array as PropType<IGroup[]>, required: true })
+  groups!: IGroup[];
+}
+</script>
+<style lang="scss" scoped>
+.multi-card-group {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-column-gap: 30px;
+  grid-row-gap: 30px;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  .group-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>