mirror/pcottle.learnGitBranching
1
0
Fork 0
mirror of https://github.com/pcottle/learnGitBranching.git synced 2025-06-27 08:28:50 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Accessibility: Levels are links

Browse source
This commit is contained in:
Ulysse ARNAUD 2022-10-19 11:52:33 +02:00
parent 671c7fa4ca
commit ee1a22d667
3 changed files with 16 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/js/views/levelDropdownView.js
View file

@ -366,8 +366,8 @@ var SeriesView = BaseView.extend({
className: 'seriesView box flex1 vertical',
template: _.template($('#series-view').html()),
events: {
'click div.levelIcon': 'click',
'mouseenter div.levelIcon': 'enterIcon'
'click a.levelIcon': 'click',
'mouseenter a.levelIcon': 'enterIcon'
},
initialize: function(options) {

23
src/style/main.css
View file

@ -952,7 +952,7 @@ div.seriesView p.levelInfo {
font-style: italic;
}
div.levelIcon {
a.levelIcon {
height: 40px;
width: 40px;
border-radius: 5px;
@ -964,9 +964,10 @@ div.levelIcon {
background-image: -ms-linear-gradient(top, white, #AAB1AA);
background-image: linear-gradient(top, white, #AAB1AA);
cursor: pointer;
text-decoration: none;
}
div.levelIcon:hover {
a.levelIcon:hover {
background-image: -webkit-linear-gradient(top, #DADADA, #888686);
background-image: -moz-linear-gradient(top, #DADADA, #888686);
background-image: -o-linear-gradient(top, #DADADA, #888686);
@ -974,7 +975,7 @@ div.levelIcon:hover {
background-image: linear-gradient(top, #DADADA, #888686);
}
div.levelIcon:active {
a.levelIcon:active {
background-image: -webkit-linear-gradient(top, #888686, #7A7A7A);
background-image: -moz-linear-gradient(top, #888686, #7A7A7A);
background-image: -o-linear-gradient(top, #888686, #7A7A7A);
@ -982,11 +983,11 @@ div.levelIcon:active {
background-image: linear-gradient(top, #888686, #7A7A7A);
}
div.levelIcon.selected {
a.levelIcon.selected {
box-shadow: 0 0 15px #25F6FF;
}
div.levelIcon.solved {
a.levelIcon.solved {
background: -webkit-linear-gradient(top, #F3F86B, #35A30F);
background: -moz-linear-gradient(top, #F3F86B, #35A30F);
background: -o-linear-gradient(top, #F3F86B, #35A30F);
@ -995,17 +996,17 @@ div.levelIcon.solved {
border-top: 1px solid #f4ffa1;
}
div.levelIcon.solved:hover {
a.levelIcon.solved:hover {
border-top-color: #30f03d;
background: #30f03d;
}
div.levelIcon.solved:active {
a.levelIcon.solved:active {
border-top-color: #5edb15;
background: #5edb15;
}
div.levelIcon div.index {
a.levelIcon div.index {
font-weight: 400;
text-shadow: 1px 1px 2px #CCC, 0 2px 0 #C9C9C9;
font-size: 1.125em;
@ -1013,11 +1014,11 @@ div.levelIcon div.index {
-webkit-text-stroke: 1px #111;
}
div.levelIcon div.index i {
a.levelIcon div.index i {
display: none;
}
div.levelIcon.solved div.index i {
a.levelIcon.solved div.index i {
display: block;
color: white;
-webkit-text-stroke: 0;
@ -1025,7 +1026,7 @@ div.levelIcon.solved div.index i {
font-size: 2em;
}
div.levelIcon.solved div.index div.indexNum {
a.levelIcon.solved div.index div.indexNum {
display: none;
}

4
src/template.index.html
View file

@ -127,14 +127,14 @@
</p>
<div class="iconHolder box horizontal">
<% for (var i = 0; i < ids.length; i++) { %>
<div class="levelIcon box center centerAlign vertical" id="levelIcon-<%=ids[i]%>" data-id="<%=ids[i]%>">
<a href="#" class="levelIcon box center centerAlign vertical" id="levelIcon-<%=ids[i]%>" data-id="<%=ids[i]%>">
<div class="index box" data-id="<%=ids[i]%>">
<i class="icon-ok-circle" data-id="<%=ids[i]%>"></i>
<div class="indexNum" data-id="<%=ids[i]%>">
<%= i + 1 %>
</div>
</div>
</div>
</a>
<% } %>
</div>
</script>