Skip to content

Commit

Permalink
Fixate students column width to solve sticky header glitch #693
Browse files Browse the repository at this point in the history
  • Loading branch information
hupf committed Jun 24, 2024
1 parent 41caa13 commit 89bf076
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 14 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<th
*ngFor="let test of data.tests"
container="body"
class="grade h-100 test-info-desktop"
class="grade test-info-desktop"
[ngClass]="test.Id === selectedTest?.Id ? 'selected' : ''"
>
<bkd-test-table-header
Expand All @@ -29,7 +29,7 @@
<th
*ngFor="let test of data.tests"
container="body"
class="grade h-100 header-mobile test-info-mobile"
class="grade header-mobile test-info-mobile"
colspan="3"
[ngClass]="test.Id === selectedTest?.Id ? 'selected' : ''"
>
Expand Down Expand Up @@ -83,7 +83,7 @@
<th
*ngFor="let test of data.tests"
container="body"
class="grade h-100"
class="grade"
[ngClass]="test.Id === selectedTest?.Id ? 'selected' : ''"
>
<div class="d-flex">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +99,13 @@ export class TestEditGradesHeaderComponent {
}

getColumnWidths(): ReadonlyArray<ReadonlyArray<number>> {
return this.getColumns().map((columns) =>
return this.getRowsAndColumns().map((columns) =>
columns.map((column) => column.getBoundingClientRect().width),
);
}

setColumnWidths(columnWidths: ReadonlyArray<ReadonlyArray<number>>): void {
const rows = this.getColumns();
const rows = this.getRowsAndColumns();

if (
rows.length !== columnWidths.length ||
Expand All @@ -128,7 +128,7 @@ export class TestEditGradesHeaderComponent {
* FIREFOX HACK: See TestEditGradesHeaderStickyDirective
*/
getStickyColumnsHeights(): ReadonlyArray<ReadonlyArray<number>> {
return this.getColumns(".sticky").map((columns) =>
return this.getRowsAndColumns(".sticky").map((columns) =>
columns.map((column) => column.getBoundingClientRect().height),
);
}
Expand All @@ -139,7 +139,7 @@ export class TestEditGradesHeaderComponent {
setStickyColumnHeights(
columnHeights: ReadonlyArray<ReadonlyArray<number>>,
): void {
const rows = this.getColumns(".sticky");
const rows = this.getRowsAndColumns(".sticky");

if (
rows.length !== columnHeights.length ||
Expand All @@ -155,9 +155,19 @@ export class TestEditGradesHeaderComponent {
column.style.height = `${columnHeights[i][j]}px`;
}),
);

// Since the sticky elements will be `fixed`, set the max height on the row
// as well
this.getRows().forEach((row, i) => {
const rowHeight = columnHeights[i].reduce(
(acc, height) => Math.max(acc, height),
0,
);
row.style.height = `${rowHeight}px`;
});
}

private getColumns(
private getRowsAndColumns(
customColumnsSelector?: string,
): ReadonlyArray<ReadonlyArray<HTMLTableCellElement>> {
return this.getRows().map((row) =>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,13 @@ td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 300px;
min-width: 300px;
max-width: 300px;
}

.secondary-column-width {
width: 100px;
min-width: 100px;
max-width: 100px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ td.name {

tbody td.name,
tbody td.average {
max-width: 18ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Expand All @@ -44,11 +43,6 @@ tbody td.average {
border-spacing: 0;
}

tbody td.name {
max-width: auto;
overflow: visible;
}

tbody td.sticky {
position: sticky;
left: 0;
Expand Down

0 comments on commit 89bf076

Please sign in to comment.