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) -->
<Button
variant="ghost"
size="sm"
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"
variant="outline"
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 border-2 border-muted-foreground/30 text-2xl lg:text-4xl text-muted-foreground"
@click="$router.push('/support')"
>
?

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

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