IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor Notification component

Browse Source
This commit is contained in:
Alina Beck 2020-02-10 17:56:18 +01:00
parent 861b9aff94
commit cea538e2f1
1 changed files with 47 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
webapp/components/Notification/Notification.vue
View File

@ -1,37 +1,23 @@
<template> <template>
<ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small"> <article :class="{ read: notification.read, notification: true }">
<client-only> <client-only>
<ds-space margin-bottom="x-small"> <user-teaser :user="from.author" :date-time="from.createdAt" />
<user-teaser :user="from.author" :date-time="from.createdAt" />
</ds-space>
<ds-text class="reason-text-for-test" color="soft">
{{ $t(`notifications.reason.${notification.reason}`) }}
</ds-text>
</client-only> </client-only>
<ds-space margin-bottom="x-small" /> <p class="description">{{ $t(`notifications.reason.${notification.reason}`) }}</p>
<nuxt-link <nuxt-link
class="notification-mention-post" class="link"
:to="{ name: 'post-id-slug', params, ...hashParam }" :to="{ name: 'post-id-slug', params, ...hashParam }"
@click.native="$emit('read')" @click.native="$emit('read')"
> >
<ds-space margin-bottom="x-small"> <base-card>
<ds-card <h2 class="card-heading">{{ from.title || from.post.title }}</h2>
:header="from.title || from.post.title" <p>
hover <strong v-if="isComment" class="comment">{{ $t(`notifications.comment`) }}:</strong>
space="x-small" {{ from.contentExcerpt | removeHtml }}
class="notifications-card" </p>
> </base-card>
<ds-space margin-bottom="x-small" />
<div>
<span v-if="isComment" class="comment-notification-header">
{{ $t(`notifications.comment`) }}:
</span>
{{ from.contentExcerpt | removeHtml }}
</div>
</ds-card>
</ds-space>
</nuxt-link> </nuxt-link>
</ds-space> </article>
</template> </template>
<script> <script>
@ -70,14 +56,40 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.notification.read { .notification {
opacity: $opacity-soft; margin-bottom: $space-base;
}
.notifications-card { &:first-of-type {
min-width: 500px; margin-top: $space-x-small;
} }
.comment-notification-header {
font-weight: 700; .user-teaser {
margin-right: 0.1rem; margin-bottom: $space-x-small;
}
> .description {
margin-bottom: $space-x-small;
}
> .link {
display: block;
color: $text-color-base;
&:hover {
color: $color-primary;
}
> .base-card {
padding: $space-x-small;
> .card-heading {
font-size: $font-size-large;
}
.comment {
font-weight: $font-weight-bold;
}
}
}
} }
</style> </style>