From 9b5fe24ca455af5420a326e78878ca7b35b5bf66 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jun 2022 16:52:03 +0300
Subject: [PATCH] restore notifications page, fix z-index issues
---
src/App.vue | 2 +-
src/boot/routes.js | 2 +-
src/components/notifications/notifications.js | 4 +++-
src/components/notifications/notifications.vue | 2 +-
src/components/timeline/timeline.scss | 2 +-
5 files changed, 7 insertions(+), 5 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 5b448972..21f6f686 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
/>
<MobileNav v-if="layoutType === 'mobile'" />
<DesktopNav v-else />
- <notifications v-if="currentUser" />
+ <Notifications v-if="currentUser" />
<div
id="content"
class="app-layout container"
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 905ffe41..726476a8 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -62,7 +62,7 @@ export default (store) => {
{ name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
{ name: 'registration-token', path: '/registration/:token', component: Registration },
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
- { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
+ { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
{ name: 'login', path: '/login', component: AuthForm },
{ name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index fb2579a5..82aa1489 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -27,7 +27,9 @@ const Notifications = {
// meant for "Interactions" timeline
minimalMode: Boolean,
// Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
- filterMode: Array
+ filterMode: Array,
+ // Disable teleporting (i.e. for /users/user/notifications)
+ disableTeleport: Boolean
},
data () {
return {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 794ef51d..b46c06aa 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,5 +1,5 @@
<template>
- <teleport :disabled="minimalMode" :to="teleportTarget">
+ <teleport :disabled="minimalMode || disableTeleport" :to="teleportTarget">
<div
:class="{ minimal: minimalMode }"
class="Notifications"
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index c7ea0dff..9e009fd3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -11,7 +11,7 @@
.conversation-heading {
top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
- z-index: 1;
+ z-index: 2;
}
&.-nonpanel {