Page MenuHomePhabricator

"caption-container" CSS class is used by both TimedMediaHandler beta and GallerySlideshow.js, causing display issues
Closed, ResolvedPublic

Description

The caption-container CSS class is used by both the GallerySlideShow gadget and the VideoJS Player (part of TimedMediaHandler). Since the selectors are not specific enough, the rules cause display issues on Wikimedia Commons when both the gadget and the "New video player" beta feature are enabled.

The CSS rule for TimedMediaHandler is

.caption-container{position:fixed;width:100%;bottom:10vh}

and the CSS rules for GallerySlideshow are

div.loader,div.slideshow a.advance-link,.caption-container{width:100%}
div.caption-container{font-size:1.5em;width:20%;min-width:180px;max-width:320px;position:relative;display:inline-block;vertical-align:top}

Since GallerySlideshow is older and does not appear to be actively developed, I would suggest changing the class name and selector specificity in TimedMediaHandler. (In general, I think it would be best to make the TimedMediaHandler CSS class names less generic.)

Event Timeline

Jc86035 created this task.Aug 17 2019, 11:21 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 17 2019, 11:21 AM
Jc86035 updated the task description. (Show Details)Aug 17 2019, 1:05 PM
TheDJ added a subscriber: TheDJ.Sep 5 2019, 10:57 AM

i'll rename and prefix this class soon.

TheDJ claimed this task.Sep 5 2019, 10:58 AM
TheDJ closed this task as Resolved.EditedJan 29 2020, 11:14 PM
TheDJ edited projects, added VideoJS player; removed Kaltura player.

this audio caption ui was since removed