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>