diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 4 | ||||
| -rw-r--r-- | src/App.scss | 24 | ||||
| -rw-r--r-- | src/App.vue | 8 |
3 files changed, 34 insertions, 2 deletions
@@ -26,6 +26,7 @@ export default { }, data: () => ({ mobileActivePanel: 'timeline', + notificationsOpen: false, finderHidden: true, supportsMask: window.CSS && window.CSS.supports && ( window.CSS.supports('mask-size', 'contain') || @@ -101,6 +102,9 @@ export default { }, toggleMobileSidebar () { this.$refs.sideDrawer.toggleDrawer() + }, + toggleMobileNotifications () { + this.notificationsOpen = !this.notificationsOpen } } } diff --git a/src/App.scss b/src/App.scss index 7c6970c1..3edc41a0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -661,6 +661,28 @@ nav { border-radius: var(--inputRadius, $fallback--inputRadius); } +.mobile-notifications { + position: fixed; + width: 100vw; + height: 100vh; + top: 50px; + left: 0; + z-index: 1001; + overflow-x: hidden; + overflow-y: scroll; + transition-property: transform; + transition-duration: 0.35s; + transform: translate(0); + + .notifications { + padding: 0; + } + + &.closed { + transform: translate(100%); + } +} + @keyframes shakeError { 0% { transform: translateX(0); @@ -723,7 +745,7 @@ nav { .login-hint { text-align: center; - + @media all and (min-width: 801px) { display: none; } diff --git a/src/App.vue b/src/App.vue index acbbeb75..aad84804 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,7 +10,6 @@ <div class='item'> <a href="#" class="menu-button" @click.stop.prevent="toggleMobileSidebar()"> <i class="button-icon icon-menu"></i> - <div class="alert-dot" v-if="unseenNotificationsCount"></div> </a> <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link> </div> @@ -18,11 +17,18 @@ <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder> <router-link class="mobile-hidden" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link> <a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a> + <a href="#" class="menu-button" @click.stop.prevent="toggleMobileNotifications()"> + <i class="button-icon icon-bell-alt"></i> + <div class="alert-dot" v-if="unseenNotificationsCount"></div> + </a> </div> </div> </nav> <div v-if="" class="container" id="content"> <side-drawer ref="sideDrawer" :logout="logout"></side-drawer> + <div class="mobile-notifications" :class="{ 'closed': !notificationsOpen }"> + <notifications/> + </div> <div class="sidebar-flexer mobile-hidden"> <div class="sidebar-bounds"> <div class="sidebar-scroller"> |