From bb6b95a52bb17fbee78b687d4cc4a21293d036b4 Mon Sep 17 00:00:00 2001 From: Bryan Huh Date: Thu, 11 May 2017 21:33:57 -0700 Subject: [PATCH] Fix: Set media viewers' settings menu dimensions with javascript This fixes a bug for when the localized items in the menu would not fit in the menu's fixed width size set by CSS. This will also pave the way for adding more dynamic submenus, e.g. when there are a variable number of subtitles or audio tracks. We could have made the width/height dynamically adjust using width=auto or height=auto. But then CSS transitions don't work. So I resort to a small amount of javascript in this commit to adjust dimensions dynamically. Also, in order to have labels and values all be vertically aligned as a column, I use CSS to give a table layout (display: table). This brings an additional advantage for screen-readers - the label text (e.g. SPEED) is no longer seen as in-line with the value (e.g. Normal), so screen-readers will read them as separate words. --- src/lib/viewers/media/Settings.js | 30 +++- src/lib/viewers/media/Settings.scss | 152 +++++++----------- .../viewers/media/__tests__/Settings-test.js | 17 ++ 3 files changed, 102 insertions(+), 97 deletions(-) diff --git a/src/lib/viewers/media/Settings.js b/src/lib/viewers/media/Settings.js index 146a0bee2..e65fdd18c 100644 --- a/src/lib/viewers/media/Settings.js +++ b/src/lib/viewers/media/Settings.js @@ -20,7 +20,7 @@ const MEDIA_SPEEDS = [ ]; const SETTINGS_TEMPLATE = `
-
+