update styling and wording for pinned post ribbons

This commit is contained in:
Alina Beck 2019-10-21 14:34:26 +03:00
parent e37736500a
commit c2c69a2f70
4 changed files with 14 additions and 6 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<ds-card <ds-card
:image="post.image | proxyApiUrl" :image="post.image | proxyApiUrl"
:class="{ 'post-card': true, 'disabled-content': post.disabled, 'post--target': isPinned }" :class="{ 'post-card': true, 'disabled-content': post.disabled, 'post--pinned': isPinned }"
> >
<!-- Post Link Target --> <!-- Post Link Target -->
<nuxt-link <nuxt-link
@ -16,7 +16,7 @@
<client-only> <client-only>
<hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" /> <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
</client-only> </client-only>
<hc-ribbon v-if="isPinned" :text="$t('post.pinned')" /> <hc-ribbon v-if="isPinned" class="ribbon--pinned" :text="$t('post.pinned')" />
<hc-ribbon v-else :text="$t('post.name')" /> <hc-ribbon v-else :text="$t('post.name')" />
</div> </div>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
@ -180,7 +180,7 @@ export default {
} }
} }
.post--target { .post--pinned {
border: 1px solid $color-primary; border: 1px solid $color-warning;
} }
</style> </style>

View File

@ -46,4 +46,12 @@ export default {
border-color: $background-color-secondary transparent transparent $background-color-secondary; border-color: $background-color-secondary transparent transparent $background-color-secondary;
} }
} }
.ribbon--pinned {
background-color: $color-warning-active;
&::before {
border-color: $color-warning transparent transparent $color-warning;
}
}
</style> </style>

View File

@ -354,7 +354,7 @@
}, },
"post": { "post": {
"name": "Beitrag", "name": "Beitrag",
"pinned": "Gepinnt", "pinned": "Meldung",
"moreInfo": { "moreInfo": {
"name": "Mehr Info", "name": "Mehr Info",
"title": "Mehr Informationen", "title": "Mehr Informationen",

View File

@ -355,7 +355,7 @@
}, },
"post": { "post": {
"name": "Post", "name": "Post",
"pinned": "Pinned", "pinned": "Announcement",
"moreInfo": { "moreInfo": {
"name": "More info", "name": "More info",
"title": "More information", "title": "More information",