ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Show recertification four at a time, two by two"

Browse Source 
This reverts commit af60a77399.
This commit is contained in:
cproudlock
2026-08-07 09:44:26 -04:00
parent af60a77399
commit a52e192501
1 changed files with 12 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/views/ShopfloorDashboard.vue
View File

@@ -252,10 +252,9 @@ const recertDescriptions = computed(() => {
return out
})
// Recertification shows a rotating 2x2 block: one page of tiles at a time so it
// stays compact on any screen, cycling through everyone due. Eight across left
// each tile too narrow to read at floor distance.
const RECERT_PAGE_SIZE = 4
// Recertification shows as a single rotating row: one page of tiles at a time
// so it stays compact on any screen, cycling through everyone due.
const RECERT_PAGE_SIZE = 8
const currentRecertPage = ref(0)
const recertPageCount = computed(() =>
Math.max(1, Math.ceil(recertifications.value.length / RECERT_PAGE_SIZE))
@@ -578,29 +577,26 @@ function handlePhotoError(e) {
margin: -4px 0 14px;
line-height: 1.35;
}
/* 2x2 block that cycles through pages of employees */
/* Single row that cycles through pages of employees */
.recert-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(8, 1fr);
gap: 14px;
}
.recert-tile {
background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
border: 2px solid #0d6efd;
border-radius: 10px;
padding: 14px 18px;
/* Photo beside the name rather than above it: two rows of stacked tiles
would double the section's height, and the whole board is scaled to fit
one screen, so height here shrinks everything else. */
padding: 14px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: left;
gap: 10px;
text-align: center;
}
.recert-photo {
width: 120px;
height: 120px;
flex: none;
width: 90px;
height: 90px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #0d6efd;
@@ -612,9 +608,7 @@ function handlePhotoError(e) {
background: #fff;
}
.recert-name {
flex: 1;
min-width: 0;
font-size: 26px;
font-size: 20px;
font-weight: 700;
line-height: 1.15;
/* Always reserve two lines so a name that wraps does not make its tile