Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/189328
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, and use
outline rather than border. 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, 23 insertions(+), 19 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/28/189328/1
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index 03229d1..581423d 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) {
@@ -117,39 +114,41 @@
/* Console */
.oo-ui-demo-console {
- clear: both;
- float: right;
- position: relative;
- margin: 0.5em 0;
- border: 1px solid transparent;
line-height: 1.4;
+ position: relative;
+ clear: both;
}
.oo-ui-demo-console-expanded {
- width: 60%;
- border-color: #aaa;
+ width: 100%;
+ outline: 1px solid #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 {
position: relative;
display: inline-block;
width: 1.6em;
- background: #f9f9f9;
- border-radius: 50%;
line-height: 1.6em;
+ border-radius: 50%;
+ background: #f9f9f9;
color: #999;
text-align: center;
content: "→";
- cursor: pointer;
}
.oo-ui-demo-console-toggle:hover::after,
@@ -203,9 +202,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: newchange
Gerrit-Change-Id: Ie540a672c4bd4c236246b8426dc5f88a432deb47
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
