OpenSource/Sharkey
OpenSource/Sharkey
1
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey.git synced 2024-12-15 00:55:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix(client): fix zindex issues

Browse source 
Fix #8060
This commit is contained in:
syuilo 2021-12-16 10:57:07 +09:00
parent fa8eb43eaf
commit 58b9dc581e
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/client/src/components/url-preview-popup.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="fgmtyycl" :style="{ top: top + 'px', left: left + 'px' }"> <div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
<transition name="zoom" @after-leave="$emit('closed')"> <transition name="zoom" @after-leave="$emit('closed')">
<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/> <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
</transition> </transition>
@ -35,6 +35,7 @@ export default defineComponent({
u: null, u: null,
top: 0, top: 0,
left: 0, left: 0,
zIndex: os.claimZIndex(),
}; };
}, },
@ -52,7 +53,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.fgmtyycl { .fgmtyycl {
position: absolute; position: absolute;
z-index: 11000;
width: 500px; width: 500px;
max-width: calc(90vw - 12px); max-width: calc(90vw - 12px);
pointer-events: none; pointer-events: none;

4
packages/client/src/components/user-preview.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<transition name="popup" appear @after-leave="$emit('closed')"> <transition name="popup" appear @after-leave="$emit('closed')">
<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }"> <div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
<div v-if="fetched" class="info"> <div v-if="fetched" class="info">
<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/> <MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
@ -65,6 +65,7 @@ export default defineComponent({
fetched: false, fetched: false,
top: 0, top: 0,
left: 0, left: 0,
zIndex: os.claimZIndex(),
}; };
}, },
@ -109,7 +110,6 @@ export default defineComponent({
.fxxzrfni { .fxxzrfni {
position: absolute; position: absolute;
z-index: 11000;
width: 300px; width: 300px;
overflow: hidden; overflow: hidden;
transform-origin: center top; transform-origin: center top;