add variants to BaseCard

webapp/components/Editor/Editor.story.js

@@ -40,9 +40,9 @@ storiesOf('Editor', module)
     return {
       components: { ctx },
       template: `
-        <ds-card style="width: 50%; min-width: 500px; margin: 0 auto;">
+        <base-card style="width: 50%; min-width: 500px; margin: 0 auto;">
           <ctx />
-        </ds-card>
+        </base-card>
       `,
     }
   })

webapp/components/Notification/Notification.vue

@@ -9,7 +9,7 @@
       :to="{ name: 'post-id-slug', params, ...hashParam }"
       @click.native="$emit('read')"
     >
-      <base-card>
+      <base-card class="--wide-content">
         <h2 class="card-heading">{{ from.title || from.post.title }}</h2>
         <p>
           <strong v-if="isComment" class="comment">{{ $t(`notifications.comment`) }}:</strong>
@@ -67,10 +67,6 @@ export default {
     opacity: 0.5;
   }
 
-  .user-teaser {
-    margin-bottom: $space-x-small;
-  }
-
   > .description {
     margin-bottom: $space-x-small;
   }
@@ -82,18 +78,14 @@ export default {
     &:hover {
       color: $color-primary;
     }
+  }
 
-    > .base-card {
-      padding: $space-x-small;
+  .user-teaser {
+    margin-bottom: $space-x-small;
+  }
 
-      > .card-heading {
-        font-size: $font-size-large;
-      }
-
-      .comment {
-        font-weight: $font-weight-bold;
-      }
-    }
+  .comment {
+    font-weight: $font-weight-bold;
   }
 }
 </style>

webapp/components/PostTeaser/PostTeaser.vue

@@ -87,7 +87,7 @@ export default {
   mounted() {
     const width = this.$el.offsetWidth
     const height = Math.min(width / this.post.imageAspectRatio, 2000)
-    const imageElement = this.$el.querySelector('.ds-card-image')
+    const imageElement = this.$el.querySelector('.card-image > .image')
     if (imageElement) {
       imageElement.style.height = `${height}px`
     }
@@ -170,6 +170,7 @@ export default {
 
     > .image {
       width: 100%;
+      max-height: 2000px;
       object-fit: contain;
     }
   }

webapp/components/_new/generic/BaseCard/BaseCard.vue

@@ -38,6 +38,7 @@ export default {}
   }
 
   > .card-heading {
+    font-size: $font-size-large;
     margin-bottom: $space-x-small;
   }
 }

webapp/pages/index.vue

@@ -219,11 +219,6 @@ export default {
 </script>
 
 <style lang="scss">
-.ds-card-image img {
-  max-height: 2000px;
-  object-fit: contain;
-}
-
 .masonry-grid {
   display: grid;
   grid-gap: 10px;