From 9856a21a3436585c0a26eefacc4066e66813df74 Mon Sep 17 00:00:00 2001
From: AlGouvea <alvarohsgouvea@gmail.com>
Date: Wed, 14 Jul 2021 12:18:42 -0300
Subject: [PATCH] Refatoracao visual do painel

---
 sapl/templates/painel/index.html | 139 ++++++++++++++++---------------
 1 file changed, 70 insertions(+), 69 deletions(-)

diff --git a/sapl/templates/painel/index.html b/sapl/templates/painel/index.html
index 938c6edd0..bc189ef41 100644
--- a/sapl/templates/painel/index.html
+++ b/sapl/templates/painel/index.html
@@ -59,7 +59,7 @@
         </div>
       </div>
 
-      <div class="row justify-content-center">
+      <div class="row justify-content-center" style="margin-bottom: 50px; margin-top: 50px;">
         <h2 class="text-danger"><span v-if="!painel_aberto">PAINEL ENCONTRA-SE FECHADO</span></h2>
       </div>
 
@@ -68,16 +68,17 @@
         <div class="col-md-7 text-center"><span class="text-value data-hora" id="relogio"></span></div>
       </div>
 
-      <div class="">
+      <div style="margin-bottom: 50px;">
         <div class="d-flex justify-content-start">
-          <div class="col-md-4">
+          <div class="col-md-2"></div>
+          <div class="col-md-3">
             <div class="text-center painel">
               <h2 class="text-subtitle">Parlamentares</h2>
               <div v-if="painel_aberto">
                 <table>
                     <tbody v-for="p in presentes">
                     <tr>
-                        <td style="padding-right: 20px;" v-bind:style="{ color: p.color}">
+                        <td class="d-flex justify-content-start" style="padding-right: 20px;" v-bind:style="{ color: p.color}">
                           [[ p.nome]]
                         </td>
                         <td style="padding-right: 20px;" v-bind:style="{ color: p.color}">
@@ -97,14 +98,14 @@
               </div>
             </div>
           </div>
-          <div class="d-flex col-md-6 painels">
-            <div v-if="oradores.length > 0" class="col-md-6 text-center painel" id="aparecer_oradores">  
+          <div class="d-flex col-md-7 painels justify-content-center">
+            <div v-if="oradores.length > 0" class="text-center painel" id="aparecer_oradores">  
               <h2 class="text-subtitle">Oradores</h2>
               <div v-if="painel_aberto">
                 <table>
                   <tbody v-for="o in oradores">
                   <tr class="d-flex justify-content-center">
-                      <td style="padding-right: 20px; color: white;">
+                      <td style="padding-right: 20px; color: white; font-size: 20px;">
                         [[ o.numero]]º &nbsp[[o.nome]]
                       </td>
                   </tr>
@@ -117,71 +118,71 @@
                   </span>
               </div>
             </div>
-
-            <div class="col-md-6 text-center painel">  
-              <h2 class="text-subtitle">Cronômetros</h2>
-                <div class="text-value">
-                Discurso: <span id="cronometro_discurso"></span><br>
-                Aparte: <span id="cronometro_aparte"></span><br>
-                Questão de Ordem: <span id="cronometro_ordem"></span><br>
-                Considerações Finais: <span id="cronometro_consideracoes"></span>
-              </div>
-            </div>
-            <div v-if="sessao_solene">
-                <div class="col-md-6 text-center painel" id="tema_solene_div">
-                  <h2 class="text-subtitle">Tema da Sessão Solene</h2>
-                    <span id="sessao_solene_tema" class="text-value">[[ sessao_solene_tema ]]</span>
-                </div>
-            </div>
-            <div v-else>
-                <div v-if="painel_aberto">
-                    <div v-if="!sessao_finalizada" class="col-md-6 text-center painel" id="resultado_votacao_div">
-                        <h2 class="text-subtitle">Resultado</h2>
-                        <div v-if="materia_legislativa_texto">
-                            <span id="votacao" class="text-value">
-                                <li>Sim: [[ numero_votos_sim ]]</li>
-                                <li>Não: [[ numero_votos_nao ]]</li>
-                                <li>Abstenções: [[ numero_abstencoes ]]</li>
-                                <li>Presentes: [[ num_presentes ]]</li>
-                                <li>Total votos: [[ total_votos ]]</li>
-                            </span>
-                            <h2><span id="resultado_votacao" v-bind:style="resultado_votacao_css" lass="text-title">[[ tipo_resultado ]]</span></h2>
-                        </div>
-                        <div v-else>
-                            <center>Não há votação, pois não há nenhuma matéria aberta ou já votada.</center>
-                        </div>
-                    </div>
-                    <div v-if="painel_aberto">
-                        <div v-if="!sessao_finalizada" class="col-md-6 text-center painel" id="obs_materia_div">
-                          <h2 class="text-subtitle" id="mat_em_votacao">[[ mat_em_votacao ]]</h2>
-                            <div v-if="materia_legislativa_texto !== ''">
-                              <span id="materia_legislativa_texto" class="text-value">[[ materia_legislativa_texto ]] </span>
-                              <br>
-                              <span id="materia_legislativa_ementa" class="text-value">[[ materia_legislativa_ementa ]]</span>
-                              <br>
-                              <span id="observacao_materia" class="text-value"> [[ observacao_materia ]]</span>
-                            </div>
-                            <div v-else>
-                                <span class="text-value">Não há nenhuma matéria votada ou para votação.</span>
-                            </div>
-                         </div>
-                    </div>
-                    <div v-else>
-                         <span class="text-value">A Matéria em votação só aparecerá quando o painel estiver aberto</span>
-                    </div>
-                </div>
-                <div v-else>
-                      <div class="col-md-6 text-center painel">
-                      <h2 class="text-subtitle">Resultado</h2>
-                      <span style="color:white">
-                          <center>A votação só aparecerá quando o painel estiver aberto</center>
-                      </span>
-                      </div>
-                 </div>
-            </div>
           </div>
         </div>
       </div>
