Deck editor mobile layout fixes

TableturfBattleClient/index.html

@@ -434,7 +434,12 @@
 			<section id="deckEditorDeckViewSection">
 				<a id="deckViewBackButton" href="#">Back</a>
 				<h3 id="deckName">&nbsp;</h3>
-				<div id="deckListToolbar">
+				<button id="deckViewMenuButton" class="menuButton">
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
+						<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
+					</svg>
+				</button>
+				<div id="deckViewMenu" class="menu">
 					<button type="button" id="deckListTestButton" disabled>Test</button>
 					<button type="button" id="deckExportButton" disabled>Export</button>
 					<button type="button" id="deckCopyButton" disabled>Copy</button>
@@ -443,7 +448,7 @@
 					<button type="button" id="deckRenameButton" disabled>Rename</button>
 					<button type="button" id="deckDeleteButton" class="danger" disabled>Delete</button>
 				</div>
-				<div class="deckSizeContainer">Total <div id="deckViewSize">0</div></div>
+				<div class="deckSizeContainer"><div class="sizeLabel">Total</div> <div id="deckViewSize">0</div></div>
 				<div id="deckCardListView">
 				</div>
 			</section>
@@ -546,13 +551,18 @@
 		<div id="deckEditPage" hidden>
 			<section id="deckEditorDeckEditPage">
 				<h3 id="deckName2">Deck</h3>
-				<div id="deckEditToolbar">
+				<button id="deckEditMenuButton" class="menuButton">
+					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
+						<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
+					</svg>
+				</button>
+				<div id="deckEditMenu" class="menu">
 					<button type="button" id="deckSortButton">Sort</button>
 					<button type="button" id="deckTestButton">Test</button>
 					<button type="button" id="deckSaveButton">Save</button>
 					<button type="button" id="deckCancelButton">Cancel</button>
 				</div>
-				<div class="deckSizeContainer">Total <div id="deckEditSize">0</div></div>
+				<div class="deckSizeContainer"><div class="sizeLabel">Total</div> <div id="deckEditSize">0</div></div>
 				<div id="deckCardListEdit">
 				</div>
 			</section>

TableturfBattleClient/src/Pages/DeckEditPage.ts

@@ -5,6 +5,9 @@ const deckEditSize = document.getElementById('deckEditSize')!;
 const deckCardListEdit = document.getElementById('deckCardListEdit')!;
 const cardList = CardList.fromId('cardList', 'cardListSortBox', 'cardListFilterBox');
 const cardListButtonGroup = new CheckButtonGroup<Card>();
+
+const deckEditMenu = document.getElementById('deckEditMenu')!;
+const deckEditMenuButton = document.getElementById('deckEditMenuButton') as HTMLButtonElement;
 const deckSortButton = document.getElementById('deckSortButton') as HTMLButtonElement;
 const deckTestButton = document.getElementById('deckTestButton') as HTMLButtonElement;
 const deckSaveButton = document.getElementById('deckSaveButton') as HTMLButtonElement;
@@ -38,7 +41,7 @@ function deckEditInitCardDatabase(cards: Card[]) {
 			const oldCardNumber = oldEntry.value;
 
 			if (oldCardNumber != 0)
-				cardListButtonGroup.entries.find(e => e.value.number == oldCardNumber)!.button.enabled = true;
+				cardListButtonGroup.entries.find(e => e.value.number == oldCardNumber || e.value.altNumber == oldCardNumber)!.button.enabled = true;
 			cardListButtonGroup.entries.find(e => e.value.number == card.number)!.button.enabled = false;
 
 			const button3 = createDeckEditCardButton(card.number);
@@ -237,9 +240,18 @@ function deckSortCompare(reverse: boolean, numberA: number, numberB: number) {
 		else if (cardB.isSpecialWeapon && !cardA.isSpecialWeapon)
 			return ((userConfig.specialWeaponSorting == SpecialWeaponSorting.Last) != reverse) ? -1 : 1;
 	}
-	return CardList.cardSortOrders['size'](cardA, cardB);
+	const result = CardList.cardSortOrders['size'](cardA, cardB);
+	return reverse ? -result : result;
 }
 
