darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 19:34:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

Show expander arrow for all browsers

Browse Source 
The polyfill we use for details/summary only renders the arrow if the
browser doesn’t natively support the feature.

The latest versions of Firefox _do_ now support the feature (after 5
years), but for some reason they don’t draw the arrow. So this commit
forces the arrow to be polyfilled in all browsers, and hides the browser
default one, for those browsers that do render it.
This commit is contained in:
Chris Hill-Scott
2016-10-12 15:55:53 +01:00
parent c13f1aa5d1
commit f561bfe603
2 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/assets/javascripts/detailsPolyfill.js
View File

@@ -133,22 +133,20 @@
// If this is not a native implementation, create an arrow
// inside the summary
if (!NATIVE_DETAILS) {
var twisty = document.createElement('i');
if (openAttr === true) {
twisty.className = 'arrow arrow-open';
twisty.appendChild(document.createTextNode('\u25bc'));
} else {
twisty.className = 'arrow arrow-closed';
twisty.appendChild(document.createTextNode('\u25ba'));
}
details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild);
details.__summary.__twisty.setAttribute('aria-hidden', 'true');
var twisty = document.createElement('i');
if (openAttr === true) {
twisty.className = 'arrow arrow-open';
twisty.appendChild(document.createTextNode('\u25bc'));
} else {
twisty.className = 'arrow arrow-closed';
twisty.appendChild(document.createTextNode('\u25ba'));
}
details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild);
details.__summary.__twisty.setAttribute('aria-hidden', 'true');
}
// Define a statechange function that updates aria-expanded and style.display

22
app/assets/stylesheets/app.scss
View File

@@ -192,3 +192,25 @@ details summary {
.tabular-numbers {
@include core-19($tabular-numbers: true);
}
summary::-moz-details-marker {
display: none;
}
summary::-ms-details-marker {
display: none;
}
summary::-o-details-marker {
display: none;
}
summary::details-marker {
display: none;
}
summary::-webkit-details-marker {
display: none;
}
details .arrow {
font-size: 16px;
}