Made most things reachable with just a keyboard

This commit is contained in:
Marcin Kurczewski 2014-10-11 23:24:03 +02:00
parent 33b205b574
commit 765d553a84
10 changed files with 38 additions and 34 deletions

View file

@ -42,7 +42,9 @@ a {
text-decoration: none;
cursor: pointer; /* for links without [href] */
}
a:focus {
outline: 2px solid #64C2ED;
}
a:hover {
color: #34B2ED;
}

View file

@ -129,7 +129,8 @@ input:not([type=button]):not(.tag-real-input):focus {
input[type=radio],
input[type=checkbox] {
display:none;
opacity: 0;
position: absolute;
}
input[type=radio] + label,
input[type=checkbox] + label {
@ -158,10 +159,18 @@ input[type=checkbox] + label::before {
input[type=checkbox]:checked + label::before {
content: "\f046";
}
input[type=radio]:focus + label,
input[type=checkbox]:focus + label {
color: #64C2ED;
}
.file-handler::before {
background: none;
}
.file-handler {
box-shadow: none;
border: 3px dashed #eee;
padding: 0.3em 0.5em;
line-height: 140% !important;
@ -169,7 +178,7 @@ input[type=checkbox]:checked + label::before {
cursor: pointer;
}
.file-handler.active {
border-color: #6a2;
border-color: #64C2ED;
background-color: #eeffcc;
}

View file

@ -6,6 +6,7 @@
#post-upload-step1 .file-handler {
padding: 3.5em;
width: 100%;
}
#post-upload-step1 .url-handler {

View file

@ -10,7 +10,7 @@ App.Controls.FileDropper = function($fileInput) {
setNames: false,
};
var $dropDiv = jQuery('<div class="file-handler"></div>');
var $dropDiv = jQuery('<button class="file-handler"></button>');
var allowMultiple = $fileInput.attr('multiple');
$dropDiv.html((allowMultiple ? 'Drop files here!' : 'Drop file here!') + '<br/>Or just click on this box.');
$dropDiv.insertBefore($fileInput);

View file

@ -180,8 +180,9 @@ App.Presenters.PagerPresenter = function(
}
lastPage = page;
var $a = jQuery('<a/>');
$a.click(function() {
var $a = jQuery('<a href="#"/>');
$a.click(function(e) {
e.preventDefault();
pager.setPage(page);
syncUrl();
});

View file

@ -67,7 +67,7 @@ App.Presenters.TagListPresenter = function(
}
function updateActiveOrder(activeOrder) {
$el.find('.order li a').removeClass('active');
$el.find('.order li a.active').removeClass('active');
$el.find('.order [href*="' + activeOrder + '"]').addClass('active');
}

View file

@ -61,12 +61,11 @@ App.Presenters.UserListPresenter = function(
function render() {
$el.html(templates.list());
$el.find('.order a').click(orderLinkClicked);
}
function updateActiveOrder(activeOrder) {
$el.find('.order li a').removeClass('active');
$el.find('.order [data-order="' + activeOrder + '"]').addClass('active');
$el.find('.order li a.active').removeClass('active');
$el.find('.order [href*="' + activeOrder + '"]').addClass('active');
}
function renderUsers(users, clear) {
@ -86,14 +85,6 @@ App.Presenters.UserListPresenter = function(
});
}
function orderLinkClicked(e) {
e.preventDefault();
var $orderLink = jQuery(this);
var activeSearchOrder = $orderLink.attr('data-order');
params.query.order = activeSearchOrder;
pagerPresenter.setQuery(params.query);
}
return {
init: init,
reinit: reinit,

View file

@ -37,22 +37,22 @@
<span class="ops"><!--
--><% if (canVote) { %><!--
--><a class="score-up <% print(comment.ownScore === 1 ? 'active' : '') %>"><!--
--><a href="#" class="score-up <% print(comment.ownScore === 1 ? 'active' : '') %>"><!--
-->vote up<!--
--></a><!--
--><a class="score-down <% print(comment.ownScore === -1 ? 'active' : '') %>"><!--
--><a href="#" class="score-down <% print(comment.ownScore === -1 ? 'active' : '') %>"><!--
-->vote down<!--
--></a><!--
--><% } %><!--
--><% if (canEditComment) { %><!--
--><a class="edit"><!--
--><a href="#" class="edit"><!--
-->edit<!--
--></a><!--
--><% } %><!--
--><% if (canDeleteComment) { %><!--
--><a class="delete"><!--
--><a href="#" class="delete"><!--
-->delete<!--
--></a><!--
--><% } %><!--

View file

@ -38,18 +38,18 @@
<% if (isLoggedIn) { %>
<li>
<% if (hasFav) { %>
<a class="delete-favorite">
<a class="delete-favorite" href="#">
<i class="fa fa-heart"></i>
</a>
<% } else { %>
<a class="add-favorite">
<a class="add-favorite" href="#">
<i class="fa fa-heart-o"></i>
</a>
<% } %>
</li>
<li>
<a class="score-up <% print(ownScore === 1 ? 'active' : '') %>">
<a class="score-up <% print(ownScore === 1 ? 'active' : '') %>" href="#">
<% if (ownScore === 1) { %>
<i class="fa fa-thumbs-up"></i>
<% } else { %>
@ -59,7 +59,7 @@
</li>
<li>
<a class="score-down <% print(ownScore === -1 ? 'active' : '') %>">
<a class="score-down <% print(ownScore === -1 ? 'active' : '') %>" href="#">
<% if (ownScore === -1) { %>
<i class="fa fa-thumbs-down"></i>
<% } else { %>
@ -197,7 +197,7 @@
<ul class="operations">
<% if (_.any(editPrivileges)) { %>
<li>
<a class="edit">
<a class="edit" href="#">
Edit
</a>
</li>
@ -205,7 +205,7 @@
<% if (privileges.canDeletePosts) { %>
<li>
<a class="delete">
<a class="delete" href="#">
Delete
</a>
</li>
@ -213,7 +213,7 @@
<% if (privileges.canFeaturePosts) { %>
<li>
<a class="feature">
<a class="feature" href="#">
Feature
</a>
</li>
@ -221,7 +221,7 @@
<% if (privileges.canViewHistory) { %>
<li>
<a class="history">
<a class="history" href="#">
History
</a>
</li>

View file

@ -1,16 +1,16 @@
<div id="user-list">
<ul class="order">
<li>
<a class="big-button" data-order="name,asc">Sort A&rarr;Z</a>
<a class="big-button" href="#/users/order=name,asc">Sort A&rarr;Z</a>
</li>
<li>
<a class="big-button" data-order="name,desc">Sort Z&rarr;A</a>
<a class="big-button" href="#/users/order=name,desc">Sort Z&rarr;A</a>
</li>
<li>
<a class="big-button" data-order="registration_time,asc">Sort old&rarr;new</a>
<a class="big-button" href="#/users/order=registration_time,asc">Sort old&rarr;new</a>
</li>
<li>
<a class="big-button" data-order="registration_time,desc">Sort new&rarr;old</a>
<a class="big-button" href="#/users/order=registration_time,desc">Sort new&rarr;old</a>
</li>
</ul>