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

Button is not clickable when DarkMode is on #39

Closed
lens0021 opened this issue Jan 9, 2023 · 7 comments
Closed

Button is not clickable when DarkMode is on #39

lens0021 opened this issue Jan 9, 2023 · 7 comments
Labels
bug Something isn't working

Comments

@lens0021
Copy link

lens0021 commented Jan 9, 2023

Describe the bug

The 'Load video' button is not focusable when DarkMode is on.

To Reproduce
Steps to reproduce the behavior:

  1. Install EmbedVideo and DarkMode(https://www.mediawiki.org/wiki/Extension:DarkMode)
  2. Create a page with an embeded video.
  3. Turn on the dark mode
  4. Try to click the 'Load video' button.

Expected behavior
The video should be loaded.

Screenshots
Screencast from 2023-01-09 22-59-08.webm

Technical information:

  • OS: Fedora 37
  • Browser: FireFox 108.0.1
  • Extension Version: 3.1.0 (4f645dd) 20:36, 21 November 2022
  • MediaWiki Version: 1.39.1 (8c5996d) 02:20, 7 January 2023

Additional context
Setting the z-index to 1 solves this, but maybe there is a nicer solution.

@lens0021 lens0021 added the bug Something isn't working label Jan 9, 2023
@octfx
Copy link
Member

octfx commented Jan 9, 2023

@alistair3149 may you have a look at this?

@alistair3149
Copy link
Collaborator

Do you have a live page with the issue?

@lens0021
Copy link
Author

lens0021 commented Jan 9, 2023

Do you have a live page with the issue?

https://femiwiki.com/index.php?oldid=299612&uselang=en#%EC%98%81%EC%83%81 was, but I have applied MediaWiki:Common.css for it.

@alistair3149
Copy link
Collaborator

Okay found the issue.
Dark mode applies filter to the <img> element within EmbedVideo, which changed the stacking order of the DOM elements.
It should be an upstream issue but we will also apply a fix on our end.

@alistair3149
Copy link
Collaborator

Would you mind to check if the fix works for you?

@lens0021
Copy link
Author

The patch works for my local MediaWiki instance. I am sorry I cannot test it on https://femiwiki.com because it is not my own wiki, but my team's. The release pipeline is little long to test.

@alistair3149
Copy link
Collaborator

No worries. Thanks for verifying it! Closing the issue now.

octfx added a commit that referenced this issue Jan 27, 2023
* fix: Enforce stacking order for consent element (#39)

* ci: ignore line length too long for allow attribute

* WIP: Simplify DOM structure

There are many unnessecary DOM elements in EV.
Let's remove the unneeded parts to make it lighter.
Also using the new Parsoid media structure so it stays inline with core

* WIP: reimplement alignment behaviors

* fix: enforce max-width to prevent overflow (#38)

* WIP: let container control the size of all elements

This should allow us to change everything by just adjusting the container size.
Also removed the autoresize implementation since it does not work at all,
we will revisit it later

* refactor: CSS only approach to autoresize

* refactor: Change `autoResize` parameter for `autoresize`

By setting `|autoresize=true`, EV will use all available width of the parent element

* refactor: clean up inline styles

* feat: add caption styles

* style: address PHPCP errors

---------

Co-authored-by: H. C. Kruse <hannes@octofox.de>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants