etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: show progress bar instead of dots when device_limit > 10

Browse Source 
Match the Dashboard behavior: show individual dots for <= 10 devices,
switch to a compact progress bar for higher limits (e.g. 18 devices).
Prevents dot overflow breaking the connect-device card layout on mobile.
This commit is contained in:
Fringg
2026-02-27 09:27:36 +03:00
parent 96bcc76d69
commit d567817e05
1 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/Subscription.tsx
View File

@@ -692,18 +692,37 @@ export default function Subscription() {
})} })}
</div> </div>
</div> </div>
<div className="flex flex-shrink-0 gap-1.5" aria-hidden="true"> {subscription.device_limit <= 10 ? (
{Array.from({ length: subscription.device_limit }, (_, i) => ( <div className="flex flex-shrink-0 gap-1.5" aria-hidden="true">
{Array.from({ length: subscription.device_limit }, (_, i) => (
<div
key={i}
className="h-[7px] w-[7px] rounded-full transition-[background-color,box-shadow] duration-300"
style={{
background: i < connectedDevices ? zone.mainHex : g.textGhost,
boxShadow: i < connectedDevices ? `0 0 6px ${zone.mainHex}50` : 'none',
}}
/>
))}
</div>
) : (
<div className="flex w-16 flex-shrink-0 items-center" aria-hidden="true">
<div <div
key={i} className="h-[6px] w-full overflow-hidden rounded-full"
className="h-[7px] w-[7px] rounded-full transition-[background-color,box-shadow] duration-300" style={{ background: g.textGhost }}
style={{ >
background: i < connectedDevices ? zone.mainHex : g.textGhost, <div
boxShadow: i < connectedDevices ? `0 0 6px ${zone.mainHex}50` : 'none', className="h-full rounded-full transition-[width] duration-500"
}} style={{
/> width: `${Math.round((connectedDevices / subscription.device_limit) * 100)}%`,
))} background: zone.mainHex,
</div> boxShadow: `0 0 8px ${zone.mainHex}40`,
minWidth: connectedDevices > 0 ? '4px' : '0px',
}}
/>
</div>
</div>
)}
</HoverBorderGradient> </HoverBorderGradient>
)} )}