Refatoracao visual do painel

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,8 +118,12 @@
                   </span>
               </div>
             </div>
-
-            <div class="col-md-6 text-center painel">  
+          </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>
@@ -128,15 +133,15 @@
         </div>
       </div>
       <div v-if="sessao_solene">
-                <div class="col-md-6 text-center painel" id="tema_solene_div">
+          <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>
+      <div v-else class="col-md-5" style="margin-top: -50px;">
           <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="!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>
@@ -152,7 +157,7 @@
                   </div>
               </div>
               <div v-if="painel_aberto">
-                        <div v-if="!sessao_finalizada" class="col-md-6 text-center painel" id="obs_materia_div">
+                  <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>
@@ -171,19 +176,15 @@
               </div>
           </div>
           <div v-else>
-                      <div class="col-md-6 text-center painel">
-                      <h2 class="text-subtitle">Resultado</h2>
+              <div class="text-center painel">
+                  <h2 class="text-subtitle" style="margin-top: 50px;">Resultado</h2>
                   <span style="color:white">
-                          <center>A votação só aparecerá quando o painel estiver aberto</center>
+                      <h1>A votação só aparecerá quando o painel estiver aberto</h1>
                   </span>
                   </div>
             </div>
       </div>
     </div>
-        </div>
-      </div>
-      </div>
-    </div>
   </body>
 
   {% block webpack_loader_js %}