Review paired list content layout ; ESC for unselection

This commit is contained in:
Claude Brisson
2024-01-18 06:57:34 +01:00
parent b261e56807
commit 897246c7a6
3 changed files with 61 additions and 27 deletions

View File

@@ -202,6 +202,22 @@
} }
} }
} }
#paired {
.listitem {
position: relative;
gap: 0;
.table, .handicap {
width: 3em;
}
.black, .white {
width: 45%;
}
.levels {
width: 6em;
}
}
}
#pairing-buttons { #pairing-buttons {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;

View File

@@ -189,17 +189,24 @@ onLoad(() => {
// keyboard handling // keyboard handling
document.on('keyup', e => { document.on('keyup', e => {
let tab = document.location.hash;
switch (e.key) { switch (e.key) {
case 'Escape': { case 'Escape': {
if (tab === '#registration') {
if ($('#player').hasClass('shown') && $('#needle')[0].value) { if ($('#player').hasClass('shown') && $('#needle')[0].value) {
$('#needle')[0].value = ''; $('#needle')[0].value = '';
initSearch(); initSearch();
} else { } else {
close_modal(); close_modal();
} }
} else if (tab === '#pairing') {
console.log('here')
$('#pairing-lists .selected.listitem').removeClass('selected');
}
break; break;
} }
case 'ArrowDown': { case 'ArrowDown': {
if (tab === '#registration') {
if (typeof(searchResultShown) === 'function' && searchResultShown()) { if (typeof(searchResultShown) === 'function' && searchResultShown()) {
let lines = $('.result-line'); let lines = $('.result-line');
if (typeof (searchHighlight) === 'undefined') searchHighlight = 0; if (typeof (searchHighlight) === 'undefined') searchHighlight = 0;
@@ -208,9 +215,11 @@ onLoad(() => {
lines.removeClass('highlighted'); lines.removeClass('highlighted');
lines[searchHighlight].addClass('highlighted'); lines[searchHighlight].addClass('highlighted');
} }
}
break; break;
} }
case 'ArrowUp': { case 'ArrowUp': {
if (tab === '#registration') {
if (typeof(searchResultShown) === 'function' && searchResultShown()) { if (typeof(searchResultShown) === 'function' && searchResultShown()) {
let lines = $('.result-line'); let lines = $('.result-line');
if (typeof (searchHighlight) === 'undefined') searchHighlight = 0; if (typeof (searchHighlight) === 'undefined') searchHighlight = 0;
@@ -219,9 +228,11 @@ onLoad(() => {
lines.removeClass('highlighted'); lines.removeClass('highlighted');
lines[searchHighlight].addClass('highlighted'); lines[searchHighlight].addClass('highlighted');
} }
}
break; break;
} }
case 'Enter': { case 'Enter': {
if (tab === '#registration') {
if (typeof(searchResultShown) === 'function') { if (typeof(searchResultShown) === 'function') {
if (searchResultShown()) { if (searchResultShown()) {
fillPlayer(searchResult[searchHighlight]); fillPlayer(searchResult[searchHighlight]);
@@ -229,6 +240,7 @@ onLoad(() => {
$('#register')[0].click(); $('#register')[0].click();
} }
} }
}
break; break;
} }
} }

View File

@@ -51,7 +51,13 @@
#foreach($game in $games) #foreach($game in $games)
#set($white = $pmap[$game.w]) #set($white = $pmap[$game.w])
#set($black = $pmap[$game.b]) #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>&nbsp;</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&nbsp;/&nbsp;#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}&nbsp;#end</div>
</div>
#end #end
</div> </div>
</div> </div>