use base-card on post page

webapp/components/PostTeaser/PostTeaser.vue

@@ -188,6 +188,7 @@ export default {
 
     .ds-tag {
       margin: 0;
+      margin-right: $space-xx-small;
     }
   }
 

webapp/components/TeaserImage/TeaserImage.vue

@@ -138,6 +138,7 @@ export default {
     width: 100%;
     height: 100%;
     min-height: 400px;
+    max-height: 600px;
     font-size: $font-size-base;
 
     > .img {

webapp/pages/post/_id/_slug/index.vue

@@ -1,15 +1,16 @@
 <template>
   <transition name="fade" appear>
-    <ds-card
+    <base-card
-      :lang="post.language"
       v-if="post && ready"
-      :image="post.image | proxyApiUrl"
+      :lang="post.language"
       :class="{
         'post-page': true,
         'disabled-content': post.disabled,
         '--blur-image': blurred,
       }"
     >
+      <template v-slot:heroImage>
+        <img :src="post.image | proxyApiUrl" class="image" />
         <aside v-show="post.imageBlurred" class="blur-toggle">
           <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
           <base-button
@@ -19,6 +20,8 @@
             @click="blurred = !blurred"
           />
         </aside>
+      </template>
+      <section class="menu">
         <user-teaser :user="post.author" :date-time="post.createdAt">
           <template v-slot:dateTime>
             <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
@@ -35,6 +38,7 @@
             @unpinPost="unpinPost"
           />
         </client-only>
+      </section>
       <ds-space margin-bottom="small" />
       <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
       <ds-space margin-bottom="small" />
@@ -83,7 +87,7 @@
         </ds-flex>
       </ds-space>
       <!-- Comments -->
-      <ds-section slot="footer">
+      <ds-section>
         <comment-list :post="post" @toggleNewCommentForm="toggleNewCommentForm" @reply="reply" />
         <ds-space margin-bottom="large" />
         <comment-form
@@ -99,7 +103,7 @@
           <a href="https://support.human-connection.org/kb/" target="_blank">FAQ</a>
         </ds-placeholder>
       </ds-section>
-    </ds-card>
+    </base-card>
   </transition>
 </template>
 
@@ -234,18 +238,23 @@ export default {
 </script>
 <style lang="scss">
 .post-page {
-  &.--blur-image > .ds-card-image img {
+  > .hero-image {
-    filter: blur(22px);
+    position: relative;
   }
 
-  .ds-card-content {
+  > .menu {
-    position: relative;
+    display: flex;
-    padding-top: 24px;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &.--blur-image > .hero-image > .image {
+    filter: blur(22px);
   }
 
   .blur-toggle {
     position: absolute;
-    top: -80px;
+    bottom: 0;
     right: 0;
 
     display: flex;
@@ -267,22 +276,6 @@ export default {
       min-height: 0px;
     }
   }
-
-  .ds-card-image {
-    img {
-      max-height: 2000px;
-      object-fit: contain;
-      object-position: center;
-    }
-  }
-
-  .ds-card-footer {
-    padding: 0;
-
-    .ds-section {
-      padding: $space-base;
-    }
-  }
 }
 
 @media only screen and (max-width: 960px) {

webapp/pages/settings/my-email-address/enter-nonce.vue

@@ -16,12 +16,7 @@
           icon="question-circle"
           :label="$t('settings.email.labelNonce')"
         />
-        <base-button
+        <base-button icon="check" :disabled="errors" type="submit" filled>
-          icon="check"
-          :disabled="errors"
-          type="submit"
-          filled
-        >
           {{ $t('actions.save') }}
         </base-button>
       </base-card>