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

Merge branch 'master' into deployment-echo-current-configuration

Browse Source
This commit is contained in:
Ulf Gebhardt 2023-03-20 21:42:12 +01:00 committed by GitHub
commit cf4a5db6ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/MasonryGrid/MasonryGrid.vue
View File

@ -30,7 +30,7 @@ export default {
/* dirty fix to override broken styleguide inline-styles */ /* dirty fix to override broken styleguide inline-styles */
.ds-grid { .ds-grid {
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
gap: 32px 16px !important; gap: 16px !important;
grid-auto-rows: 20px; grid-auto-rows: 20px;
} }

33
webapp/components/NotificationMenu/NotificationMenu.vue
View File

@ -12,22 +12,27 @@
<counter-icon icon="bell" :count="unreadNotificationsCount" danger /> <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
</base-button> </base-button>
</template> </template>
<template #popover> <template #popover="{ closeMenu }">
<div class="notifications-menu-popover"> <div class="notifications-menu-popover">
<notification-list :notifications="notifications" @markAsRead="markAsRead" /> <notification-list :notifications="notifications" @markAsRead="markAsRead" />
</div> </div>
<ds-flex class="notifications-link-container"> <ds-flex class="notifications-link-container">
<ds-flex-item :width="{ base: 'auto' }" centered> <ds-flex-item class="notifications-link-container-item" :width="{ base: '100%' }" centered>
<nuxt-link :to="{ name: 'notifications' }"> <nuxt-link :to="{ name: 'notifications' }">
<ds-button ghost primary> <base-button ghost primary>
{{ $t('notifications.pageLink') }} {{ $t('notifications.pageLink') }}
</ds-button> </base-button>
</nuxt-link> </nuxt-link>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: 'auto' }" centered> <ds-flex-item class="notifications-link-container-item" :width="{ base: '100%' }" centered>
<ds-button ghost primary @click="markAllAsRead" data-test="markAllAsRead-button"> <base-button
ghost
primary
@click="markAllAsRead(closeMenu)"
data-test="markAllAsRead-button"
>
{{ $t('notifications.markAllAsRead') }} {{ $t('notifications.markAllAsRead') }}
</ds-button> </base-button>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
</template> </template>
@ -74,11 +79,12 @@ export default {
this.$toast.error(error.message) this.$toast.error(error.message)
} }
}, },
async markAllAsRead() { async markAllAsRead(closeMenu) {
if (!this.hasNotifications) { if (!this.hasNotifications) {
return return
} }
closeMenu()
try { try {
await this.$apollo.mutate({ await this.$apollo.mutate({
mutation: markAllAsReadMutation(this.$i18n), mutation: markAllAsReadMutation(this.$i18n),
@ -144,16 +150,15 @@ export default {
<style lang="scss"> <style lang="scss">
.notifications-menu-popover { .notifications-menu-popover {
max-width: 500px; max-width: 500px;
margin-bottom: $size-height-base;
} }
.notifications-link-container { .notifications-link-container {
background-color: $background-color-softer-active; background-color: $background-color-softer-active;
justify-content: center; justify-content: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: $size-height-base;
padding: $space-x-small; padding: $space-x-small;
flex-direction: row;
}
.notifications-link-container-item {
justify-content: center;
display: flex;
} }
</style> </style>