From f19284357e94968cdc9d4034c5e33ef9d6f6d9d7 Mon Sep 17 00:00:00 2001 From: shpuld Date: Thu, 14 Mar 2019 17:46:04 +0200 Subject: [PATCH] make nav bar slide, move mobile post status to mobile nav --- src/App.scss | 72 --------------- src/App.vue | 7 -- src/components/mobile_nav/mobile_nav.js | 14 ++- src/components/mobile_nav/mobile_nav.vue | 91 ++++++++++++++++++- src/components/notifications/notifications.js | 3 + .../notifications/notifications.vue | 2 +- 6 files changed, 105 insertions(+), 84 deletions(-) diff --git a/src/App.scss b/src/App.scss index 8f727cf8..539c9787 100644 --- a/src/App.scss +++ b/src/App.scss @@ -484,24 +484,6 @@ nav { } } -.menu-button { - display: none; - position: relative; -} - -.alert-dot { - border-radius: 100%; - height: 8px; - width: 8px; - position: absolute; - left: calc(50% - 4px); - top: calc(50% - 4px); - margin-left: 6px; - margin-top: -6px; - background-color: $fallback--cRed; - background-color: var(--badgeNotification, $fallback--cRed); -} - .fade-enter-active, .fade-leave-active { transition: opacity .2s } @@ -530,20 +512,6 @@ nav { display: none; } -.panel-switcher { - display: none; - width: 100%; - height: 46px; - - button { - display: block; - flex: 1; - max-height: 32px; - margin: 0.5em; - padding: 0.5em; - } -} - @media all and (min-width: 800px) { body { overflow-y: scroll; @@ -671,46 +639,6 @@ nav { border-radius: var(--inputRadius, $fallback--inputRadius); } -.mobile-notifications { - position: fixed; - width: 100vw; - height: 100vh; - top: calc(50px - 28px - 1.2em); - left: 0; - z-index: 999; - overflow-x: hidden; - overflow-y: scroll; - transition-property: transform; - transition-duration: 0.25s; - transform: translate(0); - - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); - - .notifications { - margin: 0; - padding: 0; - border-radius: 0; - box-shadow: none; - .panel { - border-radius: 0; - margin: 0; - box-shadow: none; - } - .panel:after { - border-radius: 0; - } - .panel .panel-heading { - border-radius: 0; - box-shadow: none; - } - } - - &.closed { - transform: translate(100%); - } -} - @keyframes modal-background-fadein { from { background-color: rgba(0, 0, 0, 0); diff --git a/src/App.vue b/src/App.vue index 54155831..3b8623ad 100644 --- a/src/App.vue +++ b/src/App.vue @@ -46,13 +46,6 @@ -
- -
- -
-
- diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js index a79aa636..88fab656 100644 --- a/src/components/mobile_nav/mobile_nav.js +++ b/src/components/mobile_nav/mobile_nav.js @@ -1,11 +1,13 @@ import SideDrawer from '../side_drawer/side_drawer.vue' import Notifications from '../notifications/notifications.vue' +import MobilePostStatusModal from '../mobile_post_status_modal/mobile_post_status_modal.vue' import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' const MobileNav = { components: { SideDrawer, - Notifications + Notifications, + MobilePostStatusModal }, data: () => ({ notificationsOpen: false @@ -25,9 +27,19 @@ const MobileNav = { }, toggleMobileNotifications () { this.notificationsOpen = !this.notificationsOpen + if (!this.notificationsOpen) { + this.markNotificationsAsSeen() + } }, scrollToTop () { window.scrollTo(0, 0) + }, + logout () { + this.$router.replace('/main/public') + this.$store.dispatch('logout') + }, + markNotificationsAsSeen () { + this.$refs.notifications.markAsSeen() } } } diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 8f682c39..af2d6d5a 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -1,6 +1,6 @@ diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 9fc5e38a..d3db4b29 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -7,6 +7,9 @@ import { } from '../../services/notification_utils/notification_utils.js' const Notifications = { + props: [ + 'noHeading' + ], created () { const store = this.$store const credentials = store.state.users.currentUser.credentials diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 6f162b62..634a03ac 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -1,7 +1,7 @@