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

Merge pull request #6130 from Ocelot-Social-Community/3157-fix-post-ribbons-position

Browse Source 
fix(webapp): fix ribbons position
This commit is contained in:
Wolfgang Huß 2023-03-14 19:49:11 +01:00 committed by GitHub
commit c4601964df
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

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

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