Novo layout painel de votação

frontend/src/__apps/painel/scss/painel.scss

@@ -1,43 +1,159 @@
+:root {
+  --bg-dark: #121212;
+  --bg-panel: #1e1e1e;
+  --text-main: #e0e0e0;
+  --text-highlight: #4fa64d;
+}
 
-.painel-principal {
+body {
-  background: #1c1b1b;
+  background-color: var(--bg-dark);
-  font-family: Verdana;
+  color: var(--text-main);
-  font-size: x-large;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  .text-title {
+  margin-bottom: 0;
-    color: #4fa64d;
+}
-    margin: 0.5rem;
+
-	font-weight: bold;
+.separador-vertical {
-  }
+  border-right: 1px solid #333;
-  .text-subtitle {
+  min-height: 100vh;
-    color: #459170;
+  margin: 0;
-	font-weight: bold;
+}
-  }
+
-  .data-hora {
+.text-title {
-    font-size: 180%;
+  color: var(--text-highlight);
-  }
+  letter-spacing: 1px;
-
+}
-  .text-value {
+
-    color: white;
+.text-subtitle {
-  }
+  color: #81c784;
-
+  font-weight: 600;
-  .logo-painel {
+}
-    max-width: 100%;
+
-  }
+.parlamentares-grid {
-  .painels {
+  display: grid;
-    flex-wrap: wrap;
+  grid-template-columns: repeat(auto-fill, 190px);
-  }
+  width: 100%;
-  .painel{
+}
-    margin-top: 1rem;
+
-    table {
+.parlamentar-card {
-      width: 100%;
+  width: 150px;
-    }
+  border-radius: 3px;
-    h2 {
+  overflow: hidden;
-      margin-bottom: 0.5rem;
+  position: relative;
-    }
+}
-    #votacao, #oradores_list {
+
-      text-align: left;
+.foto-container {
-      display: inline-block;
+  border-radius: 3px;
-      margin-bottom: 1rem;
+  overflow: hidden;
-    }
+  height: 150px;
-  }
+}
+
+.parlamentar-card img {
+  width: 100%;
+  height: 150px;
+  display: block;
+  object-fit: fill;
+}
+
+.parlamentar-card .nome {
+  font-weight: bold;
+  font-size: 0.95rem;
+  color: #fff;
+  line-height: 1.1;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+  margin-bottom: 2px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.parlamentar-card .partido {
+  font-size: 0.8rem;
+  color: #ddd;
+  font-weight: 600;
+  text-transform: uppercase;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.voto-faixa {
+  position: absolute;
+  width: 90px;
+  height: 90px;
+  top: -45px;
+  right: -45px;
+  transform: rotate(45deg);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  color: #fff;
+  font-weight: 700;
+  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+  line-height: 1;
+}
+
+.voto-faixa p {
+  transform: rotate(-45deg);
+  font-size: 2rem;
+  text-transform: uppercase;
+}
+
+.voto-sim .voto-faixa {
+  background-color: #27ae60;
+}
+
+.voto-nao .voto-faixa {
+  background-color: #c0392b;
+}
+
+.voto-abstencao .voto-faixa {
+  background-color: #f39c12;
+}
+
+.voto-informado .voto-faixa {
+  background-color: #d35400;
+}
+
+.voto-ausente .voto-faixa {
+  background-color: #7f8c8d;
+}
+
+.table-custom {
+  color: #ddd;
+}
+
+.table-custom tbody td {
+  padding: 8px;
+  font-size: 1.1rem;
+}
+
+.table-sim {
+  color: #27ae60;
+}
+
+.table-nao {
+  color: #c0392b;
+}
+
+.table-abstencao {
+  color: #f39c12;
+}
+
+.table-total {
+  color: #194BFA;
+}
+
+.logo-painel {
+  max-height: 150px;
+  width: auto;
+}
+
+#oradores_list tr td {
+  font-size: 1.2rem;
+  padding: 5px;
+  text-align: start;
+}
+
+.hora-brasao {
+  border-top: 1px solid #333;
 }

sapl/painel/views.py

@@ -23,6 +23,7 @@ from sapl.sessao.models import (ExpedienteMateria, OradorExpediente, OrdemDia,
                                 SessaoPlenaria, SessaoPlenariaPresenca,
                                 VotoParlamentar, RegistroLeitura)
 from sapl.utils import filiacao_data, get_client_ip, sort_lista_chave
+from image_cropping.utils import get_backend
 
 from .models import Cronometro
 
@@ -382,6 +383,7 @@ def get_presentes(pk, response, materia):
             })
 
     presentes_list = []
+    
     for p in presentes:
         legislatura = sessao.legislatura
         # Recupera os mandatos daquele parlamentar
@@ -394,10 +396,24 @@ def get_presentes(pk, response, materia):
             else:
                 partido = filiacao
 
+            if p.parlamentar.fotografia:
+                thumbnail_url = get_backend().get_thumbnail_url(
+                    p.parlamentar.fotografia,
+                    {
+                        'size': (128, 128),
+                        'box': p.parlamentar.cropping,
+                        'crop': True,
+                        'detail': True,
+                    }
+                )
+            else:
+              thumbnail_url = False
+
             presentes_list.append(
                 {'id': p.id,
                  'parlamentar_id': p.parlamentar.id,
                  'nome': p.parlamentar.nome_parlamentar,
+                 'fotografia':thumbnail_url,
                  'partido': partido,
                  'voto': ''
                  })
@@ -476,7 +492,7 @@ def get_votos(response, materia, mostrar_voto):
             'numero_abstencoes': 0,
             'registro': None,
             'total_votos': 0,
-            'tipo_resultado': 'Ainda não foi votada.',
+            'tipo_resultado': 'Em votação.',
         })
 
         if materia.tipo_votacao == 2: