From 408b77a3e7a24f117f04749f43c09899f0f952d8 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 11 Feb 2020 18:19:40 +0100
Subject: [PATCH] use base-card on post page

---
 webapp/components/PostTeaser/PostTeaser.vue   |  1 +
 webapp/components/TeaserImage/TeaserImage.vue |  1 +
 webapp/pages/admin/users.vue                  |  2 +-
 webapp/pages/post/_id/_slug/index.vue         | 97 +++++++++----------
 .../settings/my-email-address/enter-nonce.vue |  7 +-
 5 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 3b88770ab..a680588a3 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -188,6 +188,7 @@ export default {
 
     .ds-tag {
       margin: 0;
+      margin-right: $space-xx-small;
     }
   }
 
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index 47a4d04d7..d5d07cfc1 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/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 {
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index a879d4f35..4b8ca6ffe 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -179,7 +179,7 @@ export default {
 </script>
 
 <style lang="scss">
-.admin-users >.base-card:first-child {
+.admin-users > .base-card:first-child {
   margin-bottom: $space-small;
 }
 </style>
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index d3ed9e1e1..24fa8477d 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -1,40 +1,44 @@
 <template>
   <transition name="fade" appear>
-    <ds-card
-      :lang="post.language"
+    <base-card
       v-if="post && ready"
-      :image="post.image | proxyApiUrl"
+      :lang="post.language"
       :class="{
         'post-page': true,
         'disabled-content': post.disabled,
         '--blur-image': blurred,
       }"
     >
-      <aside v-show="post.imageBlurred" class="blur-toggle">
-        <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
-        <base-button
-          :icon="blurred ? 'eye' : 'eye-slash'"
-          filled
-          circle
-          @click="blurred = !blurred"
-        />
-      </aside>
-      <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>
-        </template>
-      </user-teaser>
-      <client-only>
-        <content-menu
-          placement="bottom-end"
-          resource-type="contribution"
-          :resource="post"
-          :modalsData="menuModalsData"
-          :is-owner="isAuthor(post.author ? post.author.id : null)"
-          @pinPost="pinPost"
-          @unpinPost="unpinPost"
-        />
-      </client-only>
+      <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
+            :icon="blurred ? 'eye' : 'eye-slash'"
+            filled
+            circle
+            @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>
+          </template>
+        </user-teaser>
+        <client-only>
+          <content-menu
+            placement="bottom-end"
+            resource-type="contribution"
+            :resource="post"
+            :modalsData="menuModalsData"
+            :is-owner="isAuthor(post.author ? post.author.id : null)"
+            @pinPost="pinPost"
+            @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 {
-    filter: blur(22px);
+  > .hero-image {
+    position: relative;
   }
 
-  .ds-card-content {
-    position: relative;
-    padding-top: 24px;
+  > .menu {
+    display: flex;
+    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) {
diff --git a/webapp/pages/settings/my-email-address/enter-nonce.vue b/webapp/pages/settings/my-email-address/enter-nonce.vue
index c6a9c2dce..dfa44a1e4 100644
--- a/webapp/pages/settings/my-email-address/enter-nonce.vue
+++ b/webapp/pages/settings/my-email-address/enter-nonce.vue
@@ -16,12 +16,7 @@
           icon="question-circle"
           :label="$t('settings.email.labelNonce')"
         />
-        <base-button
-          icon="check"
-          :disabled="errors"
-          type="submit"
-          filled
-        >
+        <base-button icon="check" :disabled="errors" type="submit" filled>
           {{ $t('actions.save') }}
         </base-button>
       </base-card>