Review paired list content layout ; ESC for unselection
This commit is contained in:
@@ -202,6 +202,22 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
#paired {
|
||||
.listitem {
|
||||
position: relative;
|
||||
gap: 0;
|
||||
.table, .handicap {
|
||||
width: 3em;
|
||||
}
|
||||
.black, .white {
|
||||
width: 45%;
|
||||
}
|
||||
.levels {
|
||||
width: 6em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
#pairing-buttons {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
@@ -189,17 +189,24 @@ onLoad(() => {
|
||||
|
||||
// keyboard handling
|
||||
document.on('keyup', e => {
|
||||
let tab = document.location.hash;
|
||||
switch (e.key) {
|
||||
case 'Escape': {
|
||||
if (tab === '#registration') {
|
||||
if ($('#player').hasClass('shown') && $('#needle')[0].value) {
|
||||
$('#needle')[0].value = '';
|
||||
initSearch();
|
||||
} else {
|
||||
close_modal();
|
||||
}
|
||||
} else if (tab === '#pairing') {
|
||||
console.log('here')
|
||||
$('#pairing-lists .selected.listitem').removeClass('selected');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'ArrowDown': {
|
||||
if (tab === '#registration') {
|
||||
if (typeof(searchResultShown) === 'function' && searchResultShown()) {
|
||||
let lines = $('.result-line');
|
||||
if (typeof (searchHighlight) === 'undefined') searchHighlight = 0;
|
||||
@@ -208,9 +215,11 @@ onLoad(() => {
|
||||
lines.removeClass('highlighted');
|
||||
lines[searchHighlight].addClass('highlighted');
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'ArrowUp': {
|
||||
if (tab === '#registration') {
|
||||
if (typeof(searchResultShown) === 'function' && searchResultShown()) {
|
||||
let lines = $('.result-line');
|
||||
if (typeof (searchHighlight) === 'undefined') searchHighlight = 0;
|
||||
@@ -219,9 +228,11 @@ onLoad(() => {
|
||||
lines.removeClass('highlighted');
|
||||
lines[searchHighlight].addClass('highlighted');
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Enter': {
|
||||
if (tab === '#registration') {
|
||||
if (typeof(searchResultShown) === 'function') {
|
||||
if (searchResultShown()) {
|
||||
fillPlayer(searchResult[searchHighlight]);
|
||||
@@ -229,6 +240,7 @@ onLoad(() => {
|
||||
$('#register')[0].click();
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
@@ -51,7 +51,13 @@
|
||||
#foreach($game in $games)
|
||||
#set($white = $pmap[$game.w])
|
||||
#set($black = $pmap[$game.b])
|
||||
<div class="listitem game" data-id="$game.id"><span class="table">#$game.t</span><span class="white">#if($white)$white.name $white.firstname #rank($white.rank)#{else}BIP#end</span><span> </span><span class="black">#if($black)$black.name $black.firstname #rank($black.rank)#{else}BIP#end</span>#if($game.h)<span class="handicap">h$game.h</span>#end</div>
|
||||
<div class="listitem game" data-id="$game.id">
|
||||
<div class="table">#$game.t</div>
|
||||
<div class="white">#if($white)$white.name $white.firstname#{else}BIP#end</div>
|
||||
<div class="levels">#if($white)#rank($white.rank)#end / #if($black)#rank($black.rank)#end</div>
|
||||
<div class="black">#if($black)$black.name $black.firstname#{else}BIP#end</div>
|
||||
<div class="handicap">#if($game.h)h$game.h#{else} #end</div>
|
||||
</div>
|
||||
#end
|
||||
</div>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user