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 49 additions and 45 deletions
cms/static/sass/_base.scss
......@@ -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;
}
// ====================
......
cms/templates/base.html
......@@ -29,10 +29,17 @@
</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 = {
<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>
<script type="text/javascript">
window.baseUrl = "${settings.STATIC_URL}";
var require = {
baseUrl: baseUrl,
waitSeconds: 60,
paths: {
......@@ -53,7 +60,6 @@ var require = {
"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",
......@@ -128,10 +134,6 @@ var require = {
deps: ["jquery"],
exports: "jQuery.fn.plot"
},
"jquery.maskedinput": {
deps: ["jquery"],
exports: "jQuery.fn.mask"
},
"jquery.fileupload": {
deps: ["jquery.iframe-transport"],
exports: "jQuery.fn.fileupload"
......@@ -213,19 +215,19 @@ var require = {
// 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">
## js templates
<script id="system-feedback-tpl" type="text/template">
<%static:include path="js/system-feedback.underscore" />
</script>
</script>
% if context_course:
<script type="text/javascript">
require(['js/models/course'], function(Course) {
require(['js/models/course'], function(Course) {
window.course = new Course({
id: "${context_course.id}",
name: "${context_course.display_name_with_default | h}",
......@@ -234,7 +236,7 @@ require(['js/models/course'], function(Course) {
num: "${context_course.location.course | h}",
revision: "${context_course.location.revision | h}"
});
});
});
</script>
% endif
......
common/static/sass/_mixins.scss
......@@ -240,6 +240,13 @@
padding: 0;
position: absolute;
width: 1px;
&:focus {
@extend %ui-depth5;
width: auto;
height: auto;
overflow: visible;
}
}
// extends - content - wrapping
......
lms/static/sass/base/_base.scss
......@@ -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;
}
lms/static/sass/base/_mixins.scss
......@@ -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
......
lms/templates/main.html
......@@ -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>
......
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