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

fix(webapp): small buttons in notifications menu

Browse Source
This commit is contained in:
elweyn 2023-03-20 11:43:51 +01:00
parent 846495dc58
commit 4cfbf772a0
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,15 +19,15 @@
<ds-flex class="notifications-link-container"> <ds-flex class="notifications-link-container">
<ds-flex-item :width="{ base: 'auto' }" centered> <ds-flex-item :width="{ base: 'auto' }" 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 :width="{ base: 'auto' }" centered>
<ds-button ghost primary @click="markAllAsRead" data-test="markAllAsRead-button"> <base-button ghost primary @click="markAllAsRead" 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>
@ -144,16 +144,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; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: $size-height-base; height: 62px;
padding: $space-x-small; padding: $space-x-small;
flex-direction: column;
} }
</style> </style>