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

printedparts kiosk: keypad and entry-panel visual polish
Some checks failed
CI / backend (push) Successful in 1m44s
Details
CI / naming (push) Successful in 2s
Details
CI / frontend (push) Successful in 8s
Details
CI / migrations-mysql (push) Failing after 7s
Details

Browse Source 
The keypad becomes a proper terminal pad: fixed 3-column grid of
rounded square buttons with tabular numerals, press feedback, and
muted Clear/backspace actions. Each manual step (item number, SSO,
quantity) shares one card panel - boxed entry display with placeholder
styling, keypad, and a full-width action button.
This commit is contained in:
cproudlock
2026-07-17 09:13:27 -04:00
parent 4dfdb167d5
commit 96e48e0f50
2 changed files with 83 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/TouchKeypad.vue
View File

@@ -4,11 +4,11 @@
class="keypad-button" @click="$emit('digit', digit)">
{{ digit }}
</button>
<button type="button" class="keypad-button keypad-muted"
@click="$emit('clear')">C</button>
<button type="button" class="keypad-button keypad-action"
@click="$emit('clear')">Clear</button>
<button type="button" class="keypad-button" @click="$emit('digit', '0')">0</button>
<button type="button" class="keypad-button keypad-muted"
@click="$emit('backspace')">&lt;</button>
<button type="button" class="keypad-button keypad-action"
aria-label="Backspace" @click="$emit('backspace')">&#9003;</button>
</div>
</template>
@@ -20,19 +20,35 @@ defineEmits(['digit', 'clear', 'backspace'])
<style scoped>
.touch-keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
max-width: 20rem;
grid-template-columns: repeat(3, 5.2rem);
gap: 0.65rem;
justify-content: center;
}
.keypad-button {
font-size: 1.8rem;
padding: 1rem 0;
border-radius: 0.5rem;
height: 4.4rem;
font-size: 1.9rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
border-radius: 0.75rem;
border: 1px solid var(--border);
background: var(--bg-card);
background: var(--bg-card-solid, var(--bg-card));
color: var(--text);
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
transition: transform 0.05s ease, background 0.1s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.keypad-button:active { background: var(--primary); color: #fff; }
.keypad-muted { color: var(--text-light); }
.keypad-button:hover { border-color: var(--primary); }
.keypad-button:active {
background: var(--primary);
color: #fff;
transform: scale(0.96);
}
.keypad-action {
font-size: 1.1rem;
font-weight: 500;
color: var(--text-light);
}
.keypad-action:active { color: #fff; }
</style>

74
frontend/src/views/printedparts/PartsKiosk.vue
View File

@@ -21,15 +21,17 @@
No scanner?
<a href="#" @click.prevent="manualEntry = !manualEntry">Type the number</a>
</p>
<div v-if="manualEntry" class="manual-block">
<div class="quantity-display">{{ manualCode || 'label number' }}</div>
<div v-if="manualEntry" class="entry-panel">
<div class="entry-display" :class="{ empty: !manualCode }">
{{ manualCode || 'label number' }}
</div>
<TouchKeypad @digit="manualCode += $event"
@clear="manualCode = ''"
@backspace="manualCode = manualCode.slice(0, -1)" />
<button class="btn btn-primary take-button" :disabled="!manualCode"
@click="lookupItem(manualCode)">Look up</button>
<p class="kiosk-hint">Just the number from the label - e.g. 4 for
{{ '0004' }}; letters are added automatically.</p>
<p class="kiosk-hint">Just the number from the label; letters are
added automatically.</p>
</div>
</section>
@@ -43,8 +45,10 @@
</div>
</div>
<p class="kiosk-prompt">Scan your badge or tap in your SSO</p>
<div class="manual-block">
<div class="quantity-display">{{ manualBadge || 'SSO' }}</div>
<div class="entry-panel">
<div class="entry-display" :class="{ empty: !manualBadge }">
{{ manualBadge || 'SSO' }}
</div>
<TouchKeypad @digit="manualBadge += $event"
@clear="manualBadge = ''"
@backspace="manualBadge = manualBadge.slice(0, -1)" />
@@ -63,14 +67,18 @@
</div>
</div>
<p class="kiosk-prompt">How many are you taking?</p>
<div class="quantity-display">{{ quantity || '0' }}</div>
<TouchKeypad @digit="quantity += $event"
@clear="quantity = ''"
@backspace="quantity = quantity.slice(0, -1)" />
<button class="btn btn-primary take-button" :disabled="!quantity || submitting"
@click="submitTake">
{{ submitting ? 'Working...' : 'TAKE' }}
</button>
<div class="entry-panel">
<div class="entry-display" :class="{ empty: !quantity }">
{{ quantity || '0' }}
</div>
<TouchKeypad @digit="quantity += $event"
@clear="quantity = ''"
@backspace="quantity = quantity.slice(0, -1)" />
<button class="btn btn-primary take-button" :disabled="!quantity || submitting"
@click="submitTake">
{{ submitting ? 'Working...' : 'TAKE' }}
</button>
</div>
</section>
<!-- done -->
@@ -240,16 +248,42 @@ function reset() {
object-fit: cover;
border-radius: 0.4rem;
}
.quantity-display {
font-size: 3rem;
.entry-panel {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.5rem 2rem;
}
.entry-display {
width: 16.9rem;
box-sizing: border-box;
font-size: 2.4rem;
font-weight: 700;
min-width: 8rem;
font-variant-numeric: tabular-nums;
text-align: center;
border-bottom: 3px solid var(--primary);
padding: 0.5rem 1rem;
border: 1px solid var(--border);
border-radius: 0.75rem;
background: var(--bg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.entry-display.empty {
color: var(--text-light);
font-weight: 400;
font-size: 1.4rem;
line-height: 2.4rem;
}
.take-button {
font-size: 1.5rem;
padding: 0.9rem 3.5rem;
font-size: 1.4rem;
padding: 0.85rem 0;
width: 16.9rem;
border-radius: 0.75rem;
}
.manual-row { display: flex; gap: 0.6rem; }
.manual-block {