[MediaWiki-commits] [Gerrit] Add menu button and hide top menu when the screen is too narrow - change (mediawiki...erudite)
Njw has submitted this change and it was merged.
Change subject: Add menu button and hide top menu when the screen is too narrow
..
Add menu button and hide top menu when the screen is too narrow
Also simplifies top menu narrowing style rules
Change-Id: I07e7c54522d7eca2fb83b64e855da032937f864a
---
M Erudite.skin.php
M assets/erudite.css
M assets/erudite20em.css
A assets/erudite55em.css
M assets/erudite60em.css
M assets/erudite66em.css
M erudite.php
7 files changed, 44 insertions(+), 29 deletions(-)
Approvals:
Njw: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/Erudite.skin.php b/Erudite.skin.php
index 1698736..165fea8 100644
--- a/Erudite.skin.php
+++ b/Erudite.skin.php
@@ -82,6 +82,7 @@
msg( 'tagline' ) ?>
+ Menu
diff --git a/assets/erudite.css b/assets/erudite.css
index ef4c8ce..35c60c3 100644
--- a/assets/erudite.css
+++ b/assets/erudite.css
@@ -197,6 +197,10 @@
}
/* Menu */
+#menubutton {
+ display: none;
+}
+
#menu {
margin: 1em 0 -0.625em;
overflow: hidden;
diff --git a/assets/erudite20em.css b/assets/erudite20em.css
index 9cb5953..83a6877 100644
--- a/assets/erudite20em.css
+++ b/assets/erudite20em.css
@@ -1,18 +1,3 @@
-#header h1 {
- font-size: 1.75em;
-}
-
-#menu {
- margin-top: 0.5em;
-}
-
-/* Stack top menu items */
-#menu li {
- float: none !important;
- border: none;
- padding: 0em;
-}
-
/* Disable text justification (user preference) */
#article, #bodyContent, #mw_content {
text-align: left !important;
diff --git a/assets/erudite55em.css b/assets/erudite55em.css
new file mode 100644
index 000..ce2560f
--- /dev/null
+++ b/assets/erudite55em.css
@@ -0,0 +1,35 @@
+/* Replace menu with a menu button */
+#menubutton {
+ display: block;
+ position: absolute;
+ right: 0.5em;
+ top: 0.75em;
+ padding: 0.25em 0.5em;
+ background-color: #33;
+background-color: rgba(50, 50, 50, 0.7);
+ color: white;
+ font-family: 'Linux Biolinum', corbel, 'gill sans', 'gill sans mt',
sans-serif;
+ font-size: large;
+ text-transform: uppercase;
+}
+
+/* Ensure header doesn't overlap with menu button */
+#header h1 {
+ margin-right: 2em;
+}
+
+/* Hide menu unless it's the target */
+#menu {
+ display: none;
+}
+
+#menu:target {
+ display: block;
+}
+
+/* Stack top menu items */
+#menu:target li {
+ float: none !important;
+ padding: 0em;
+ text-align: center;
+}
diff --git a/assets/erudite60em.css b/assets/erudite60em.css
index 993b501..61d8245 100644
--- a/assets/erudite60em.css
+++ b/assets/erudite60em.css
@@ -1,6 +1,7 @@
/* Some of the padding is best dispatched with */
#container,
#header,
+#access,
#footer-wrap-inner,
.message {
width: 100%;
diff --git a/assets/erudite66em.css b/assets/erudite66em.css
index 3c3bda1..2465920 100644
--- a/assets/erudite66em.css
+++ b/assets/erudite66em.css
@@ -1,21 +1,9 @@
-/* The top menu is likely to start wrapping, so reduce padding
- * and add a separator */
+/* The top menu may want to start wrapping, so reduce padding */
#menu {
- padding: 0.7em 1em 0.45em;
- background: rgba(50, 50, 50, 1.0);
+ padding: 0.5em 0em;
}
#menu li {
- border-right: thin solid #66;
padding: 0em 1em;
- margin-bottom: 0.3em;
margin-right: 0em;
-}
-
-#menu li:last-child {
- border-right: none;
-}
-
-#access {
- width: 100%;
}
diff --git a/erudite.php b/erudite.php
index 2a89be3..f92e0b9 100644
--- a/erudite.php
+++ b/erudite.php
@@ -31,6 +31,7 @@
'erudite/assets/erudite.css' => array( 'media' => 'screen' ),
'erudite/assets/erudite66em.css' => array( 'media' => 'screen
and (max-width: 66em)' ),
'erudite/assets/erudite60em.css' => array( 'media' => 'screen
and (max-width: 60em)' ),
+ 'erudite/assets/erudite55em.css' => array( 'media' => 'screen
and (max-width: 55em)' ),
'erudite/assets/erudite40em.css' => array( 'media' => 'screen
and (max-width: 40em)' ),
'erudite/assets/erudite20em.css' => array( 'media' => 'screen
and (max-width: 20em)' ),
'erudite/assets/print.css' => array( 'media' => 'print' ),
--
To view, visit https://gerrit.wikimedia.org/r/96248
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I07e7c54522d7eca2fb83b64e855da032937f864a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/erudite
Gerrit-Branch: master
Gerrit-Owner: Njw
Gerrit-Reviewer: Njw
Gerrit-Reviewer: jenkins-bot
___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo
[MediaWiki-commits] [Gerrit] Add menu button and hide top menu when the screen is too narrow - change (mediawiki...erudite)
Njw has uploaded a new change for review.
https://gerrit.wikimedia.org/r/96248
Change subject: Add menu button and hide top menu when the screen is too narrow
..
Add menu button and hide top menu when the screen is too narrow
Also simplifies top menu narrowing style rules
Change-Id: I07e7c54522d7eca2fb83b64e855da032937f864a
---
M Erudite.skin.php
M assets/erudite.css
M assets/erudite20em.css
A assets/erudite55em.css
M assets/erudite60em.css
M assets/erudite66em.css
M erudite.php
7 files changed, 44 insertions(+), 29 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/erudite
refs/changes/48/96248/1
diff --git a/Erudite.skin.php b/Erudite.skin.php
index 1698736..165fea8 100644
--- a/Erudite.skin.php
+++ b/Erudite.skin.php
@@ -82,6 +82,7 @@
msg( 'tagline' ) ?>
+ Menu
diff --git a/assets/erudite.css b/assets/erudite.css
index ef4c8ce..35c60c3 100644
--- a/assets/erudite.css
+++ b/assets/erudite.css
@@ -197,6 +197,10 @@
}
/* Menu */
+#menubutton {
+ display: none;
+}
+
#menu {
margin: 1em 0 -0.625em;
overflow: hidden;
diff --git a/assets/erudite20em.css b/assets/erudite20em.css
index 9cb5953..83a6877 100644
--- a/assets/erudite20em.css
+++ b/assets/erudite20em.css
@@ -1,18 +1,3 @@
-#header h1 {
- font-size: 1.75em;
-}
-
-#menu {
- margin-top: 0.5em;
-}
-
-/* Stack top menu items */
-#menu li {
- float: none !important;
- border: none;
- padding: 0em;
-}
-
/* Disable text justification (user preference) */
#article, #bodyContent, #mw_content {
text-align: left !important;
diff --git a/assets/erudite55em.css b/assets/erudite55em.css
new file mode 100644
index 000..ce2560f
--- /dev/null
+++ b/assets/erudite55em.css
@@ -0,0 +1,35 @@
+/* Replace menu with a menu button */
+#menubutton {
+ display: block;
+ position: absolute;
+ right: 0.5em;
+ top: 0.75em;
+ padding: 0.25em 0.5em;
+ background-color: #33;
+background-color: rgba(50, 50, 50, 0.7);
+ color: white;
+ font-family: 'Linux Biolinum', corbel, 'gill sans', 'gill sans mt',
sans-serif;
+ font-size: large;
+ text-transform: uppercase;
+}
+
+/* Ensure header doesn't overlap with menu button */
+#header h1 {
+ margin-right: 2em;
+}
+
+/* Hide menu unless it's the target */
+#menu {
+ display: none;
+}
+
+#menu:target {
+ display: block;
+}
+
+/* Stack top menu items */
+#menu:target li {
+ float: none !important;
+ padding: 0em;
+ text-align: center;
+}
diff --git a/assets/erudite60em.css b/assets/erudite60em.css
index 993b501..61d8245 100644
--- a/assets/erudite60em.css
+++ b/assets/erudite60em.css
@@ -1,6 +1,7 @@
/* Some of the padding is best dispatched with */
#container,
#header,
+#access,
#footer-wrap-inner,
.message {
width: 100%;
diff --git a/assets/erudite66em.css b/assets/erudite66em.css
index 3c3bda1..2465920 100644
--- a/assets/erudite66em.css
+++ b/assets/erudite66em.css
@@ -1,21 +1,9 @@
-/* The top menu is likely to start wrapping, so reduce padding
- * and add a separator */
+/* The top menu may want to start wrapping, so reduce padding */
#menu {
- padding: 0.7em 1em 0.45em;
- background: rgba(50, 50, 50, 1.0);
+ padding: 0.5em 0em;
}
#menu li {
- border-right: thin solid #66;
padding: 0em 1em;
- margin-bottom: 0.3em;
margin-right: 0em;
-}
-
-#menu li:last-child {
- border-right: none;
-}
-
-#access {
- width: 100%;
}
diff --git a/erudite.php b/erudite.php
index 2a89be3..f92e0b9 100644
--- a/erudite.php
+++ b/erudite.php
@@ -31,6 +31,7 @@
'erudite/assets/erudite.css' => array( 'media' => 'screen' ),
'erudite/assets/erudite66em.css' => array( 'media' => 'screen
and (max-width: 66em)' ),
'erudite/assets/erudite60em.css' => array( 'media' => 'screen
and (max-width: 60em)' ),
+ 'erudite/assets/erudite55em.css' => array( 'media' => 'screen
and (max-width: 55em)' ),
'erudite/assets/erudite40em.css' => array( 'media' => 'screen
and (max-width: 40em)' ),
'erudite/assets/erudite20em.css' => array( 'media' => 'screen
and (max-width: 20em)' ),
'erudite/assets/print.css' => array( 'media' => 'print' ),
--
To view, visit https://gerrit.wikimedia.org/r/96248
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I07e7c54522d7eca2fb83b64e855da032937f864a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/erudite
Gerrit-Branch: master
Gerrit-Owner: Njw
___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/m
