fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make course teasers keyboard-accessible

Browse Source
This commit is contained in:
Felix Hamann 2019-03-23 22:56:55 +01:00
parent 16e5e8ea6f
commit 567bd29fd0
3 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/widgets/course-teaser/course-teaser.hamlet
View File

@ -1,4 +1,4 @@
<div .course :isRegistered:.course--registered #course-#{courseId}> <div .course :isRegistered:.course--registered #course-#{courseId} tabindex='1'>
<div .course-chevron> <div .course-chevron>
<div .course-shorthand>_{courseShorthand} <div .course-shorthand>_{courseShorthand}
<div .course-title> <div .course-title>

10
templates/widgets/course-teaser/course-teaser.julius
View File

@ -1,5 +1,5 @@
var COURSE_TEASER_EXPANDED_CLASS = 'course--expanded'; var COURSE_TEASER_EXPANDED_CLASS = 'course--expanded';
var COURSE_TEASER_CHEVRON_CLASS = 'course-teaser'; var COURSE_TEASER_CHEVRON_CLASS = 'course-chevron';
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var courseTeaserId = #{String courseId}; var courseTeaserId = #{String courseId};
@ -10,4 +10,12 @@ document.addEventListener('DOMContentLoaded', function() {
event.preventDefault(); event.preventDefault();
courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS); courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
}); });
courseTeaser.addEventListener('keydown', function(event) {
var eventKey = event.key;
if (eventKey === ' ' || eventKey === 'Enter') {
event.preventDefault();
courseTeaser.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
}
});
}); });

3
templates/widgets/course-teaser/course-teaser.lucius
View File

@ -1,5 +1,4 @@
:root { :root {
--color-fontsec: #5b5861;
--course-bg-color: var(--color-grey-lighter); --course-bg-color: var(--color-grey-lighter);
--course-expanded-bg-color: var(--color-grey-light); --course-expanded-bg-color: var(--color-grey-light);
} }
@ -7,7 +6,7 @@
.course { .course {
display: grid; display: grid;
grid-gap: 5px 7px; grid-gap: 5px 7px;
grid-template-columns: 25px 60px 1fr 100px; grid-template-columns: 25px 60px 1fr 40px;
padding: 10px; padding: 10px;
font-size: 1.4rem; font-size: 1.4rem;
background-color: var(--course-bg-color); background-color: var(--course-bg-color);