Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-04 22:58:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Text in table cells can now be aligned. Table now works in firefox.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-09-07 20:43:53 +02:00
parent a28a8ce624
commit d7490b0d3c
4 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/core/gui/Table.css
View File

@ -1,4 +1,5 @@
.core_Table {
position: relative;
display: block;
box-sizing: border-box;
overflow: auto;
@ -11,10 +12,16 @@
align-items: stretch;
}
.core_Table thead {
position: sticky;
display: inline-block;
top: 0;
z-index: 2;
}
.core_Table thead tr {
position: sticky;
top: 0;
z-index: 2;
}
.core_Table th,

11
src/core/gui/Table.ts
View File

@ -12,6 +12,7 @@ export type Column<T> = {
title: string;
sticky?: boolean;
width?: number;
text_align?: string;
create_cell(value: T, disposer: Disposer): HTMLTableCellElement;
};
@ -43,14 +44,14 @@ export class Table<T> extends Widget<HTMLTableElement> {
text: column.title,
});
if (column.width != undefined) th.style.width = `${column.width}px`;
if (column.sticky) {
th.style.position = "sticky";
th.style.left = `${left}px`;
left += column.width || 0;
}
if (column.width != undefined) th.style.width = `${column.width}px`;
return th;
}),
);
@ -97,14 +98,16 @@ export class Table<T> extends Widget<HTMLTableElement> {
...this.columns.map(column => {
const cell = column.create_cell(value, disposer);
if (column.width != undefined) cell.style.width = `${column.width}px`;
if (column.sticky) {
cell.style.position = "sticky";
cell.style.left = `${left}px`;
left += column.width || 0;
}
if (column.width != undefined) cell.style.width = `${column.width}px`;
if (column.text_align) cell.style.textAlign = column.text_align;
return cell;
}),
);

1
src/hunt_optimizer/gui/MethodsForEpisodeView.ts
View File

@ -65,6 +65,7 @@ export class MethodsForEpisodeView extends ResizableWidget {
return {
title: npc_data(enemy_type).simple_name,
width: 80,
text_align: "right",
create_cell(method: HuntMethodModel): HTMLTableDataCellElement {
const count = method.enemy_counts.get(enemy_type);
return el.td({ text: count == undefined ? "" : count.toString() });

5
src/hunt_optimizer/gui/OptimizerView.ts
View File

@ -4,12 +4,9 @@ import { WantedItemsView } from "./WantedItemsView";
import "./OptimizerView.css";
export class OptimizerView extends ResizableWidget {
private readonly wanted_items_view: WantedItemsView;
constructor() {
super(el.div({ class: "hunt_optimizer_OptimizerView" }));
this.wanted_items_view = this.disposable(new WantedItemsView());
this.element.append(this.wanted_items_view.element);
this.element.append(this.disposable(new WantedItemsView()).element);
}
}