Skip to content

E
edx-platform
Commit 5b63b176 by Brian Talbot Committed by Diana Huang
Options

revises semantics and Sass used for skip navigation

parent 20b9258d
Showing with 228 additions and 224 deletions
cms/static/sass/_base.scss
...@@ -826,22 +826,14 @@ hr.divide { ...@@ -826,22 +826,14 @@ hr.divide {
word-wrap: break-word; word-wrap: break-word;
} }
// ui - semantic + visual divider
hr.divider { hr.divider {
@extend %cont-text-sr; @extend %cont-text-sr;
} }
/* show skip links on focus */ // ui - skipnav
#skip-link a{ .nav-skip {
position:absolute; @extend %cont-text-sr;
&:focus {
width: auto;
height: auto;
overflow: visible;
background-color: #fff;
border: 2px solid black;
padding: 3px;
z-index: 1005;
}
} }
// ==================== // ====================
......
cms/templates/base.html
...@@ -29,213 +29,215 @@ ...@@ -29,213 +29,215 @@
</head> </head>
<body class="<%block name='bodyclass'></%block> hide-wip"> <body class="<%block name='bodyclass'></%block> hide-wip">
<div id="skip-link"><a href="#content">Skip to Content</a></div> <nav class="nav-skip">
<script type="text/javascript"> <ul class="list-nav">
window.baseUrl = "${settings.STATIC_URL}"; <li class="nav-item">
var require = { <a href="#content">${_("Skip to this view's content")}</a>
baseUrl: baseUrl, </li>
waitSeconds: 60, </ul>
paths: { </nav>
"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",
// externally hosted files <script type="text/javascript">
"tender": "//edxedge.tenderapp.com/tender_widget", window.baseUrl = "${settings.STATIC_URL}";
"mathjax": "//edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured", var require = {
// youtube URL does not end in ".js". We add "?noext" to the path so baseUrl: baseUrl,
// that require.js adds the ".js" to the query component of the URL, waitSeconds: 60,
// and leaves the path component intact. paths: {
"youtube": "//www.youtube.com/player_api?noext" "domReady": "js/vendor/domReady",
}, "gettext": "/i18n",
shim: { "mustache": "js/vendor/mustache",
"gettext": { "codemirror": "js/vendor/codemirror-compressed",
exports: "gettext" "codemirror/stex": "js/vendor/CodeMirror/stex",
}, "jquery": "js/vendor/jquery.min",
"date": { "jquery.ui": "js/vendor/jquery-ui.min",
exports: "Date" "jquery.form": "js/vendor/jquery.form",
}, "jquery.markitup": "js/vendor/markitup/jquery.markitup",
"jquery.ui": { "jquery.leanModal": "js/vendor/jquery.leanModal.min",
deps: ["jquery"], "jquery.ajaxQueue": "js/vendor/jquery.ajaxQueue",
exports: "jQuery.ui" "jquery.smoothScroll": "js/vendor/jquery.smooth-scroll.min",
}, "jquery.timepicker": "js/vendor/timepicker/jquery.timepicker",
"jquery.form": { "jquery.cookie": "js/vendor/jquery.cookie",
deps: ["jquery"], "jquery.qtip": "js/vendor/jquery.qtip.min",
exports: "jQuery.fn.ajaxForm" "jquery.scrollTo": "js/vendor/jquery.scrollTo-1.4.2-min",
}, "jquery.flot": "js/vendor/flot/jquery.flot.min",
"jquery.markitup": { "jquery.fileupload": "js/vendor/jQuery-File-Upload/js/jquery.fileupload",
deps: ["jquery"], "jquery.iframe-transport": "js/vendor/jQuery-File-Upload/js/jquery.iframe-transport",
exports: "jQuery.fn.markitup" "jquery.inputnumber": "js/vendor/html5-input-polyfills/number-polyfill",
}, "jquery.immediateDescendents": "coffee/src/jquery.immediateDescendents",
"jquery.leanmodal": { "datepair": "js/vendor/timepicker/datepair",
deps: ["jquery"], "date": "js/vendor/date",
exports: "jQuery.fn.leanModal" "tzAbbr": "js/vendor/tzAbbr",
}, "underscore": "js/vendor/underscore-min",
"jquery.ajaxQueue": { "underscore.string": "js/vendor/underscore.string.min",
deps: ["jquery"], "backbone": "js/vendor/backbone-min",
exports: "jQuery.fn.ajaxQueue" "backbone.associations": "js/vendor/backbone-associations-min",
}, "tinymce": "js/vendor/tiny_mce/tiny_mce",
"jquery.smoothScroll": { "jquery.tinymce": "js/vendor/tiny_mce/jquery.tinymce",
deps: ["jquery"], "xmodule": "/xmodule/xmodule",
exports: "jQuery.fn.smoothScroll" "xblock": "coffee/src/xblock",
}, "utility": "js/src/utility",
"jquery.cookie": { "accessibility": "js/src/accessibility_tools",
deps: ["jquery"], "draggabilly": "js/vendor/draggabilly.pkgd",
exports: "jQuery.fn.cookie"
}, // externally hosted files
"jquery.qtip": { "tender": "//edxedge.tenderapp.com/tender_widget",
deps: ["jquery"], "mathjax": "//edx-static.s3.amazonaws.com/mathjax-MathJax-727332c/MathJax.js?config=TeX-MML-AM_HTMLorMML-full&delayStartupUntil=configured",
exports: "jQuery.fn.qtip" // 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,
"jquery.scrollTo": { // and leaves the path component intact.
deps: ["jquery"], "youtube": "//www.youtube.com/player_api?noext"
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": { shim: {
exports: "MathJax", "gettext": {
init: function() { exports: "gettext"
MathJax.Hub.Config({ },
tex2jax: { "date": {
inlineMath: [ exports: "Date"
["\\(","\\)"], },
['[mathjaxinline]','[/mathjaxinline]'] "jquery.ui": {
], deps: ["jquery"],
displayMath: [ exports: "jQuery.ui"
["\\[","\\]"], },
['[mathjax]','[/mathjax]'] "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/core": { },
exports: "XBlock", "xblock/runtime.v1": {
deps: ["jquery", "jquery.immediateDescendents"] exports: "XBlock",
}, deps: ["xblock/core"]
"xblock/runtime.v1": { },
exports: "XBlock",
deps: ["xblock/core"]
},
"coffee/src/main": { "coffee/src/main": {
deps: ["coffee/src/ajax_prefix"] deps: ["coffee/src/ajax_prefix"]
},
"coffee/src/logger": {
exports: "Logger",
deps: ["coffee/src/ajax_prefix"]
}
}, },
"coffee/src/logger": { // load jquery and gettext automatically
exports: "Logger", deps: ["jquery", "gettext"],
deps: ["coffee/src/ajax_prefix"] 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 </script>
deps: ["jquery", "gettext"], <script type="text/javascript" src="${static.url("js/vendor/require.js")}"></script>
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>
## js templates ## js templates
<script id="system-feedback-tpl" type="text/template"> <script id="system-feedback-tpl" type="text/template">
<%static:include path="js/system-feedback.underscore" /> <%static:include path="js/system-feedback.underscore" />
</script> </script>
% if context_course: % if context_course:
<script type="text/javascript"> <script type="text/javascript">
require(['js/models/course'], function(Course) { require(['js/models/course'], function(Course) {
window.course = new Course({ window.course = new Course({
id: "${context_course.id}", id: "${context_course.id}",
name: "${context_course.display_name_with_default | h}", name: "${context_course.display_name_with_default | h}",
url_name: "${context_course.location.name | h}", url_name: "${context_course.location.name | h}",
org: "${context_course.location.org | h}", org: "${context_course.location.org | h}",
num: "${context_course.location.course | h}", num: "${context_course.location.course | h}",
revision: "${context_course.location.revision | h}" revision: "${context_course.location.revision | h}"
});
}); });
}); </script>
</script>
% endif % endif
<!-- view --> <!-- view -->
......
common/static/sass/_mixins.scss
...@@ -240,6 +240,13 @@ ...@@ -240,6 +240,13 @@
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; width: 1px;
&:focus {
@extend %ui-depth5;
width: auto;
height: auto;
overflow: visible;
}
} }
// extends - content - wrapping // extends - content - wrapping
......
lms/static/sass/base/_base.scss
...@@ -286,18 +286,7 @@ mark { ...@@ -286,18 +286,7 @@ mark {
height: 150px; height: 150px;
} }
// ui - skipnav
/* show skip links on focus */ .nav-skip {
#skip-link a{ @extend %text-sr;
position:absolute;
&:focus {
width: auto;
height: auto;
overflow: visible;
background-color: #fff;
border: 2px solid black;
padding: 3px;
z-index: 1005;
}
} }
lms/static/sass/base/_mixins.scss
...@@ -83,6 +83,13 @@ ...@@ -83,6 +83,13 @@
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; 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 // extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
......
lms/templates/main.html
...@@ -78,7 +78,14 @@ ...@@ -78,7 +78,14 @@
</head> </head>
<body class="<%block name='bodyclass'/>"> <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" /> <%include file="mathjax_accessible.html" />
% if theme_enabled(): % if theme_enabled():
...@@ -87,7 +94,7 @@ ...@@ -87,7 +94,7 @@
<%include file="navigation.html" /> <%include file="navigation.html" />
% endif % endif
<section class="content-wrapper" id="content-wrapper"> <section class="content-wrapper" id="content">
${self.body()} ${self.body()}
<%block name="bodyextra"/> <%block name="bodyextra"/>
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment