Commit 0a90af25 authored by webchick's avatar webchick
Browse files

Issue #2102019 by nod_: Fixed Vertical tabs looks broken on small screens.

parent 5b24f7bc
...@@ -4067,7 +4067,7 @@ function form_pre_render_vertical_tabs($element) { ...@@ -4067,7 +4067,7 @@ function form_pre_render_vertical_tabs($element) {
*/ */
function theme_vertical_tabs($variables) { function theme_vertical_tabs($variables) {
$element = $variables['element']; $element = $variables['element'];
return '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>'; return '<div data-vertical-tabs-panes>' . $element['#children'] . '</div>';
} }
/** /**
......
...@@ -20,8 +20,8 @@ Drupal.behaviors.verticalTabs = { ...@@ -20,8 +20,8 @@ Drupal.behaviors.verticalTabs = {
return; return;
} }
$(context).find('.vertical-tabs-panes').once('vertical-tabs', function () { $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs', function () {
var $this = $(this); var $this = $(this).addClass('vertical-tabs-panes');
var focusID = $this.find(':hidden.vertical-tabs-active-tab').val(); var focusID = $this.find(':hidden.vertical-tabs-active-tab').val();
var tab_focus; var tab_focus;
......
...@@ -121,9 +121,9 @@ function testGroupElements() { ...@@ -121,9 +121,9 @@ function testGroupElements() {
$elements = $this->xpath('//fieldset[@id="edit-fieldset"]//div[@id="edit-meta"]//label'); $elements = $this->xpath('//fieldset[@id="edit-fieldset"]//div[@id="edit-meta"]//label');
$this->assertTrue(count($elements) == 1); $this->assertTrue(count($elements) == 1);
$this->drupalGet('form-test/group-vertical-tabs'); $this->drupalGet('form-test/group-vertical-tabs');
$elements = $this->xpath('//div[@class="vertical-tabs-panes"]//details[@id="edit-meta"]//label'); $elements = $this->xpath('//div[@data-vertical-tabs-panes]//details[@id="edit-meta"]//label');
$this->assertTrue(count($elements) == 1); $this->assertTrue(count($elements) == 1);
$elements = $this->xpath('//div[@class="vertical-tabs-panes"]//details[@id="edit-meta-2"]//label'); $elements = $this->xpath('//div[@data-vertical-tabs-panes]//details[@id="edit-meta-2"]//label');
$this->assertTrue(count($elements) == 1); $this->assertTrue(count($elements) == 1);
} }
......
...@@ -55,13 +55,13 @@ function testJavaScriptOrdering() { ...@@ -55,13 +55,13 @@ function testJavaScriptOrdering() {
function testWrapperNotShownWhenEmpty() { function testWrapperNotShownWhenEmpty() {
// Test admin user can see vertical tabs and wrapper. // Test admin user can see vertical tabs and wrapper.
$this->drupalGet('form_test/vertical-tabs'); $this->drupalGet('form_test/vertical-tabs');
$wrapper = $this->xpath("//div[@class='vertical-tabs-panes']"); $wrapper = $this->xpath("//div[@data-vertical-tabs-panes]");
$this->assertTrue(isset($wrapper[0]), 'Vertical tab panes found.'); $this->assertTrue(isset($wrapper[0]), 'Vertical tab panes found.');
// Test wrapper markup not present for non-privileged web user. // Test wrapper markup not present for non-privileged web user.
$this->drupalLogin($this->web_user); $this->drupalLogin($this->web_user);
$this->drupalGet('form_test/vertical-tabs'); $this->drupalGet('form_test/vertical-tabs');
$wrapper = $this->xpath("//div[@class='vertical-tabs-panes']"); $wrapper = $this->xpath("//div[@data-vertical-tabs-panes]");
$this->assertFalse(isset($wrapper[0]), 'Vertical tab wrappers are not displayed to unprivileged users.'); $this->assertFalse(isset($wrapper[0]), 'Vertical tab wrappers are not displayed to unprivileged users.');
} }
} }
...@@ -68,15 +68,15 @@ ...@@ -68,15 +68,15 @@
.vertical-tab-button.selected a:focus { .vertical-tab-button.selected a:focus {
color: #007ecc; color: #007ecc;
} }
.vertical-tabs-panes { [data-vertical-tabs-panes] {
background-color: #fcfcfa; background-color: #fcfcfa;
} }
html.js .vertical-tabs-panes { .vertical-tabs-panes {
margin: 0 0 0 240px; /* LTR */ margin: 0 0 0 240px; /* LTR */
padding: 10px 15px 10px 15px; padding: 10px 15px 10px 15px;
border-left: 1px solid #a6a5a1; /* LTR */ border-left: 1px solid #a6a5a1; /* LTR */
} }
html.js[dir="rtl"] .vertical-tabs-panes { [dir="rtl"] .vertical-tabs-panes {
margin: 0 240px 0 0; margin: 0 240px 0 0;
border-left: none; border-left: none;
border-right: 1px solid #a6a5a1; border-right: 1px solid #a6a5a1;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment