Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-08-22 19:04:02 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Limit the draggable area on cards to the title in touch mode

Browse Source 
This makes it much easier to scroll the list.
This commit is contained in:
Andrio Celos
2023-08-31 13:01:19 +10:00
parent 5dfd7b6a44
commit 1084b56f0b
3 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
TableturfBattleClient/src/Pages/DeckEditPage.ts
View File

@@ -113,7 +113,6 @@ function editDeck() {
function createDeckEditCardButton(cardNumber: number) {
const button = new CardButton(cardDatabase.get(cardNumber));
button.buttonElement.draggable = true;
button.buttonElement.addEventListener('click', () => {
for (const button2 of cardList.cardButtons) {
button2.checked = button2.card.number == cardNumber;
@@ -140,6 +139,15 @@ function createDeckEditCardButton(cardNumber: number) {
button.buttonElement.addEventListener('dragover', deckEditCardButton_dragover);
button.buttonElement.addEventListener('drop', deckEditCardButton_drop);
const handle = document.createElement('div');
handle.className = 'handle';
button.buttonElement.insertBefore(handle, button.buttonElement.firstChild);
if (deckListTouchMode) {
handle.draggable = true;
(button.buttonElement.getElementsByClassName('cardHeader')[0] as HTMLElement).draggable = true;
} else
button.buttonElement.draggable = true;
return button;
}

4
TableturfBattleClient/src/Pages/DeckListPage.ts
View File

@@ -113,7 +113,6 @@ function saveDecks() {
function createDeckButton(deck: Deck) {
const buttonElement = document.createElement('button');
buttonElement.type = 'button';
buttonElement.draggable = true;
const button = new CheckButton(buttonElement);
deckButtons.add(button, deck);
buttonElement.addEventListener('click', () => {
@@ -145,6 +144,7 @@ function createDeckButton(deck: Deck) {
handle.className = 'handle';
buttonElement.appendChild(handle);
buttonElement.appendChild(document.createTextNode(deck.name));
(deckListTouchMode ? handle : buttonElement).draggable = true;
return button;
}
@@ -329,7 +329,7 @@ deckRenameButton.addEventListener('click', () => {
if (name) {
selectedDeck.name = name;
deckNameLabel.innerText = name;
deckButtons.entries[decks.indexOf(selectedDeck)].button.buttonElement.innerText = name;
deckButtons.entries[decks.indexOf(selectedDeck)].button.buttonElement.lastChild!.nodeValue = name;
saveDecks();
}
});

14
TableturfBattleClient/tableturf.css
View File

@@ -1374,17 +1374,23 @@ button.dragging {
#addDeckControls > button:focus-within { outline: 2px solid var(--special-accent-colour-2); }
#addDeckControls > button:is(:active, .checked) { border-color: var(--special-accent-colour-2); }
.handle {
width: 2em;
background: url('assets/grip-horizontal.svg') 0.5em center/1em no-repeat;
}
.deckList .handle {
position: absolute;
background: url('assets/grip-horizontal.svg') 0.5em center/1em no-repeat;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.touchmode .handle {
width: 2em;
.card .handle {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3em;
}
.card.emptySlot {