[SOL-1944] Review notes:

* Unique labelledby for modal popups * Removed stale button template parameters * Help and Reset are left aligned for smaller screens
openedx · Aug 3, 2016 · f1406ec · f1406ec
1 parent 76afa67
commit f1406ec
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/drag_and_drop_v2/public/css/drag_and_drop.css b/drag_and_drop_v2/public/css/drag_and_drop.css
@@ -420,6 +420,7 @@
 .xblock--drag-and-drop .actions-toolbar {
     min-height: 3.75em;
     width: auto;
+    position: relative;
 }
 
 .xblock--drag-and-drop .actions-toolbar .action-toolbar-item {
@@ -434,21 +435,34 @@
 }
 
 .xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
-    float: right;
-    margin: 0;
+    text-align: left;
+    display: block;
+}
+
+@media (min-width: 768px) {
+    .xblock--drag-and-drop .actions-toolbar .action-toolbar-item.sidebar-buttons {
+        position: absolute;
+        right: 0;
+        margin: 0;
+        padding-right: -5px;
+    }
 }
 
 .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper {
     border-right: 1px solid #ddd;
     border-collapse: collapse;
-    padding-right: 5px;
-    margin-left: 5px;
+    padding: 0 5px;
     display: inline-block;
     height: 100%;
 }
 
+.xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper:first-child {
+    padding-left: 0;
+}
+
 .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper:last-child {
     border-right: none;
+    padding-right: 0;
 }
 
 .xblock--drag-and-drop .sidebar-buttons .btn-brand {

diff --git a/drag_and_drop_v2/public/js/drag_and_drop.js b/drag_and_drop_v2/public/js/drag_and_drop.js
@@ -197,12 +197,13 @@ function DragAndDropTemplates(configuration) {
     };
 
     var keyboardHelpPopupTemplate = function(ctx) {
+        var labelledby_id = 'modal-window-title-'+configuration.url_name;
         return (
             h('div.keyboard-help-dialog', [
                 h('div.modal-window-overlay'),
-                h('div.modal-window', {attributes: {role: 'dialog', 'aria-labelledby': 'modal-window-title'}}, [
+                h('div.modal-window', {attributes: {role: 'dialog', 'aria-labelledby': labelledby_id}}, [
                     h('div.modal-header', [
-                        h('h2.modal-window-title#modal-window-title', gettext('Keyboard Help'))
+                        h('h2.modal-window-title#'+labelledby_id, gettext('Keyboard Help'))
                     ]),
                     h('div.modal-content', [
                         h('p', gettext('You can complete this problem using only your keyboard.')),
@@ -238,7 +239,7 @@ function DragAndDropTemplates(configuration) {
         );
     };
 
-    var sidebarButtonTemplate = function(buttonClass, iconClass, buttonText, disabled, tabindex) {
+    var sidebarButtonTemplate = function(buttonClass, iconClass, buttonText, disabled) {
         return (
             h('span.sidebar-button-wrapper', {}, [
                 h(