feat: implement global pull-to-refresh functionality and refine UI typography and layout scaling for improved mobile UX.
Some checks failed
lotteryfront CI / build (push) Has been cancelled

This commit is contained in:
2026-06-24 11:46:49 +08:00
parent f46ccaac6e
commit cff6470031
24 changed files with 253 additions and 60 deletions

View File

@@ -1301,7 +1301,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
<button
key={`fav-${number}`}
type="button"
className="inline-flex h-7 touch-manipulation items-center gap-1 rounded-full border border-[#ffd7db] bg-[#fff3f5] px-2.5 text-xs font-semibold text-[#d81435] transition-colors hover:bg-[#ffe9ed]"
className="inline-flex h-8 touch-manipulation items-center gap-1 rounded-full border border-[#ffd7db] bg-[#fff3f5] px-2.5 text-xs font-semibold text-[#d81435] transition-colors hover:bg-[#ffe9ed]"
onPointerDown={() => {
const current = holdFavoriteRef.current;
current.number = number;
@@ -1333,7 +1333,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
}}
>
{number}
<span className="text-[10px] font-medium opacity-70">
<span className="text-[11px] font-medium opacity-70">
{t("hall.quickFill.tapHold")}
</span>
</button>
@@ -1350,14 +1350,14 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
<button
key={`his-${number}`}
type="button"
className="inline-flex h-7 min-w-10 items-center justify-center rounded-full border border-[#d7e5f8] bg-[#f8fbff] px-3 text-xs font-bold text-[#07459f] transition-colors hover:border-[#b9d0f3] hover:bg-[#eef6ff]"
className="inline-flex h-8 min-w-10 items-center justify-center rounded-full border border-[#d7e5f8] bg-[#f8fbff] px-3 text-xs font-bold text-[#07459f] transition-colors hover:border-[#b9d0f3] hover:bg-[#eef6ff]"
onClick={() => fillCurrentRow(number)}
>
{number}
</button>
))
) : (
<span className="inline-flex h-7 items-center rounded-full border border-dashed border-slate-200 bg-slate-50 px-3 text-xs text-slate-400">
<span className="inline-flex h-8 items-center rounded-full border border-dashed border-slate-200 bg-slate-50 px-3 text-xs text-slate-400">
{t("hall.quickFill.emptyHistory")}
</span>
)}
@@ -1405,7 +1405,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
)}
>
<span className="block text-xs">{t("hall.table.number", { defaultValue: "Number" })}</span>
<span className="mt-0.5 block font-mono text-[10px] font-medium text-[#9aa8bd]">
<span className="mt-0.5 block font-mono text-[11px] font-medium text-[#9aa8bd]">
{numberPlaceholder}
</span>
</th>
@@ -1414,7 +1414,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
key={column.key}
className="w-[4.5rem] min-w-[4.5rem] max-w-[4.5rem] px-0.5 py-2 text-center font-bold"
>
<span className="block whitespace-nowrap text-[10px] leading-tight">
<span className="block whitespace-nowrap text-[11px] leading-tight">
{playColumnHeaderLabel(
column.play,
activeCategory as Exclude<HallCategory, "JACKPOT">,
@@ -1422,7 +1422,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
t,
)}
</span>
<span className="mt-0.5 block text-[9px] font-medium text-[#9aa8bd]">
<span className="mt-0.5 block text-[10px] font-medium text-[#9aa8bd]">
{t("hall.table.amountPlaceholder")}
</span>
</th>
@@ -1519,11 +1519,11 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
)}
/>
{status === "sold_out" ? (
<p className="mt-0.5 text-center text-[9px] font-bold text-slate-500">
<p className="mt-0.5 text-center text-[10px] font-bold text-slate-500">
{t("hall.table.soldOut")}
</p>
) : status === "warning" ? (
<p className="mt-0.5 text-center text-[9px] font-bold text-amber-700">
<p className="mt-0.5 text-center text-[10px] font-bold text-amber-700">
{t("hall.table.warning")}
</p>
) : null}
@@ -1535,7 +1535,7 @@ export function HallBettingGrid({ drawLive }: { drawLive: HallDrawLiveSnapshot }
type="button"
disabled={tableDisabled || rows.length <= 1}
onClick={() => removeRow(row.id)}
className="inline-flex size-6 items-center justify-center rounded-full text-[#e5002c] hover:bg-red-50 disabled:text-slate-300 disabled:hover:bg-transparent"
className="inline-flex size-8 items-center justify-center rounded-full text-[#e5002c] hover:bg-red-50 disabled:text-slate-300 disabled:hover:bg-transparent"
aria-label={t("actions.deleteRow", { row: index + 1 })}
>
<Trash2 className="size-3.5" aria-hidden />