mirror/pcottle.learnGitBranching
1
0
Fork 0
mirror of https://github.com/pcottle/learnGitBranching.git synced 2025-06-28 00:40:07 +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', className: 'seriesView box flex1 vertical',
template: _.template($('#series-view').html()), template: _.template($('#series-view').html()),
events: { events: {
'click div.levelIcon': 'click', 'click a.levelIcon': 'click',
'mouseenter div.levelIcon': 'enterIcon' 'mouseenter a.levelIcon': 'enterIcon'
}, },
initialize: function(options) { initialize: function(options) {

23
src/style/main.css
View file

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

4
src/template.index.html
View file

@ -127,14 +127,14 @@
</p> </p>
<div class="iconHolder box horizontal"> <div class="iconHolder box horizontal">
<% for (var i = 0; i < ids.length; i++) { %> <% 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]%>"> <div class="index box" data-id="<%=ids[i]%>">
<i class="icon-ok-circle" data-id="<%=ids[i]%>"></i> <i class="icon-ok-circle" data-id="<%=ids[i]%>"></i>
<div class="indexNum" data-id="<%=ids[i]%>"> <div class="indexNum" data-id="<%=ids[i]%>">
<%= i + 1 %> <%= i + 1 %>
</div> </div>
</div> </div>
</div> </a>
<% } %> <% } %>
</div> </div>
</script> </script>