jenkins-bot has submitted this change and it was merged.
Change subject: demo: Stop inline consoles from generating white space
......................................................................
demo: Stop inline consoles from generating white space
Only apply margin: 0.5em 0; to the consoles when expanded, match the
1px border with negative margin. The demo had more spacing between
field layouts than in real usage.
Also:
* Display the toggle button closer to the actual widget (the
improvement is most pronounced for inline layouts).
* Don't use calc() in CSS, few browsers support it; implemented the
same effect with box-sizing: border-box and some margins.
* Display the console in full width rather than 60%.
* Don't hide the toggle on smaller screens (no reason to do it).
Change-Id: Ie540a672c4bd4c236246b8426dc5f88a432deb47
---
M demos/styles/demo.css
1 file changed, 19 insertions(+), 13 deletions(-)
Approvals:
Esanders: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index 03229d1..1da6fd9 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -43,9 +43,6 @@
.oo-ui-demo-container {
padding: 1em 2em;
}
- .oo-ui-demo-console {
- display: none;
- }
}
@media (min-width: 751px) {
@@ -118,25 +115,30 @@
.oo-ui-demo-console {
clear: both;
- float: right;
position: relative;
- margin: 0.5em 0;
border: 1px solid transparent;
+ margin-bottom: -2px;
line-height: 1.4;
}
.oo-ui-demo-console-expanded {
- width: 60%;
+ width: 100%;
border-color: #aaa;
+ margin: 0.5em 0;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.oo-ui-demo-console-toggle {
- position: absolute;
- bottom: 100%;
- margin-bottom: 1em;
- margin-right: -3em;
- right: 0;
+ float: right;
+ margin-top: -2em;
+ margin-right: -2em;
cursor: pointer;
+}
+
+.oo-ui-demo-console-expanded .oo-ui-demo-console-toggle {
+ margin-top: -2.5em;
}
.oo-ui-demo-console-toggle::after {
@@ -149,7 +151,6 @@
color: #999;
text-align: center;
content: "→";
- cursor: pointer;
}
.oo-ui-demo-console-toggle:hover::after,
@@ -203,9 +204,14 @@
.oo-ui-demo-console-label {
position: relative;
display: inline-block;
- width: calc(100% - 40px);
+ width: 100%;
padding-left: 20px;
+ padding-right: 20px;
+ margin-right: -20px;
cursor: pointer;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.oo-ui-demo-console-label::before {
--
To view, visit https://gerrit.wikimedia.org/r/189328
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie540a672c4bd4c236246b8426dc5f88a432deb47
Gerrit-PatchSet: 4
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
