VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/334711 )
Change subject: Improve demo layout on mobile and fix various glitches
......................................................................
Improve demo layout on mobile and fix various glitches
Making demo layout work on mobile viewports and bringing it
closer to reality:
- Reducing `padding` to be able to use toggles on mobile and show
more content in icons demo in upcoming
I95bdaffbeea8b6749e1b2dc349d6f645ddea61da
- Changing `font-size` on tablets and below to `1em` to better resemble
usage
- Letting console toggles behave correctly on wider viewports
Also using WCAG conformant color from WikimediaUI palette for errors
in console.
Change-Id: I317f00a57463525235d94ee7670f81af72ebc5e4
---
M demos/styles/demo.css
1 file changed, 49 insertions(+), 25 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/11/334711/1
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index 9559837..a3a61e7 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -9,6 +9,11 @@
}
/* Layout */
+.oo-ui-demo {
+ max-width: 62.5em;
+ margin: 0 auto;
+}
+
.oo-ui-demo-menu > .oo-ui-widget {
display: inline-block;
vertical-align: middle;
@@ -19,33 +24,11 @@
width: 10em;
}
-.oo-ui-demo {
- max-width: 62.5em;
- margin: 0 auto;
-}
-
.oo-ui-demo-container {
+ /* Needed for applying `padding` further below */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-}
-
-@media ( max-width: 750px ) {
- .oo-ui-demo-menu {
- margin-bottom: 1em;
- }
- .oo-ui-demo-container {
- padding: 1em 2em;
- }
-}
-
-@media ( min-width: 751px ) {
- .oo-ui-demo-menu {
- margin-bottom: 2em;
- }
- .oo-ui-demo-container {
- padding: 2em 4em;
- }
}
/* Toolbars demo */
@@ -124,7 +107,6 @@
.oo-ui-demo-console-toggle {
float: right;
margin-top: -2em;
- margin-right: -2em;
cursor: pointer;
-webkit-transition: background-color 100ms, color 100ms, transform
100ms;
-moz-transition: background-color 100ms, color 100ms, transform 100ms;
@@ -198,7 +180,7 @@
}
.oo-ui-demo-console-log-line-error {
- color: #f00;
+ color: #d33;
}
.oo-ui-demo-console-label {
@@ -255,4 +237,46 @@
background: #fff;
color: #444;
}
+
+/* Special cases: ActionFieldLayout top aligned,
+FieldLayout left & right aligned */
+.oo-ui-fieldLayout-align-top.oo-ui-actionFieldLayout
.oo-ui-demo-console-toggle,
+.oo-ui-fieldLayout-align-left .oo-ui-demo-console-toggle,
+.oo-ui-fieldLayout-align-right .oo-ui-demo-console-toggle {
+ margin-right: -2em;
+}
+
+/* Media Queries */
+@media ( max-width: 750px ) {
+ body {
+ font-size: 1em;
+ }
+
+ .oo-ui-demo-menu {
+ margin-bottom: 1em;
+ }
+
+ .oo-ui-demo-menu > .oo-ui-widget {
+ margin-bottom: 1em;
+ }
+
+ .oo-ui-demo-container {
+ padding: 1em 2.5em 1em 1em;
+ }
+
+ .oo-ui-demo-console-toggle {
+ margin-right: -2em;
+ }
+}
+
+@media ( min-width: 751px ) {
+ .oo-ui-demo-menu {
+ margin-bottom: 2em;
+ }
+
+ .oo-ui-demo-container {
+ padding: 2em;
+ }
+}
+
/* stylelint-enable selector-pseudo-element-colon-notation */
--
To view, visit https://gerrit.wikimedia.org/r/334711
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I317f00a57463525235d94ee7670f81af72ebc5e4
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
