obsidian-plugin/sboulema_mtg-deck
1
0
Fork 0
mirror of https://github.com/sboulema/mtg-deck.git synced 2026-07-22 06:50:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Render as table instead of list

Browse source
This commit is contained in:
Samir Boulema 2026-05-06 13:53:30 +02:00
parent b96e38a4d2
commit 29470f7cec
3 changed files with 32 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
jest/fixtures/content.ts
View file

File diff suppressed because one or more lines are too long

32
src/renderer.ts
View file

@ -265,19 +265,28 @@ export const renderDecklist = async (
// Create a heading
const sectionHeadingEl = sectionContainer.createEl("h3", { cls: "decklist__section-heading" });
// Create container for the list items
const sectionList = sectionContainer.createEl("ul", { cls: "decklist__section-list" });
// Create container for the table rows
const sectionList = sectionContainer.createEl("table", { cls: "decklist__section-list" });
const sectionListBody = sectionList.createEl("tbody");
const sectionMissingCardCounts: CardCounts = {};
// Create line item elements
linesBySection[section].forEach((line: Line) => {
const lineEl = sectionList.createEl("li", { cls: "decklist__section-list-item" });
const lineEl = sectionListBody.createEl("tr", { cls: "decklist__section-list-item" });
if (line.lineType === "card") {
const cardCountEl = lineEl.createSpan({ cls: "count" });
const cardCountCell = lineEl.createEl("td");
const cardCountEl = cardCountCell.createSpan({ cls: "count" });
const cardNameEl = lineEl.createSpan({ cls: "card-name" });
const cardNameCell = lineEl.createEl("td");
const cardNameEl = cardNameCell.createSpan({ cls: "card-name" });
const cardCommentsCell = lineEl.createEl("td");
const cardCommentsEl = cardCommentsCell.createSpan({ cls: "comment" });
const cardPriceCell = lineEl.createEl("td");
const cardPriceEl = cardPriceCell.createSpan({ cls: "card-price" });
// Add hyperlink when possible
if (line.cardName) {
@ -301,20 +310,14 @@ export const renderDecklist = async (
}
if (line.errors && line.errors.length) {
lineEl.createSpan({
cardNameEl.createSpan({
cls: "error",
text: line.errors?.join(",") || "",
});
}
const cardCommentsEl = lineEl.createSpan({
cls: "comment",
text: line.comments?.join("#") || "",
});
cardCommentsEl.textContent = line.comments?.join("#") || "";
const cardPriceEl = lineEl.createSpan({
cls: "card-price",
});
let cardPrice;
if (line.cardName) {
cardPrice = getCardPrice(
@ -436,7 +439,8 @@ export const renderDecklist = async (
}
} else if (line.lineType === "comment") {
// Comments
lineEl.createSpan({
const commentCell = lineEl.createEl("td", { attr: { colspan: "4" } });
commentCell.createSpan({
cls: "comment",
text: line.comments?.join(" ") || "",
});

18
styles.css
View file

@ -11,10 +11,16 @@ If your plugin does not need CSS, delete this file.
padding: 8px;
}
ul.decklist__section-list {
list-style: none;
table.decklist__section-list {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
}
table.decklist__section-list td {
padding: 0;
vertical-align: top;
}
.decklist__section-totals {
@ -29,13 +35,13 @@ span.decklist__section-totals__count {
flex: 1;
}
.decklist__section-list-item {
tr.decklist__section-list-item {
font-weight: 400;
display: flex;
}
.decklist__section-list-item span {
flex: 1;
tr.decklist__section-list-item span {
display: block;
width: 100%;
}
.count {