diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js new file mode 100644 index 00000000..3a274374 --- /dev/null +++ b/src/components/notification/notification.js @@ -0,0 +1,24 @@ +import Status from '../status/status.vue' +import StillImage from '../still-image/still-image.vue' +import UserCardContent from '../user_card_content/user_card_content.vue' + +const Notification = { + data () { + return { + userExpanded: false + } + }, + props: [ + 'notification' + ], + components: { + Status, StillImage, UserCardContent + }, + methods: { + toggleUserExpanded () { + this.userExpanded = !this.userExpanded + } + } +} + +export default Notification diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue new file mode 100644 index 00000000..74563ff9 --- /dev/null +++ b/src/components/notification/notification.vue @@ -0,0 +1,35 @@ + + + diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 19f767ab..f8314bfc 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -1,14 +1,11 @@ -import Status from '../status/status.vue' -import StillImage from '../still-image/still-image.vue' -import UserCardContent from '../user_card_content/user_card_content.vue' +import Notification from '../notification/notification.vue' import { sortBy, take, filter } from 'lodash' const Notifications = { data () { return { - visibleNotificationCount: 10, - userExpanded: false + visibleNotificationCount: 20 } }, computed: { @@ -29,7 +26,7 @@ const Notifications = { } }, components: { - Status, StillImage, UserCardContent + Notification }, watch: { unseenCount (count) { @@ -43,9 +40,6 @@ const Notifications = { methods: { markAsSeen () { this.$store.commit('markNotificationsAsSeen', this.visibleNotifications) - }, - toggleUserExpanded () { - this.userExpanded = !this.userExpanded } } } diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 73a70a14..b0136426 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -41,7 +41,11 @@ flex: 1; flex-wrap: nowrap; padding: 0.6em; + min-width: 0; .status-el { + .status { + padding: 0.25em 0; + } padding: 0; .status-content.media-body { margin: 0; @@ -49,13 +53,18 @@ } } + .follow-text { + padding: 0.5em 0; + } + .status-el { flex: 1; } .notification-right { flex: 1; - margin-left: 0.8em; + padding-left: 0.8em; + min-width: 0; } .notification-details { @@ -65,7 +74,6 @@ position: relative; overflow: hidden; width: 100%; - padding: 0.5em; flex: 1; flex-wrap: nowrap; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 99f00032..71fd2604 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -8,34 +8,7 @@
- -
- - - -
-
- -
- - {{ notification.action.user.name }} - - - {{$t('notifications.favorited_you')}} - - - - {{$t('notifications.repeated_you')}} - - - - {{$t('notifications.followed_you')}} - - - - -
-
+