VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/338611 )
Change subject: demos: Replace `table` in button style showcase with responsive
layout
......................................................................
demos: Replace `table` in button style showcase with responsive layout
Replacing `table` in button style showcase with `div` based layout,
which doesn't cause horizontal scrollbar on small viewports.
Also unifying `margin`s of example buttons with widgets elsewhere.
Change-Id: Ia8f7a36604cf50b87eabcf5e32ef516e56acff92
---
M demos/pages/widgets.js
M demos/pages/widgets.php
M demos/styles/demo.css
3 files changed, 17 insertions(+), 14 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/11/338611/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 3ab813a..261f163 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -253,19 +253,16 @@
}
];
buttonStyleShowcaseWidget = new OO.ui.Widget();
- $table = $( '<table>' );
+ buttonStyleShowcaseWidget.$element.addClass(
'oo-ui-demoButtonStyleShowcaseWidget' );
$.each( styles, function ( i, style ) {
- var $tableRow = $( '<tr>' );
+ var $buttonRow = $( '<div>' );
$.each( states, function ( j, state ) {
- var $tableCell = $( '<td>' );
- $tableCell.append(
+ $buttonRow.append(
new OO.ui.ButtonWidget( $.extend( {}, style,
state ) ).$element
);
- $tableRow.append( $tableCell );
} );
- $table.append( $tableRow );
+ buttonStyleShowcaseWidget.$element.append( $buttonRow );
} );
- buttonStyleShowcaseWidget.$element.append( $table );
fieldsets = [
new OO.ui.FieldsetLayout( {
diff --git a/demos/pages/widgets.php b/demos/pages/widgets.php
index c2c5567..4ec5196 100644
--- a/demos/pages/widgets.php
+++ b/demos/pages/widgets.php
@@ -74,19 +74,16 @@
],
];
$buttonStyleShowcaseWidget = new OOUI\Widget();
-$table = new OOUI\Tag( 'table' );
+$buttonStyleShowcaseWidget->addClasses( [
'oo-ui-demoButtonStyleShowcaseWidget' ] );
foreach ( $styles as $style ) {
- $tableRow = new OOUI\Tag( 'tr' );
+ $buttonRow = new OOUI\Tag( 'div' );
foreach ( $states as $state ) {
- $tableCell = new OOUI\Tag( 'td' );
- $tableCell->appendContent(
+ $buttonRow->appendContent(
new OOUI\ButtonWidget( array_merge( $style, $state, [
'infusable' => true ] ) )
);
- $tableRow->appendContent( $tableCell );
}
- $table->appendContent( $tableRow );
+ $buttonStyleShowcaseWidget->appendContent( $buttonRow );
}
-$buttonStyleShowcaseWidget->appendContent( $table );
$demoContainer->appendContent( new OOUI\FieldsetLayout( [
'infusable' => true,
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index 6dadc41..0ad81bb 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -82,6 +82,10 @@
/* Widgets demo */
+.oo-ui-demoButtonStyleShowcaseWidget > div {
+ margin-bottom: 0.5em;
+}
+
.oo-ui-horizontalLayout > .oo-ui-textInputWidget,
.oo-ui-horizontalLayout > .oo-ui-dropdownInputWidget {
max-width: 10em;
@@ -287,6 +291,11 @@
.oo-ui-demo-console-toggle {
margin-right: -2em;
}
+
+ /* Widgets */
+ .oo-ui-demoButtonStyleShowcaseWidget .oo-ui-buttonWidget {
+ margin-bottom: 0.5em;
+ }
}
@media ( min-width: 751px ) {
--
To view, visit https://gerrit.wikimedia.org/r/338611
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ia8f7a36604cf50b87eabcf5e32ef516e56acff92
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
