Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): adjust z-index of Embedded Media Player and sticky header #2848

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

shuuji3
Copy link
Member

@shuuji3 shuuji3 commented Apr 23, 2024

fix #2847 by adjusting z-index values

After fix

Screenshot from 2024-04-23 22-56-02

Screenshot from 2024-04-23 22-56-44

Copy link

stackblitz bot commented Apr 23, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link

netlify bot commented Apr 23, 2024

Deploy Preview for elk-docs canceled.

Name Link
🔨 Latest commit 7951c6d
🔍 Latest deploy log https://app.netlify.com/sites/elk-docs/deploys/6627be9966c81600080f9453

Copy link

netlify bot commented Apr 23, 2024

Deploy Preview for elk-zone ready!

Name Link
🔨 Latest commit 7951c6d
🔍 Latest deploy log https://app.netlify.com/sites/elk-zone/deploys/6627be995ab5880008f80309
😎 Deploy Preview https://deploy-preview-2848--elk-zone.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@@ -27,7 +27,7 @@ const containerClass = computed(() => {
<template>
<div ref="container" :class="containerClass">
<div
sticky top-0 z10
sticky top-0 z-20
Copy link
Member Author

@shuuji3 shuuji3 Apr 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bottom menu has z-20 so I used the same value and set the z-index of media player to z-10:

absolute inset-x-0 top-auto bottom-full z-20 h-100vh

@@ -90,7 +90,7 @@ function activate() {
</button>
</div>
<!-- Results -->
<div left-0 top-11 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
<div left-0 top-11 absolute w-full z-10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not related to the fix but all other z-index have the prefix z- so use the same format for better code discoverability.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Play button of Embedded Media Player is above header and bottom navbar
1 participant