ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into 6016-feature-refactor-notification-page

Browse Source
This commit is contained in:
Wolfgang Huß 2023-03-14 19:49:33 +01:00 committed by GitHub
commit 701d1d1dcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
webapp/components/PostTeaser/PostTeaser.vue
View File

@ -15,7 +15,13 @@
<img :src="post.image | proxyApiUrl" class="image" />
</template>
<client-only>
<user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" />
<div class="post-user-row">
<user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" />
<hc-ribbon
:class="[isPinned ? '--pinned' : '', post.image ? 'post-ribbon-w-img' : 'post-ribbon']"
:text="isPinned ? $t('post.pinned') : $t('post.name')"
/>
</div>
</client-only>
<h2 class="title hyphenate-text">{{ post.title }}</h2>
<!-- TODO: replace editor content with tiptap render view -->
@ -73,10 +79,6 @@
</client-only>
</footer>
</base-card>
<hc-ribbon
:class="{ '--pinned': isPinned }"
:text="isPinned ? $t('post.pinned') : $t('post.name')"
/>
</nuxt-link>
</template>
@ -192,19 +194,38 @@ export default {
display: block;
height: 100%;
color: $text-color-base;
}
> .ribbon {
.post-user-row {
position: relative;
> .post-ribbon-w-img {
position: absolute;
top: 50%;
right: -7px;
// 14px (~height of ribbon element) + 24px(=margin of hero image)
top: -38px;
// 7px+24px(=padding of parent)
right: -31px;
}
> .post-ribbon {
position: absolute;
// 14px (~height of ribbon element) + 24px(=margin of hero image)
top: -24px;
// 7px(=offset)+24px(=margin of parent)
right: -31px;
}
}
.post-teaser > .base-card {
display: flex;
flex-direction: column;
overflow: visible;
height: 100%;
> .hero-image {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
&.--blur-image > .hero-image > .image {
filter: blur($blur-radius);
}