+    <div class="row">
+      <div class="col-md-2"></div>
+      <div class="col-md-4 text-left painel">  
+        <h2 class="text-subtitle">Cronômetros</h2>
+        <div class="text-value">
+          Discurso: <span id="cronometro_discurso"></span><br>
+          Aparte: <span id="cronometro_aparte"></span><br>
+          Questão de Ordem: <span id="cronometro_ordem"></span><br>
+          Considerações Finais: <span id="cronometro_consideracoes"></span>
+        </div>
+      </div>
+      <div v-if="sessao_solene">
+          <div class="col-md-4 text-center painel" id="tema_solene_div">
+              <h2 class="text-subtitle">Tema da Sessão Solene</h2>
+              <span id="sessao_solene_tema" class="text-value">[[ sessao_solene_tema ]]</span>
+          </div>
+      </div>
+      <div v-else class="col-md-5" style="margin-top: -50px;">
+          <div v-if="painel_aberto">
+              <div v-if="!sessao_finalizada" class="text-center painel" id="resultado_votacao_div">
+                  <h2 class="text-subtitle" style="margin-left: -50px;">Resultado</h2>
+                  <div v-if="materia_legislativa_texto">
+                      <span id="votacao" class="text-value">
+                          <li>Sim: [[ numero_votos_sim ]]</li>
+                          <li>Não: [[ numero_votos_nao ]]</li>
+                          <li>Abstenções: [[ numero_abstencoes ]]</li>
+                          <li>Presentes: [[ num_presentes ]]</li>
+                          <li>Total votos: [[ total_votos ]]</li>
+                      </span>
+                      <h2><span id="resultado_votacao" v-bind:style="resultado_votacao_css" lass="text-title">[[ tipo_resultado ]]</span></h2>
+                  </div>
+                  <div v-else>
+                      <center>Não há votação, pois não há nenhuma matéria aberta ou já votada.</center>
+                  </div>
+              </div>
+              <div v-if="painel_aberto">
+                  <div v-if="!sessao_finalizada" class="text-center painel" id="obs_materia_div">
+                      <h2 class="text-subtitle" id="mat_em_votacao">[[ mat_em_votacao ]]</h2>
+                      <div v-if="materia_legislativa_texto !== ''">
+                      <span id="materia_legislativa_texto" class="text-value">[[ materia_legislativa_texto ]] </span>
+                        <br>
+                        <span id="materia_legislativa_ementa" class="text-value">[[ materia_legislativa_ementa ]]</span>
+                        <br>
+                        <span id="observacao_materia" class="text-value"> [[ observacao_materia ]]</span>
+                      </div>
+                      <div v-else>
+                          <span class="text-value">Não há nenhuma matéria votada ou para votação.</span>
+                      </div>
+                  </div>
+              </div>
+              <div v-else>
+                  <span class="text-value">A Matéria em votação só aparecerá quando o painel estiver aberto</span>
+              </div>
+          </div>
+          <div v-else>
+              <div class="text-center painel">
+                  <h2 class="text-subtitle" style="margin-top: 50px;">Resultado</h2>
+                  <span style="color:white">
+                      <h1>A votação só aparecerá quando o painel estiver aberto</h1>
+                  </span>
+                  </div>
+            </div>
       </div>
     </div>
   </body>