From 96e48e0f509afbf68554c2a794e37dc06c1a3415 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 17 Jul 2026 09:13:27 -0400
Subject: [PATCH] printedparts kiosk: keypad and entry-panel visual polish

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.
---
 frontend/src/components/TouchKeypad.vue       | 42 +++++++----
 .../src/views/printedparts/PartsKiosk.vue     | 74 ++++++++++++++-----
 2 files changed, 83 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/TouchKeypad.vue b/frontend/src/components/TouchKeypad.vue
index 632dcd6..6baa0b8 100644
--- a/frontend/src/components/TouchKeypad.vue
+++ b/frontend/src/components/TouchKeypad.vue
@@ -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>
diff --git a/frontend/src/views/printedparts/PartsKiosk.vue b/frontend/src/views/printedparts/PartsKiosk.vue
index 5da0e85..543d547 100644
--- a/frontend/src/views/printedparts/PartsKiosk.vue
+++ b/frontend/src/views/printedparts/PartsKiosk.vue
@@ -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 {