+deckEditMenuButton.addEventListener('click', () => {
+	deckEditMenu.classList.toggle('showing');
+});
+
+deckEditMenu.addEventListener('click', () => {
+	deckEditMenu.classList.remove('showing');
+});
+
 deckSortButton.addEventListener('click', _ => {
 	// Check whether the deck is already sorted so that the order will be reversed if so.
 	let isSorted = true;

TableturfBattleClient/src/Pages/DeckListPage.ts

@@ -9,6 +9,9 @@ const deckCardListView = document.getElementById('deckCardListView')!;
 const addDeckControls = document.getElementById('addDeckControls')!;
 const newDeckButton = document.getElementById('newDeckButton') as HTMLButtonElement;
 const importDeckButton = document.getElementById('importDeckButton') as HTMLButtonElement;
+
+const deckViewMenu = document.getElementById('deckViewMenu')!;
+const deckViewMenuButton = document.getElementById('deckViewMenuButton') as HTMLButtonElement;
 const deckSleevesButton = document.getElementById('deckSleevesButton') as HTMLButtonElement;
 const deckEditButton = document.getElementById('deckEditButton') as HTMLButtonElement;
 const deckListTestButton = document.getElementById('deckListTestButton') as HTMLButtonElement;
@@ -88,6 +91,7 @@ deckViewBackButton.addEventListener('click', e => {
 	clearChildren(deckCardListView);
 	deselectDeck();
 	deckListPage.classList.remove('showingDeck');
+	deckViewMenu.classList.remove('showing');
 });
 
 function saveDecks() {
@@ -299,6 +303,14 @@ function parseDecksForImport(s: string) {
 	// TODO: add support for tblturf.ink
 }
 
+deckViewMenuButton.addEventListener('click', () => {
+	deckViewMenu.classList.toggle('showing');
+});
+
+deckViewMenu.addEventListener('click', () => {
+	deckViewMenu.classList.remove('showing');
+});
+
 deckSleevesButton.addEventListener('click', () => {
 	if (selectedDeck == null) return;
 	deckSleevesButtons[selectedDeck.sleeves].checked = true;

TableturfBattleClient/tableturf.css

@@ -773,7 +773,7 @@ rect.special, g.specialCost rect {
 }
 .cardListGrid:not([hidden]) {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
 	overflow-y: auto;
 	justify-items: center;
 	grid-auto-rows: max-content;
@@ -1617,6 +1617,7 @@ button.dragging {
 	grid-template-columns: 1fr auto;
 	grid-template-rows: auto auto 1fr;
 	height: 100vh;
+	position: relative;
 }
 
 #deckViewBackButton, #deckCardListBackButton {
@@ -1628,13 +1629,17 @@ button.dragging {
 	grid-row: 1;
 }
 
-#deckEditToolbar, #deckListToolbar {
+.menuButton {
+	display: none;
+}
+
+.menu {
 	grid-column: 1;
 	grid-row: 3;
 	display: flex;
 	flex-flow: column;
 }
-:is(#deckListToolbar, #deckEditToolbar) button {
+.menu button {
 	margin: 0.25em;
 	width: 5em;
 	height: 4em;
@@ -1813,6 +1818,8 @@ button.dragging {
 @media (max-width: 40rem) {
 	.cardButton {
 		margin: 0;
+		width: auto;
+		justify-self: stretch;
 	}
 	.cardListGrid:not([hidden]) {
 		justify-items: stretch;
@@ -2011,32 +2018,69 @@ button.dragging {
 
 	#deckCardListBackButton {
 		display: block;
-		grid-column: 1;
-		grid-row: 1;
+		flex-grow: 1;
+	}
+
+	#deckName, #deckName2 {
+		margin: 0.5em 0;
 	}
 
 	#deckName {
 		grid-column: 2 / -1;
 	}
 
-	#deckListToolbar, #deckEditToolbar {
+	#cardListHeader h3 {
+		display: none;
+	}
+
+	.menuButton {
+		display: block;
+		grid-row: 1;
+		grid-column: -2;
+		background: none;
+		border: none;
+	}
+	.menuButton svg {
+		width: 2em;
+		height: 2em;
+	}
+
+	.menu {
 		grid-row: 2;
 		grid-column: 1 / -2;
 		flex-flow: row;
 	}
 
-	:is(#deckListToolbar, #deckEditToolbar) button {
-		width: auto;
-		flex-grow: 1;
-		flex-basis: 4em;
+	.menu:not(.showing) {
+		display: none;
+	}
+
+	.menu.showing {
+		grid-row: 2 / -1;
+		grid-column: 1 / -1;
+		z-index: 2;
+		display: flex;
+		flex-flow: column;
+		background: #000000c0;
+		align-items: end;
+	}
+
+	.menu button {
+		grid-column: -2;
+		grid-row: 2;
+		justify-self: end;
+		flex-grow: 0;
 	}
 
 	.deckSizeContainer {
 		grid-column: -2;
 		grid-row: 2;
 		justify-self: end;
+		padding: 0.25em 0;
 	}
 
+	.sizeLabel { display: none; }
+
 	#deckCardListView, #deckCardListEdit {
 		grid-column: 1 / -1;
 		grid-row: 3;
@@ -2044,6 +2088,7 @@ button.dragging {
 		font-size: 80%;
 		grid-template-columns: 1fr 1fr 1fr;
 		width: 100%;
+		min-width: 0;
 	}
 
 	#deckEditorCardListSection:not(.selecting) {
@@ -2064,10 +2109,6 @@ button.dragging {
 		font-size: 55%;
 	}
 
-	#cardList .cardButton {
-		height: 13em;
-	}
-
 	#testControls:not([hidden]) {
 		grid-column: 1 / -1;
 		grid-row: -2;