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

feat(machine): add kiosk touch targets and viewport for 1920px

Browse source 
Scale up button sizes (kiosk, kiosk-lg, kiosk-icon variants), add
active:scale feedback, set viewport to 1920px fixed width, hide cursor,
and bump card title/description sizes for touch-screen readability.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan 2026-03-01 12:08:06 -05:00
commit cea774c3ad
4 changed files with 18 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
apps/machine/src/components/ui/button/index.ts
View file

@ -4,17 +4,19 @@ import { cva } from 'class-variance-authority'
export { default as Button } from './Button.vue'
export const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
destructive:
'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline:
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground active:bg-accent/80 dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70',
ghost:
'hover:bg-accent hover:text-accent-foreground active:bg-accent/50 dark:hover:bg-accent/50',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
@ -24,6 +26,10 @@ export const buttonVariants = cva(
icon: 'size-9',
'icon-sm': 'size-8',
'icon-lg': 'size-10',
kiosk: 'h-[7vh] min-h-[70px] px-8 py-3 text-2xl rounded-xl',
'kiosk-lg': 'h-[9vh] min-h-[80px] px-10 py-4 text-[1.75rem] rounded-xl',
'kiosk-icon': 'size-[6vh] min-w-[60px] min-h-[60px] rounded-xl text-2xl',
'kiosk-icon-lg': 'size-[8vh] min-w-[70px] min-h-[70px] rounded-xl text-3xl',
},
},
defaultVariants: {

2
apps/machine/src/components/ui/card/CardDescription.vue
View file

@ -8,7 +8,7 @@ const props = defineProps<{
</script>
<template>
<p data-slot="card-description" :class="cn('text-muted-foreground text-sm', props.class)">
<p data-slot="card-description" :class="cn('text-muted-foreground text-xl', props.class)">
<slot />
</p>
</template>

2
apps/machine/src/components/ui/card/CardTitle.vue
View file

@ -8,7 +8,7 @@ const props = defineProps<{
</script>
<template>
<h3 data-slot="card-title" :class="cn('leading-none font-semibold', props.class)">
<h3 data-slot="card-title" :class="cn('leading-tight font-semibold text-3xl', props.class)">
<slot />
</h3>
</template>