Permalink
Browse files

fix(a11y): display aalborg mobile site menu toggle in more browsers

The 3 `span.icon-bar` elements do not display in Firefox on Android. This
replaces them with an 88x48 semi-transparent PNG image displayed at 22x12
for clean scaling.

Fixes #9110

BREAKING CHANGE:
Plugins that customized `.elgg-button-nav` (or the spans inside) will need
to be altered. The `.elgg-icon` CSS is left in place but will be removed in
Elgg 2.0.
  • Loading branch information...
mrclay committed Nov 30, 2015
1 parent 125948f commit e96f07987b943a4c72f654ef7896f2e98d7ac23e
Binary file not shown.
@@ -86,6 +86,9 @@
text-decoration: none;
background-color: #60B8F7;
}
+/* .icon-bar elements had to be removed in 1.12.6 because they did not show up in Firefox/Android.
+ * The .icon-bar CSS is deprecated and will be removed in 2.0
+ */
.elgg-button-nav .icon-bar {
background-color: #F5F5F5;
border-radius: 1px 1px 1px 1px;
@@ -97,6 +100,9 @@
.elgg-button-nav .icon-bar + .icon-bar {
margin-top: 3px;
}
+.elgg-button-nav > img {
+ display: block;
+}
@media (max-width: 1030px) {
.elgg-menu-topbar-default > li:first-child a {
margin-left: 0;
@@ -10,9 +10,13 @@
?>
<a class="elgg-button-nav" rel="toggle" data-toggle-selector=".elgg-nav-collapse" href="#">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
+ <?= elgg_format_element('img', [
+ 'src' => elgg_get_site_url() . "mod/aalborg_theme/graphics/bars.png",
+ 'width' => 22,
+ 'height' => 12,
+ 'alt' => elgg_echo('menu'),
+ 'title' => '',
+ ]) ?>
</a>
<div class="elgg-nav-collapse">

0 comments on commit e96f079

Please sign in to comment.