aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/App.scss9
-rw-r--r--src/boot/after_store.js3
-rw-r--r--src/components/desktop_nav/desktop_nav.scss1
-rw-r--r--src/components/emoji_picker/emoji_picker.scss3
-rw-r--r--src/components/global_notice_list/global_notice_list.vue2
-rw-r--r--src/components/media_modal/media_modal.vue2
-rw-r--r--src/components/mobile_nav/mobile_nav.vue6
-rw-r--r--src/components/modal/modal.vue5
-rw-r--r--src/components/notifications/notifications.js10
-rw-r--r--src/components/popover/popover.js4
-rw-r--r--src/components/popover/popover.vue4
-rw-r--r--src/components/shout_panel/shout_panel.vue2
-rw-r--r--src/components/side_drawer/side_drawer.vue2
13 files changed, 42 insertions, 11 deletions
diff --git a/src/App.scss b/src/App.scss
index 79c07683..78835c61 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -4,6 +4,13 @@
:root {
--navbar-height: 3.5rem;
--post-line-height: 1.4;
+ // Z-Index stuff
+ --ZI_media_modal: 90000;
+ --ZI_navbar_popovers: 85000;
+ --ZI_navbar: 80000;
+ --ZI_modals_popovers: 75000;
+ --ZI_modals: 70000;
+ --ZI_popovers: 60000;
}
html {
@@ -117,7 +124,7 @@ i[class*=icon-],
}
nav {
- z-index: 1000;
+ z-index: var(--ZI_navbar);
color: var(--topBarText);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index f655c38f..894a68e1 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -396,6 +396,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
app.component('FAIcon', FontAwesomeIcon)
app.component('FALayers', FontAwesomeLayers)
+ // remove after vue 3.3
+ app.config.unwrapInjectedRef = true
+
app.mount('#app')
return app
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 0ca9802e..e9a47632 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -2,6 +2,7 @@
.DesktopNav {
width: 100%;
+ z-index: var(--ZI_navbar);
a {
color: var(--topBarLink, $fallback--link);
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 2055e02e..a2f17c51 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -7,7 +7,8 @@
right: 0;
left: 0;
margin: 0 !important;
- z-index: 100;
+ // TODO: actually use popover in emoji picker
+ z-index: var(--ZI_popovers);
background-color: $fallback--bg;
background-color: var(--popover, $fallback--bg);
color: $fallback--link;
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index ddc45b81..09904761 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -32,7 +32,7 @@
top: 50px;
width: 100%;
pointer-events: none;
- z-index: 1001;
+ z-index: var(--ZI_popovers);
display: flex;
flex-direction: column;
align-items: center;
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index b93d3d84..d59055b3 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em;
$modal-view-button-icon-margin: 0.5em;
.modal-view.media-modal-view {
- z-index: 900000;
+ z-index: var(--ZI_media_modal);
flex-direction: column;
.modal-view-button-arrow,
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index d2d48a03..c58d9e7c 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -86,6 +86,8 @@
@import '../../_variables.scss';
.MobileNav {
+ z-index: var(--ZI_navbar);
+
.mobile-nav {
display: grid;
line-height: var(--navbar-height);
@@ -147,7 +149,7 @@
transition-property: transform;
transition-duration: 0.25s;
transform: translateX(0);
- z-index: 1001;
+ z-index: var(--ZI_navbar);
-webkit-overflow-scrolling: touch;
&.-closed {
@@ -160,7 +162,7 @@
display: flex;
align-items: center;
justify-content: space-between;
- z-index: 1;
+ z-index: calc(var(--ZI_navbar) + 100);
width: 100%;
height: 50px;
line-height: 50px;
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 9394efff..52d8d27e 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -22,6 +22,9 @@ export default {
default: false
}
},
+ provide: {
+ popoversZLayer: 'modals'
+ },
computed: {
classes () {
return {
@@ -35,7 +38,7 @@ export default {
<style lang="scss">
.modal-view {
- z-index: 2000;
+ z-index: var(--ZI_modals);
position: fixed;
top: 0;
left: 0;
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index fb2579a5..63d827d8 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,3 +1,4 @@
+import { computed } from 'vue'
import { mapGetters } from 'vuex'
import Notification from '../notification/notification.vue'
import NotificationFilters from './notification_filters.vue'
@@ -38,6 +39,11 @@ const Notifications = {
seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
}
},
+ provide () {
+ return {
+ popoversZLayer: computed(() => this.popoversZLayer)
+ }
+ },
computed: {
mainClass () {
return this.minimalMode ? '' : 'panel panel-default'
@@ -75,6 +81,10 @@ const Notifications = {
}
return map[layoutType] || '#notifs-sidebar'
},
+ popoversZLayer () {
+ const { layoutType } = this.$store.state.interface
+ return layoutType === 'mobile' ? 'navbar' : null
+ },
notificationsToDisplay () {
return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
},
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index cff9b174..5dfcf810 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -42,6 +42,7 @@ const Popover = {
// What selector (witin popover!) to use for determining center of popover
overlayCentersSelector: String
},
+ inject: ['popoversZLayer'], // override popover z layer
data () {
return {
hidden: true,
@@ -168,6 +169,9 @@ const Popover = {
top: `${Math.round(translateY)}px`
}
+ if (this.popoversZLayer) {
+ this.styles['--ZI_popover_override'] = `var(--ZI_${this.popoversZLayer}_popovers)`
+ }
if (parentScreenBox) {
this.styles.maxWidth = `${Math.round(parentScreenBox.width)}px`
}
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 0d37328e..f854515c 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -43,7 +43,7 @@
}
.popover {
- z-index: 90000;
+ z-index: var(--ZI_popover_override, var(--ZI_popovers));
position: fixed;
min-width: 0;
max-width: calc(100vw - 20px);
@@ -87,7 +87,7 @@
text-align: left;
list-style: none;
max-width: 100vw;
- z-index: 200;
+ z-index: var(--ZI_popover_override, var(--ZI_popovers));
white-space: nowrap;
.dropdown-divider {
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index 1eca88a7..688c2d61 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -80,7 +80,7 @@
.floating-shout {
position: fixed;
bottom: 0.5em;
- z-index: 1000;
+ z-index: var(--ZI_popovers);
max-width: 25em;
&.-left {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index dd88de7d..aefd3915 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -211,7 +211,7 @@
.side-drawer-container {
position: fixed;
- z-index: 1000;
+ z-index: var(--ZI_navbar);
top: 0;
left: 0;
width: 100%;
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 10:11:01 +0000