Made most things reachable with just a keyboard
This commit is contained in:
parent
33b205b574
commit
765d553a84
10 changed files with 38 additions and 34 deletions
|
@ -42,7 +42,9 @@ a {
|
|||
text-decoration: none;
|
||||
cursor: pointer; /* for links without [href] */
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 2px solid #64C2ED;
|
||||
}
|
||||
a:hover {
|
||||
color: #34B2ED;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
#post-upload-step1 .file-handler {
|
||||
padding: 3.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#post-upload-step1 .url-handler {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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><!--
|
||||
--><% } %><!--
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
<div id="user-list">
|
||||
<ul class="order">
|
||||
<li>
|
||||
<a class="big-button" data-order="name,asc">Sort A→Z</a>
|
||||
<a class="big-button" href="#/users/order=name,asc">Sort A→Z</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="big-button" data-order="name,desc">Sort Z→A</a>
|
||||
<a class="big-button" href="#/users/order=name,desc">Sort Z→A</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="big-button" data-order="registration_time,asc">Sort old→new</a>
|
||||
<a class="big-button" href="#/users/order=registration_time,asc">Sort old→new</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="big-button" data-order="registration_time,desc">Sort new→old</a>
|
||||
<a class="big-button" href="#/users/order=registration_time,desc">Sort new→old</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
Loading…
Reference in a new issue