revises semantics and Sass used for skip navigation
This commit is contained in:
Brian Talbot
committed by
Diana Huang
Diana Huang
parent
20b9258d43
commit
5b63b176da
@@ -826,22 +826,14 @@ hr.divide {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// ui - semantic + visual divider
|
||||
hr.divider {
|
||||
@extend %cont-text-sr;
|
||||
}
|
||||
|
||||
/* show skip links on focus */
|
||||
#skip-link a{
|
||||
position:absolute;
|
||||
&:focus {
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
background-color: #fff;
|
||||
border: 2px solid black;
|
||||
padding: 3px;
|
||||
z-index: 1005;
|
||||
}
|
||||
// ui - skipnav
|
||||
.nav-skip {
|
||||
@extend %cont-text-sr;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
@@ -29,213 +29,215 @@
|
||||
</head>
|
||||
|
||||
<body class="<%block name='bodyclass'></%block> hide-wip">
|
||||
<div id="skip-link"><a href="#content">Skip to Content</a></div>
|
||||
<script type="text/javascript">
|
||||
window.baseUrl = "${settings.STATIC_URL}";
|
||||
var require = {
|
||||
baseUrl: baseUrl,
|
||||
waitSeconds: 60,
|
||||
paths: {
|
||||
"domReady": "js/vendor/domReady",
|
||||
"gettext": "/i18n",
|
||||
"mustache": "js/vendor/mustache",
|
||||
"codemirror": "js/vendor/codemirror-compressed",
|
||||
"codemirror/stex": "js/vendor/CodeMirror/stex",
|
||||
"jquery": "js/vendor/jquery.min",
|
||||
"jquery.ui": "js/vendor/jquery-ui.min",
|
||||
"jquery.form": "js/vendor/jquery.form",
|
||||
"jquery.markitup": "js/vendor/markitup/jquery.markitup",
|
||||
"jquery.leanModal": "js/vendor/jquery.leanModal.min",
|
||||
"jquery.ajaxQueue": "js/vendor/jquery.ajaxQueue",
|
||||
"jquery.smoothScroll": "js/vendor/jquery.smooth-scroll.min",
|
||||
"jquery.timepicker": "js/vendor/timepicker/jquery.timepicker",
|
||||
"jquery.cookie": "js/vendor/jquery.cookie",
|
||||
"jquery.qtip": "js/vendor/jquery.qtip.min",
|
||||
"jquery.scrollTo": "js/vendor/jquery.scrollTo-1.4.2-min",
|
||||
"jquery.flot": "js/vendor/flot/jquery.flot.min",
|
||||
"jquery.maskedinput": "js/vendor/jquery.maskedinput.min",
|
||||
"jquery.fileupload": "js/vendor/jQuery-File-Upload/js/jquery.fileupload",
|
||||
"jquery.iframe-transport": "js/vendor/jQuery-File-Upload/js/jquery.iframe-transport",
|
||||
"jquery.inputnumber": "js/vendor/html5-input-polyfills/number-polyfill",
|
||||
"jquery.immediateDescendents": "coffee/src/jquery.immediateDescendents",
|
||||
"datepair": "js/vendor/timepicker/datepair",
|
||||
"date": "js/vendor/date",
|
||||
"tzAbbr": "js/vendor/tzAbbr",
|
||||
"underscore": "js/vendor/underscore-min",
|
||||
"underscore.string": "js/vendor/underscore.string.min",
|
||||
"backbone": "js/vendor/backbone-min",
|
||||
"backbone.associations": "js/vendor/backbone-associations-min",
|
||||
"tinymce": "js/vendor/tiny_mce/tiny_mce",
|
||||
"jquery.tinymce": "js/vendor/tiny_mce/jquery.tinymce",
|
||||
"xmodule": "/xmodule/xmodule",
|
||||
"xblock": "coffee/src/xblock",
|
||||
"utility": "js/src/utility",
|
||||
"accessibility": "js/src/accessibility_tools",
|
||||
"draggabilly": "js/vendor/draggabilly.pkgd",
|
||||
<nav class="nav-skip">
|
||||
<ul class="list-nav">
|
||||
<li class="nav-item">
|
||||
<a href="#content">${_("Skip to this view's content")}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
// externally hosted files
|
||||
"tender": "//edxedge.tenderapp.com/tender_widget",
|
||||
"mathjax": "//edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured",
|
||||
// youtube URL does not end in ".js". We add "?noext" to the path so
|
||||
// that require.js adds the ".js" to the query component of the URL,
|
||||
// and leaves the path component intact.
|
||||
"youtube": "//www.youtube.com/player_api?noext"
|
||||
},
|
||||
shim: {
|
||||
"gettext": {
|
||||
exports: "gettext"
|
||||
<script type="text/javascript">
|
||||
window.baseUrl = "${settings.STATIC_URL}";
|
||||
var require = {
|
||||
baseUrl: baseUrl,
|
||||
waitSeconds: 60,
|
||||
paths: {
|
||||
"domReady": "js/vendor/domReady",
|
||||
"gettext": "/i18n",
|
||||
"mustache": "js/vendor/mustache",
|
||||
"codemirror": "js/vendor/codemirror-compressed",
|
||||
"codemirror/stex": "js/vendor/CodeMirror/stex",
|
||||
"jquery": "js/vendor/jquery.min",
|
||||
"jquery.ui": "js/vendor/jquery-ui.min",
|
||||
"jquery.form": "js/vendor/jquery.form",
|
||||
"jquery.markitup": "js/vendor/markitup/jquery.markitup",
|
||||
"jquery.leanModal": "js/vendor/jquery.leanModal.min",
|
||||
"jquery.ajaxQueue": "js/vendor/jquery.ajaxQueue",
|
||||
"jquery.smoothScroll": "js/vendor/jquery.smooth-scroll.min",
|
||||
"jquery.timepicker": "js/vendor/timepicker/jquery.timepicker",
|
||||
"jquery.cookie": "js/vendor/jquery.cookie",
|
||||
"jquery.qtip": "js/vendor/jquery.qtip.min",
|
||||
"jquery.scrollTo": "js/vendor/jquery.scrollTo-1.4.2-min",
|
||||
"jquery.flot": "js/vendor/flot/jquery.flot.min",
|
||||
"jquery.fileupload": "js/vendor/jQuery-File-Upload/js/jquery.fileupload",
|
||||
"jquery.iframe-transport": "js/vendor/jQuery-File-Upload/js/jquery.iframe-transport",
|
||||
"jquery.inputnumber": "js/vendor/html5-input-polyfills/number-polyfill",
|
||||
"jquery.immediateDescendents": "coffee/src/jquery.immediateDescendents",
|
||||
"datepair": "js/vendor/timepicker/datepair",
|
||||
"date": "js/vendor/date",
|
||||
"tzAbbr": "js/vendor/tzAbbr",
|
||||
"underscore": "js/vendor/underscore-min",
|
||||
"underscore.string": "js/vendor/underscore.string.min",
|
||||
"backbone": "js/vendor/backbone-min",
|
||||
"backbone.associations": "js/vendor/backbone-associations-min",
|
||||
"tinymce": "js/vendor/tiny_mce/tiny_mce",
|
||||
"jquery.tinymce": "js/vendor/tiny_mce/jquery.tinymce",
|
||||
"xmodule": "/xmodule/xmodule",
|
||||
"xblock": "coffee/src/xblock",
|
||||
"utility": "js/src/utility",
|
||||
"accessibility": "js/src/accessibility_tools",
|
||||
"draggabilly": "js/vendor/draggabilly.pkgd",
|
||||
|
||||
// externally hosted files
|
||||
"tender": "//edxedge.tenderapp.com/tender_widget",
|
||||
"mathjax": "//edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured",
|
||||
// youtube URL does not end in ".js". We add "?noext" to the path so
|
||||
// that require.js adds the ".js" to the query component of the URL,
|
||||
// and leaves the path component intact.
|
||||
"youtube": "//www.youtube.com/player_api?noext"
|
||||
},
|
||||
"date": {
|
||||
exports: "Date"
|
||||
},
|
||||
"jquery.ui": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.ui"
|
||||
},
|
||||
"jquery.form": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.ajaxForm"
|
||||
},
|
||||
"jquery.markitup": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.markitup"
|
||||
},
|
||||
"jquery.leanmodal": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.leanModal"
|
||||
},
|
||||
"jquery.ajaxQueue": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.ajaxQueue"
|
||||
},
|
||||
"jquery.smoothScroll": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.smoothScroll"
|
||||
},
|
||||
"jquery.cookie": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.cookie"
|
||||
},
|
||||
"jquery.qtip": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.qtip"
|
||||
},
|
||||
"jquery.scrollTo": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.scrollTo",
|
||||
},
|
||||
"jquery.flot": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.plot"
|
||||
},
|
||||
"jquery.maskedinput": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.mask"
|
||||
},
|
||||
"jquery.fileupload": {
|
||||
deps: ["jquery.iframe-transport"],
|
||||
exports: "jQuery.fn.fileupload"
|
||||
},
|
||||
"jquery.inputnumber": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.inputNumber"
|
||||
},
|
||||
"jquery.tinymce": {
|
||||
deps: ["jquery", "tinymce"],
|
||||
exports: "jQuery.fn.tinymce"
|
||||
},
|
||||
"datepair": {
|
||||
deps: ["jquery.ui", "jquery.timepicker"]
|
||||
},
|
||||
"underscore": {
|
||||
exports: "_"
|
||||
},
|
||||
"backbone": {
|
||||
deps: ["underscore", "jquery"],
|
||||
exports: "Backbone"
|
||||
},
|
||||
"backbone.associations": {
|
||||
deps: ["backbone"],
|
||||
exports: "Backbone.Associations"
|
||||
},
|
||||
"youtube": {
|
||||
exports: "YT"
|
||||
},
|
||||
"codemirror": {
|
||||
exports: "CodeMirror"
|
||||
},
|
||||
"codemirror/stex": {
|
||||
deps: ["codemirror"]
|
||||
},
|
||||
"tinymce": {
|
||||
exports: "tinymce"
|
||||
},
|
||||
"mathjax": {
|
||||
exports: "MathJax",
|
||||
init: function() {
|
||||
MathJax.Hub.Config({
|
||||
tex2jax: {
|
||||
inlineMath: [
|
||||
["\\(","\\)"],
|
||||
['[mathjaxinline]','[/mathjaxinline]']
|
||||
],
|
||||
displayMath: [
|
||||
["\\[","\\]"],
|
||||
['[mathjax]','[/mathjax]']
|
||||
]
|
||||
shim: {
|
||||
"gettext": {
|
||||
exports: "gettext"
|
||||
},
|
||||
"date": {
|
||||
exports: "Date"
|
||||
},
|
||||
"jquery.ui": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.ui"
|
||||
},
|
||||
"jquery.form": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.ajaxForm"
|
||||
},
|
||||
"jquery.markitup": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.markitup"
|
||||
},
|
||||
"jquery.leanmodal": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.leanModal"
|
||||
},
|
||||
"jquery.ajaxQueue": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.ajaxQueue"
|
||||
},
|
||||
"jquery.smoothScroll": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.smoothScroll"
|
||||
},
|
||||
"jquery.cookie": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.cookie"
|
||||
},
|
||||
"jquery.qtip": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.qtip"
|
||||
},
|
||||
"jquery.scrollTo": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.scrollTo",
|
||||
},
|
||||
"jquery.flot": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.plot"
|
||||
},
|
||||
"jquery.fileupload": {
|
||||
deps: ["jquery.iframe-transport"],
|
||||
exports: "jQuery.fn.fileupload"
|
||||
},
|
||||
"jquery.inputnumber": {
|
||||
deps: ["jquery"],
|
||||
exports: "jQuery.fn.inputNumber"
|
||||
},
|
||||
"jquery.tinymce": {
|
||||
deps: ["jquery", "tinymce"],
|
||||
exports: "jQuery.fn.tinymce"
|
||||
},
|
||||
"datepair": {
|
||||
deps: ["jquery.ui", "jquery.timepicker"]
|
||||
},
|
||||
"underscore": {
|
||||
exports: "_"
|
||||
},
|
||||
"backbone": {
|
||||
deps: ["underscore", "jquery"],
|
||||
exports: "Backbone"
|
||||
},
|
||||
"backbone.associations": {
|
||||
deps: ["backbone"],
|
||||
exports: "Backbone.Associations"
|
||||
},
|
||||
"youtube": {
|
||||
exports: "YT"
|
||||
},
|
||||
"codemirror": {
|
||||
exports: "CodeMirror"
|
||||
},
|
||||
"codemirror/stex": {
|
||||
deps: ["codemirror"]
|
||||
},
|
||||
"tinymce": {
|
||||
exports: "tinymce"
|
||||
},
|
||||
"mathjax": {
|
||||
exports: "MathJax",
|
||||
init: function() {
|
||||
MathJax.Hub.Config({
|
||||
tex2jax: {
|
||||
inlineMath: [
|
||||
["\\(","\\)"],
|
||||
['[mathjaxinline]','[/mathjaxinline]']
|
||||
],
|
||||
displayMath: [
|
||||
["\\[","\\]"],
|
||||
['[mathjax]','[/mathjax]']
|
||||
]
|
||||
}
|
||||
});
|
||||
MathJax.Hub.Configured();
|
||||
}
|
||||
});
|
||||
MathJax.Hub.Configured();
|
||||
},
|
||||
"xblock/core": {
|
||||
exports: "XBlock",
|
||||
deps: ["jquery", "jquery.immediateDescendents"]
|
||||
},
|
||||
"xblock/runtime.v1": {
|
||||
exports: "XBlock",
|
||||
deps: ["xblock/core"]
|
||||
},
|
||||
|
||||
"coffee/src/main": {
|
||||
deps: ["coffee/src/ajax_prefix"]
|
||||
},
|
||||
"coffee/src/logger": {
|
||||
exports: "Logger",
|
||||
deps: ["coffee/src/ajax_prefix"]
|
||||
}
|
||||
},
|
||||
"xblock/core": {
|
||||
exports: "XBlock",
|
||||
deps: ["jquery", "jquery.immediateDescendents"]
|
||||
},
|
||||
"xblock/runtime.v1": {
|
||||
exports: "XBlock",
|
||||
deps: ["xblock/core"]
|
||||
},
|
||||
|
||||
"coffee/src/main": {
|
||||
deps: ["coffee/src/ajax_prefix"]
|
||||
},
|
||||
"coffee/src/logger": {
|
||||
exports: "Logger",
|
||||
deps: ["coffee/src/ajax_prefix"]
|
||||
// load jquery and gettext automatically
|
||||
deps: ["jquery", "gettext"],
|
||||
callback: function() {
|
||||
// load other scripts on every page, after jquery loads
|
||||
require(["js/base", "coffee/src/main", "coffee/src/logger", "datepair", "accessibility"]);
|
||||
// we need "datepair" because it dynamically modifies the page
|
||||
// when it is loaded -- yuck!
|
||||
}
|
||||
},
|
||||
// load jquery and gettext automatically
|
||||
deps: ["jquery", "gettext"],
|
||||
callback: function() {
|
||||
// load other scripts on every page, after jquery loads
|
||||
require(["js/base", "coffee/src/main", "coffee/src/logger", "datepair", "accessibility"]);
|
||||
// we need "datepair" because it dynamically modifies the page
|
||||
// when it is loaded -- yuck!
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${static.url("js/vendor/require.js")}"></script>
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="${static.url("js/vendor/require.js")}"></script>
|
||||
|
||||
## js templates
|
||||
<script id="system-feedback-tpl" type="text/template">
|
||||
<%static:include path="js/system-feedback.underscore" />
|
||||
</script>
|
||||
## js templates
|
||||
<script id="system-feedback-tpl" type="text/template">
|
||||
<%static:include path="js/system-feedback.underscore" />
|
||||
</script>
|
||||
|
||||
|
||||
% if context_course:
|
||||
<script type="text/javascript">
|
||||
require(['js/models/course'], function(Course) {
|
||||
window.course = new Course({
|
||||
id: "${context_course.id}",
|
||||
name: "${context_course.display_name_with_default | h}",
|
||||
url_name: "${context_course.location.name | h}",
|
||||
org: "${context_course.location.org | h}",
|
||||
num: "${context_course.location.course | h}",
|
||||
revision: "${context_course.location.revision | h}"
|
||||
<script type="text/javascript">
|
||||
require(['js/models/course'], function(Course) {
|
||||
window.course = new Course({
|
||||
id: "${context_course.id}",
|
||||
name: "${context_course.display_name_with_default | h}",
|
||||
url_name: "${context_course.location.name | h}",
|
||||
org: "${context_course.location.org | h}",
|
||||
num: "${context_course.location.course | h}",
|
||||
revision: "${context_course.location.revision | h}"
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
% endif
|
||||
|
||||
<!-- view -->
|
||||
|
||||
@@ -240,6 +240,13 @@
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
||||
&:focus {
|
||||
@extend %ui-depth5;
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// extends - content - wrapping
|
||||
|
||||
@@ -286,18 +286,7 @@ mark {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
|
||||
/* show skip links on focus */
|
||||
#skip-link a{
|
||||
position:absolute;
|
||||
&:focus {
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
background-color: #fff;
|
||||
border: 2px solid black;
|
||||
padding: 3px;
|
||||
z-index: 1005;
|
||||
}
|
||||
// ui - skipnav
|
||||
.nav-skip {
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
|
||||
@@ -83,6 +83,13 @@
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
||||
&:focus {
|
||||
@extend %ui-depth5;
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
|
||||
|
||||
@@ -78,7 +78,14 @@
|
||||
</head>
|
||||
|
||||
<body class="<%block name='bodyclass'/>">
|
||||
<div id="skip-link"><a href="#content-wrapper">Skip to Content</a></div>
|
||||
<nav class="nav-skip">
|
||||
<ul class="list-nav">
|
||||
<li class="nav-item">
|
||||
<a href="#content">${_("Skip to this view's content")}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<%include file="mathjax_accessible.html" />
|
||||
|
||||
% if theme_enabled():
|
||||
@@ -87,7 +94,7 @@
|
||||
<%include file="navigation.html" />
|
||||
% endif
|
||||
|
||||
<section class="content-wrapper" id="content-wrapper">
|
||||
<section class="content-wrapper" id="content">
|
||||
${self.body()}
|
||||
<%block name="bodyextra"/>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user