Updates advocate card (#1101)

components/advocates/AdvocateCard.vue

@@ -1,24 +1,21 @@
 <template>
-  <article class="advocate-card">
-    <div
-      class="advocate-card__picture"
-      :style="`background-image: ${decorate(image)};`"
-    />
-    <div class="advocate-card__copy">
-      <h3 class="advocate-card__name">
-        {{ name }}
-      </h3>
-      <p class="advocate-card__location">
-        {{ location }}
-      </p>
-      <h3 class="advocate-card__focus-areas-title">
-        Focus areas
-      </h3>
-      <p class="advocate-card__focus-areas">
-        {{ areas }}
-      </p>
-    </div>
-  </article>
+  <AppCard
+    class="advocate-card"
+    :image="image"
+    :title="name"
+    :tags="formattedRegion"
+  >
+    <p v-if="location" class="advocate-card__location">
+      <Map20 class="advocate-card__icon" />
+      {{ location }}
+    </p>
+    <p v-if="slackId" class="advocate-card__contact">
+      <LogoSlack20 class="advocate-card__icon" />
+      <AppLink :url="`https://qiskit.slack.com/team/${slackId}`">
+        Contact on Slack
+      </AppLink>
+    </p>
+  </AppCard>
 </template>
 
 <script lang="ts">
@@ -30,16 +27,11 @@ export default class AdvocateCard extends Vue {
   @Prop(String) name!: string
   @Prop(String) image!: string
   @Prop(String) location!: string
-  @Prop(String) areas!: string
+  @Prop(String) region!: string
+  @Prop(String) slackId!: string
 
-  decorate (image: string) {
-    const bgEffects = [
-      'linear-gradient(170deg, #0000 0%, #0000 90%, var(--component-bg) 90.3%)',
-      'linear-gradient(-170deg, #0000 0%, #0000 90%, var(--component-bg) 90.3%)',
-      `url(/images/advocates/${image})`
-    ]
-    return bgEffects.join(', ')
-  }
+  // Tags on AppCard is an Array
+  formattedRegion = this.region ? [this.region] : []
 }
 </script>
 
@@ -47,33 +39,25 @@ export default class AdvocateCard extends Vue {
 @import '~carbon-components/scss/globals/scss/typography';
 
 .advocate-card {
-  --component-bg: #{$ui-01};
+  margin-bottom: $layout-02;
 
-  text-align: center;
-  border: 1px solid $focus;
-  background-color: var(--component-bg);
-
-  &__picture {
-    height: 350px;
-    background-repeat: no-repeat;
-    background-size: cover, cover, cover;
-    background-position: top center;
+  @include mq($until: large) {
+    margin-bottom: $layout-01;
   }
 
-  &__copy {
-    margin: $spacing-05 $spacing-07 $spacing-05;
+  &__location, &__contact {
+    @include type-style('body-long-01');
+    display: flex;
+    align-items: center;
   }
 
-  &__name, &__focus-areas-title {
-    @include type-style('productive-heading-04');
+  &__location {
+    margin-bottom: $spacing-03;
   }
 
-  &__focus-areas-title {
-    margin-top: $spacing-06;
-  }
-
-  &__location, &__focus-areas {
-    @include type-style('body-short-02');
+  &__icon {
+    margin-right: $spacing-03;
+    fill: currentColor;
   }
 }
 </style>

components/ui/AppCard.vue

@@ -9,7 +9,7 @@
         <h3 class="app-card__title">
           {{ title }}
         </h3>
-        <div v-if="to" class="app-card__tags">
+        <div v-if="hasTags" class="app-card__tags">
           <cv-tag
             v-for="tag in tags"
             :key="tag"
@@ -46,6 +46,8 @@ export default class AppCard extends Vue {
     url: this.to,
     label: this.ctaLabel
   }
+
+  hasTags = this.tags && this.tags.length > 0
 }
 </script>
 
@@ -87,6 +89,7 @@ export default class AppCard extends Vue {
     flex: 1;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
   }
 
   &__header {
@@ -130,7 +133,6 @@ export default class AppCard extends Vue {
   &__description {
     @include type-style('body-long-01');
     margin-top: $layout-02;
-    margin-bottom: $layout-02;
   }
 }
 </style>

content/advocates/index/abraham-asfaw.md

@@ -1,8 +1,9 @@
 ---
 name: Abraham Asfaw
-image: abraham-asfaw.jpg
+image: /images/advocates/abraham-asfaw.jpg
 location: New York, NY
 latitude: 40.71
 longitude: -74
 areas: Tutorials, Circuits
+region: North America
 ---

content/advocates/index/carmen-recio-valcarce.md

@@ -1,8 +1,9 @@
 ---
 name: Carmen Recio Valcarce
-image: carmen-recio-valcarce.png
+image: /images/advocates/carmen-recio-valcarce.png
 location: Madrid, Spain
 latitude: 40.41
 longitude: -3.7
 areas: Community Building, Tutorials, Event Hosting
+region: Europe
 ---

content/advocates/index/hassi-norlen.md

@@ -1,6 +1,6 @@
 ---
 name: Hassi Norlen
-image: hassi-norlen.png
+image: /images/advocates/hassi-norlen.png
 location: Washington D.C.
 latitude: 38.89
 longitude: -77.01

content/advocates/index/holly-cummins.md

@@ -1,6 +1,6 @@
 ---
 name: Holly Cummins
-image: holly-cummins.png
+image: /images/advocates/holly-cummins.png
 location: Surrey, United Kingdom
 latitude: 51.31
 longitude: -0.55

pages/events/index.vue

@@ -50,7 +50,9 @@
               :image="emptyCard.img"
               :title="emptyCard.title"
             >
-              {{ emptyCard.description }}
+              <div class="event-page__empty-card-description">
+                {{ emptyCard.description }}
+              </div>
             </AppCard>
             <EventCard
               v-for="event in filteredEvents"
@@ -298,6 +300,14 @@ export default class EventsPage extends QiskitPage {
     }
   }
 
+  &__empty-card-description {
+    height: 8rem;
+
+    @include mq($until: medium) {
+      height: auto;
+    }
+  }
+
   &__start-an-event {
     margin-top: $layout-05;
     margin-bottom: $layout-05;