Skip to content

Commit

Permalink
Right align grades on mobile & improve layout #721
Browse files Browse the repository at this point in the history
  • Loading branch information
hupf committed Dec 11, 2024
1 parent 316e615 commit f3ddd45
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 13 deletions.
2 changes: 1 addition & 1 deletion src/app/events/components/grade/grade.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
}

:host ::ng-deep select {
min-width: 13ch;
width: 127px; // 13ch
}

@include media-breakpoint-up(sm) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export class GradeSelectComponent {
@Input() valueId: Option<number>; // the selected key from the options list
@Input() gradeId: Option<number>; // the id of the grade itself
@Input() disabled: boolean = false;
@Input() width: string = "13ch";
@Input() width: string = "127px"; // 13ch

@Output() gradeIdSelected = new EventEmitter<{
id: number;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
}
<th class="filler"></th>
</tr>
<tr>
<tr [ngClass]="{ 'test-point-grading': selectedTest?.IsPointGrading }">
<th class="sticky student-name" (click)="state.sortBy('FullName')">
<div class="d-flex">
<div class="column-title">
Expand Down Expand Up @@ -90,7 +90,7 @@
>
<div class="d-flex">
@if (test.IsPointGrading) {
<div class="column-title me-3 point-input-container">
<div class="column-title point-input-container me-2 me-md-3">
<span (click)="state.sortBy(test)"
>{{ "tests.points" | translate }}
</span>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,26 @@
@import "../../../../bootstrap-variables";
@import "node_modules/bootstrap/scss/mixins";

/**
* Common table styles for the TestEditGradesComponent & the TestEditGradesHeaderComponent
*/

:host {
--spacer: 16px;

--point-input-size: 4em;
--grade-input-size: 127px; // 13ch
--points-grade-gap: 1rem;

--student-name-column-width: 225px;
--student-grade-column-width: 147px;
--student-grade-column-width: calc(
var(--spacer) + var(--grade-input-size) + var(--spacer)
);
--student-average-column-width: 100px;
--test-grade-column-width: 300px;
--point-input-size: 4em;
--test-grade-column-width: calc(
var(--spacer) + var(--point-input-size) + var(--points-grade-gap) +
var(--grade-input-size) + var(--spacer)
);

--student-grade-column-offset: var(--student-name-column-width);
--student-average-column-offset: calc(
Expand All @@ -30,6 +41,12 @@ $student-average-breakpoint: 1200px;
}
}

@include media-breakpoint-down(md) {
:host {
--points-grade-gap: calc(0.5 * var(--spacer));
}
}

th,
td {
padding: $spacer;
Expand All @@ -46,28 +63,44 @@ td {
}

tr:not(.header-collapsible) th.test-grade,
td.test-grade,
th.student-grade,
td.student-grade {
width: calc(var(--point-input-size) + 13ch + 3 * $spacer);
td.test-grade {
width: var(--test-grade-column-width);
min-width: var(--test-grade-column-width);
max-width: var(--test-grade-column-width);
}
@media (max-width: ($bkd-tests-mobile-breakpoint)) {
tr:not(.header-collapsible):not(.test-point-grading) th.test-grade,
tr:not(.test-point-grading) th.student-grade,
table:not(.test-point-grading) td.test-grade,
table:not(.test-point-grading) td.student-grade {
width: calc(var(--spacer) + var(--grade-input-size) + var(--spacer));
min-width: calc(var(--spacer) + var(--grade-input-size) + var(--spacer));
max-width: calc(var(--spacer) + var(--grade-input-size) + var(--spacer));
}
}

/**
* Column at the end of the table that eats up all the remaining space such that
* the all other (fixed-width) columns don't get stretched.
*/
th.filler,
.header-collapsible th.filler,
td.filler {
padding: 0;
width: auto;
}
@media (max-width: ($bkd-tests-mobile-breakpoint)) {
th.filler,
.header-collapsible th.filler,
td.filler {
width: 0;
}
}

th.test-grade .column-title.point-input-container {
width: var(--point-input-size);
}

// Mobile view
@media (max-width: ($bkd-tests-mobile-breakpoint)) {
.desktop:not(.selected),
Expand Down Expand Up @@ -98,6 +131,7 @@ td.filler {
.student-name {
flex: 1;
display: block;
padding-right: 0;
}

.test-grade {
Expand Down Expand Up @@ -131,6 +165,7 @@ td.filler {
}

.test-grade {
width: var(--test-grade-column-width);
min-width: var(--test-grade-column-width);
max-width: var(--test-grade-column-width);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<div class="table-responsive-wrapper">
<table
class="table table-hover h-100"
[ngClass]="{ 'test-point-grading': selectedTest?.IsPointGrading }"
bkdTestEditGradesHeaderSticky
[inlineHeader]="inlineHeader"
[stickyHeader]="stickyHeader"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
@import "./test-edit-grades-common";

tbody td.student-name {
padding-right: 0;

&,
* {
white-space: nowrap;
Expand Down

0 comments on commit f3ddd45

Please sign in to comment.