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 @@
<div id="tagline"><?php $this->msg( 'tagline' ) ?></div>
</div>
+ <a id="menubutton" href="#menu">Menu</a>
<div id="access" role="navigation">
<div id="menu">
<ul id="menu-urs" class="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 0000000..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: #333333;
+ 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 #666666;
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 <nick.wh...@durham.ac.uk>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
