[MediaWiki-commits] [Gerrit] oojs/ui[master]: demos: Increase and strengthen responsive support
jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/355777 )
Change subject: demos: Increase and strengthen responsive support
..
demos: Increase and strengthen responsive support
By making use of `@supports( position: fixed )` we achieve two things:
1) Circumventing the hassle with weak support of the property
in older mobile browsers with strong and still usable fallback and
2) providing the best experience for devs in their modern browsers
Also changing media query values to be closer to device and design
reality.
This change brings Apex layout closer to WikimediaUI for the sake of
code simplicity without negatively impacting the very demos.
Bug: T165659
Change-Id: I8c2a1999e01eb7bca3410148ab91bbce41cffe3b
---
M demos/demo.js
M demos/styles/demo.css
2 files changed, 98 insertions(+), 23 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/demo.js b/demos/demo.js
index 072b360..3c8dc00 100644
--- a/demos/demo.js
+++ b/demos/demo.js
@@ -64,6 +64,7 @@
this.documentationLink = new OO.ui.ButtonWidget( {
label: 'Docs',
+ classes: [ 'demo-button-docs' ],
icon: 'journal',
href: '../js/',
flags: [ 'progressive' ]
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index e8c3045..27d76e4 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -1,6 +1,7 @@
body {
color: #222;
- margin: 1em;
+ margin: 0 1em;
+ padding: 0;
font-family: sans-serif;
font-size: 0.8em;
}
@@ -16,18 +17,10 @@
}
.demo-menu {
- background-color: #fff;
- position: fixed;
- top: 0;
- z-index: 1;
- width: 62.5em;
- padding-top: 1em;
- /* To better hide Apex's large drop shadows */
- margin-left: -1em;
- padding-left: 1em;
- padding-right: 1em;
- /* Support: Android < 5, iOS < 8 to tame their buggy behaviour */
- -webkit-backface-visibility: hidden;
+ min-width: 320px; /* Let's not pretend it works on anything lower then
that */
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.demo-menu > .oo-ui-widget {
@@ -46,11 +39,6 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-}
-
-/* This needs extra specificity to beat PanelLayout styles */
-.oo-ui-panelLayout.demo-container {
- margin-top: 5em;
}
/* Console */
@@ -307,8 +295,32 @@
padding: 1em 1em 1.5em 1em;
}
+/*
+ * Support: iOS 9.2, Android 4.4.4, Op Mobile 37, Chrome/Android 57,
Fx/Android 52, UC Browser 11.4, Baidu 7.12
+ * Workaround for weak ancient mobile browser support of `fixed` positioning
+ */
+@supports ( position: fixed ) {
+ .demo-menu {
+ background-color: #fff;
+ position: fixed;
+ top: 0;
+ border-bottom: 1px solid #a2a9b1;
+ padding-top: 1em;
+ box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.25 );
+ z-index: 99;
+ }
+
+ /* This needs extra specificity to beat PanelLayout styles */
+ .demo-container.oo-ui-panelLayout {
+ /* Apex overrides. WikimediaUI wins for now in the demo framing
in this browser subset */
+ border-color: #a2a9b1;
+ border-radius: 2px;
+ box-shadow: none;
+ }
+}
+
/* Media Queries */
-@media ( max-width: 750px ) {
+@media ( min-width: 320px ) {
body {
font-size: 1em;
}
@@ -330,12 +342,74 @@
.demo-console-toggle {
margin-right: -2em;
}
-}
-@media ( min-width: 751px ) {
- .demo-container {
- padding: 2em;
+ @supports ( position: fixed ) {
+ .demo-menu {
+ min-height: 11.4em;
+ left: 1em;
+ right: 1em;
+ }
+
+ /* Hide “Docs“ Button on very small screens */
+ .demo-menu > .demo-button-docs {
+ display: none;
+ }
+
+ /* This needs extra specificity to beat PanelLayout styles */
+ .demo-container.oo-ui-panelLayout {
+ margin-top: 11.4em;
+ }
}
}
+@media ( min-width: 568px ) {
+ @supports ( position: fixed ) {
+ .demo-menu {
+ min-height: 7.5em;
+ }
+
+ .demo-menu > .demo-button-docs {
+ display: inline-block;
+ }
+
+ .demo-container.oo-ui-panelLayout {
+ margin-top: 7.5em;
+ }
+ }
+}
+
+@media ( min-width: 768px ) {
+ .demo-console-toggle {
+
[MediaWiki-commits] [Gerrit] oojs/ui[master]: demos: Increase and strengthen responsive support
VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/355777 )
Change subject: demos: Increase and strengthen responsive support
..
demos: Increase and strengthen responsive support
By making use of `@supports( position: fixed )` we achieve two things:
1) Circumventing the hassle with weak support of the property
in older mobile browsers with strong and still usable fallback and
2) providing the best experience for devs in their modern browsers
Also changing media query values to be closer to device and design
reality.
This change brings Apex layout closer to WikimediaUI for the sake of
code simplicity without negatively impacting the very demos.
Bug: T165659
Change-Id: I8c2a1999e01eb7bca3410148ab91bbce41cffe3b
---
M demos/demo.js
M demos/styles/demo.css
2 files changed, 98 insertions(+), 23 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/77/355777/1
diff --git a/demos/demo.js b/demos/demo.js
index 072b360..3c8dc00 100644
--- a/demos/demo.js
+++ b/demos/demo.js
@@ -64,6 +64,7 @@
this.documentationLink = new OO.ui.ButtonWidget( {
label: 'Docs',
+ classes: [ 'demo-button-docs' ],
icon: 'journal',
href: '../js/',
flags: [ 'progressive' ]
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index e8c3045..e330e82 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -1,6 +1,7 @@
body {
color: #222;
- margin: 1em;
+ margin: 0 1em;
+ padding: 0;
font-family: sans-serif;
font-size: 0.8em;
}
@@ -16,18 +17,10 @@
}
.demo-menu {
- background-color: #fff;
- position: fixed;
- top: 0;
- z-index: 1;
- width: 62.5em;
- padding-top: 1em;
- /* To better hide Apex's large drop shadows */
- margin-left: -1em;
- padding-left: 1em;
- padding-right: 1em;
- /* Support: Android < 5, iOS < 8 to tame their buggy behaviour */
- -webkit-backface-visibility: hidden;
+ min-width: 320px; /* Let's not pretend it works on anything lower then
that */
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.demo-menu > .oo-ui-widget {
@@ -46,11 +39,6 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-}
-
-/* This needs extra specificity to beat PanelLayout styles */
-.oo-ui-panelLayout.demo-container {
- margin-top: 5em;
}
/* Console */
@@ -307,8 +295,31 @@
padding: 1em 1em 1.5em 1em;
}
+/*
+ * Support: iOS 9.2, Android 4.4.4, Op Mobile 37, Chrome/Android 57,
Fx/Android 52, UC Browser 11.4, Baidu 7.12
+ * Workaround for weak ancient mobile browser support of `fixed` positioning
+ */
+@supports( position: fixed ) {
+ .demo-menu {
+ background-color: #fff;
+ position: fixed;
+ top: 0;
+ border-bottom: 1px solid #a2a9b1;
+ padding-top: 1em;
+ box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.25 );
+ z-index: 99;
+ }
+ /* This needs extra specificity to beat PanelLayout styles */
+ .demo-container.oo-ui-panelLayout {
+ /* Apex overrides. WikimediaUI wins for now in the demo
framing in this browser subset */
+ border-color: #a2a9b1;
+ border-radius: 2px;
+ box-shadow: none;
+ }
+}
+
/* Media Queries */
-@media ( max-width: 750px ) {
+@media ( min-width: 320px ) {
body {
font-size: 1em;
}
@@ -330,12 +341,75 @@
.demo-console-toggle {
margin-right: -2em;
}
-}
-@media ( min-width: 751px ) {
- .demo-container {
- padding: 2em;
+ @supports( position: fixed ) {
+ .demo-menu {
+ min-height: 11.4em;
+ left: 1em;
+ right: 1em;
+ }
+
+ /* Hide “Docs“ Button on very small screens */
+ .demo-menu > .demo-button-docs {
+ display: none;
+ }
+
+ /* This needs extra specificity to beat PanelLayout styles */
+ .demo-container.oo-ui-panelLayout {
+ margin-top: 11.4em;
+ }
}
}
+@media ( min-width: 568px ) {
+ @supports( position: fixed ) {
+ .demo-menu {
+ min-height: 7.5em;
+ }
+
+ .demo-menu > .demo-button-docs {
+ display: inline-block;
+ }
+
+ .demo-container.oo-ui-panelLayout {
+ margin-top: 7.5em;
+ }
+ }
+}
+
+@media ( min-width: 768px ) {
+
