aiolabs/bitspire
9
0
Fork 0
Code Issues 52 Pull requests 2 Projects Releases Packages Wiki Activity Actions

feat(ui): kiosk-friendly help button and support nav

Browse source 
Add circular outline to the ? help button on idle screen and scale
support page navigation buttons for touchscreen kiosk use.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan 2026-03-31 10:40:17 -04:00
commit e148418867
2 changed files with 18 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/machine/src/views/IdleView.vue
View file

@ -213,9 +213,9 @@ function handleCashOut() {
<!-- Help button (top-left) --> <!-- Help button (top-left) -->
<Button <Button
variant="ghost" variant="outline"
size="sm" size="icon"
class="absolute top-4 left-4 lg:top-8 lg:left-8 h-14 w-14 lg:h-20 lg:w-20 rounded-full text-2xl lg:text-4xl text-muted-foreground" class="absolute top-4 left-4 lg:top-8 lg:left-8 h-14 w-14 lg:h-20 lg:w-20 rounded-full border-2 border-muted-foreground/30 text-2xl lg:text-4xl text-muted-foreground"
@click="$router.push('/support')" @click="$router.push('/support')"
> >
? ?

23
apps/machine/src/views/SupportView.vue
View file

@ -250,19 +250,26 @@ function goBack() {
<template> <template>
<div class="flex h-dvh flex-col bg-background text-foreground"> <div class="flex h-dvh flex-col bg-background text-foreground">
<!-- Header --> <!-- Header — kiosk-sized touch targets -->
<div class="flex items-center border-b border-border bg-card px-3 py-2 gap-2 relative z-50"> <div
<Button variant="outline" size="sm" class="shrink-0" @click="goBack"> class="flex items-center border-b border-border bg-card px-4 py-3 lg:px-6 lg:py-4 gap-3 lg:gap-4 relative z-50"
<span class="text-base">&larr;</span> >
<span class="ml-1 hidden sm:inline">Back</span> <Button
variant="outline"
size="kiosk"
class="shrink-0 h-12 min-h-0 px-5 text-base lg:h-[7vh] lg:min-h-[60px] lg:px-8 lg:text-2xl"
@click="goBack"
>
<span>&larr;</span>
<span class="ml-1">Back</span>
</Button> </Button>
<div class="flex gap-1.5 overflow-x-auto"> <div class="flex gap-2 lg:gap-3 overflow-x-auto">
<Button <Button
v-for="(page, i) in pages" v-for="(page, i) in pages"
:key="page.id" :key="page.id"
:variant="i === activeTab ? 'default' : 'outline'" :variant="i === activeTab ? 'default' : 'outline'"
size="sm" size="kiosk"
class="shrink-0 text-xs sm:text-sm" class="shrink-0 h-12 min-h-0 px-5 text-base lg:h-[7vh] lg:min-h-[60px] lg:px-8 lg:text-2xl"
@click="activeTab = i" @click="activeTab = i"
> >
{{ page.title }} {{ page.title }}