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

Show recertification four at a time, two by two

Browse Source 
Eight tiles across left each one too narrow to read at floor distance. The row
now shows four per page in a 2x2 block, cycling on the same seven-second timer,
so a name is legible from where people actually stand.

The tiles lay the photo beside the name rather than above it. Two rows of
stacked tiles would roughly double the section's height, and the board is
scaled to fit one screen, so height spent here shrinks everything else. The
photo grows to 120px and the name to 26px in the space that buys.
This commit is contained in:
cproudlock
2026-08-07 09:22:41 -04:00
parent fef5e28952
commit af60a77399
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -252,9 +252,10 @@ const recertDescriptions = computed(() => {
return out
})
// 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
// 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
const currentRecertPage = ref(0)
const recertPageCount = computed(() =>
Math.max(1, Math.ceil(recertifications.value.length / RECERT_PAGE_SIZE))
@@ -577,26 +578,29 @@ function handlePhotoError(e) {
margin: -4px 0 14px;
line-height: 1.35;
}
/* Single row that cycles through pages of employees */
/* 2x2 block that cycles through pages of employees */
.recert-row {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.recert-tile {
background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
border: 2px solid #0d6efd;
border-radius: 10px;
padding: 14px 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. */
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
gap: 18px;
text-align: left;
}
.recert-photo {
width: 90px;
height: 90px;
width: 120px;
height: 120px;
flex: none;
border-radius: 50%;
object-fit: cover;
border: 3px solid #0d6efd;
@@ -608,7 +612,9 @@ function handlePhotoError(e) {
background: #fff;
}
.recert-name {
font-size: 20px;
flex: 1;
min-width: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.15;
/* Always reserve two lines so a name that wraps does not make its tile