denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Refine EasySwitchManager card layout and styling for improved visual consistency, including adjustments to padding, font sizes, and element dimensions to enhance user experience.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m0s
Details

Browse Source
This commit is contained in:
denozord
2025-12-07 13:57:06 +07:00
parent a54d5c9009
commit 367d4fd520
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/EasySwitchManager.jsx
+20 -20
View File
@@ -649,29 +649,29 @@ function EasySwitchManager() {
</div> </div>
{/* Сетка карточек шлюзов для этого community */} {/* Сетка карточек шлюзов для этого community */}
<div className="row g-3"> <div className="row g-2">
{server.gateways.map((gw, idx) => { {server.gateways.map((gw, idx) => {
const isActive = activeGw === gw.name; const isActive = activeGw === gw.name;
const isFastest = idx === 0; const isFastest = idx === 0;
const ping = 20 + idx * 10 + Math.floor(Math.random() * 15); const ping = 20 + idx * 10 + Math.floor(Math.random() * 15);
return ( return (
<div key={gw.name} className="col-12 col-sm-6 col-md-4"> <div key={gw.name} className="col-6 col-md-4 col-lg-3">
<div <div
className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`} className={`card cursor-pointer h-100 ${isActive ? 'bg-primary text-white' : ''}`}
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
transition: 'all 0.15s ease', transition: 'all 0.15s ease',
border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)', border: isActive ? '2px solid var(--tblr-primary)' : '1px solid rgba(0,0,0,0.1)',
borderRadius: '8px', borderRadius: '6px',
boxShadow: isActive ? '0 4px 12px rgba(32, 107, 196, 0.3)' : 'none', boxShadow: isActive ? '0 3px 8px rgba(32, 107, 196, 0.3)' : 'none',
position: 'relative' position: 'relative'
}} }}
onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)} onClick={() => handleGatewaySelect(server.id, comm.value, gw.name)}
onMouseEnter={(e) => { onMouseEnter={(e) => {
if (!isActive) { if (!isActive) {
e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)'; e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.1)';
e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.transform = 'translateY(-1px)';
} }
}} }}
onMouseLeave={(e) => { onMouseLeave={(e) => {
@@ -681,52 +681,52 @@ function EasySwitchManager() {
} }
}} }}
> >
<div className="card-body p-3"> <div className="card-body p-2">
{/* Галочка (абсолютное позиционирование) */} {/* Галочка (абсолютное позиционирование) */}
{isActive && ( {isActive && (
<div <div
className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center" className="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center"
style={{ style={{
width: '24px', width: '20px',
height: '24px', height: '20px',
position: 'absolute', position: 'absolute',
top: '12px', top: '8px',
right: '12px' right: '8px'
}} }}
> >
<IconCheck size={16} /> <IconCheck size={12} />
</div> </div>
)} )}
{/* Метка Fastest */} {/* Метка Fastest */}
<div className="mb-2" style={{ minHeight: '24px' }}> <div className="mb-1" style={{ minHeight: '18px' }}>
{isFastest && !isActive && ( {isFastest && !isActive && (
<span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.75rem', padding: '4px 8px' }}> <span className="badge bg-yellow-lt text-yellow d-inline-flex align-items-center" style={{ fontSize: '0.65rem', padding: '2px 6px' }}>
<IconBolt size={14} className="me-1" /> <IconBolt size={10} className="me-1" />
Fast Fast
</span> </span>
)} )}
</div> </div>
{/* Название шлюза */} {/* Название шлюза */}
<div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '1rem' }}> <div className={`fw-bold mb-1 ${isActive ? 'text-white' : ''}`} style={{ fontSize: '0.85rem', lineHeight: '1.2' }}>
{gw.name} {gw.name}
</div> </div>
{/* Описание шлюза */} {/* Описание шлюза */}
{gw.comment && ( {gw.comment && (
<div className={`small mb-2 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.8rem', opacity: isActive ? 0.8 : 1 }}> <div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.8 : 1, lineHeight: '1.2' }}>
{gw.comment} {gw.comment}
</div> </div>
)} )}
{/* Протокол */} {/* Протокол */}
<div className={`small mb-2 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.85rem', opacity: isActive ? 0.85 : 1 }}> <div className={`small mb-1 ${isActive ? 'text-white' : 'text-muted'}`} style={{ fontSize: '0.7rem', opacity: isActive ? 0.85 : 1 }}>
{serverMeta?.provider || 'vless / xudp'} {serverMeta?.provider || 'vless'}
</div> </div>
{/* Метрика (пинг) */} {/* Метрика (пинг) */}
<div className={`fw-bold ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.5rem' }}> <div className={`fw-bold mt-1 ${isActive ? 'text-white' : 'text-success'}`} style={{ fontSize: '1.1rem' }}>
{ping} {ping}
</div> </div>
</div> </div>