diff --git a/frontend/src/components/ConsultorCard.css b/frontend/src/components/ConsultorCard.css index 532c0cd..9283dcb 100644 --- a/frontend/src/components/ConsultorCard.css +++ b/frontend/src/components/ConsultorCard.css @@ -35,7 +35,7 @@ .card-main { position: relative; display: grid; - grid-template-columns: 32px 70px 1fr auto; + grid-template-columns: 32px auto 1fr auto; align-items: center; gap: 1.35rem; padding: 1.25rem 1.6rem; @@ -106,17 +106,40 @@ } .rank { - width: 62px; + min-width: 62px; + width: auto; height: 62px; display: grid; place-items: center; - font-size: 1.35rem; font-weight: 700; color: var(--text); border-radius: 14px; border: 1px solid var(--stroke); background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); text-shadow: 0 2px 12px rgba(0,0,0,0.35); + padding: 0 10px; +} + +.rank-number { + font-size: 1.35rem; + white-space: nowrap; + line-height: 1; +} + +.rank-number.rank-digits-4 { + font-size: 1.1rem; +} + +.rank-number.rank-digits-5 { + font-size: 0.9rem; +} + +.rank-number.rank-digits-6 { + font-size: 0.75rem; +} + +.rank-number.rank-digits-7 { + font-size: 0.65rem; } .rank-1 { @@ -443,10 +466,26 @@ @media (max-width: 900px) { .card-main { - grid-template-columns: 28px 56px 1fr; + grid-template-columns: 28px auto 1fr; align-items: flex-start; } + .rank { + min-width: 56px; + height: 56px; + padding: 0 8px; + } + + .rank-number { + font-size: 1.1rem; + } + + .rank-number.rank-digits-5, + .rank-number.rank-digits-6, + .rank-number.rank-digits-7 { + font-size: 0.85rem; + } + .card-stats { width: 100%; justify-content: space-between; diff --git a/frontend/src/components/ConsultorCard.jsx b/frontend/src/components/ConsultorCard.jsx index 4f1d348..1c931f4 100644 --- a/frontend/src/components/ConsultorCard.jsx +++ b/frontend/src/components/ConsultorCard.jsx @@ -233,7 +233,11 @@ const ConsultorCard = memo(({ consultor, highlight, selecionado, onToggleSelecio /> -
#{consultor.posicao || consultor.rank}
+
+ + #{consultor.posicao || consultor.rank} + +
@@ -262,18 +266,14 @@ const ConsultorCard = memo(({ consultor, highlight, selecionado, onToggleSelecio
- {consultoria && ( - <> -
-
{consultoria.codigo?.replace('CONS_', '')}
-
Status
-
-
-
{consultoria.anos_consecutivos || 0}
-
Anos Consec.
-
- - )} +
+
{consultoria?.codigo?.replace('CONS_', '') || '-'}
+
Status
+
+
+
{consultoria?.anos_consecutivos || 0}
+
Anos Consec.
+
{pontuacaoTotal}
Score