From 2603d1ecef323e6ffdaab73f691039e26fb55409 Mon Sep 17 00:00:00 2001
From: Leandro Roberto <leandroroberto.br@gmail.com>
Date: Sun, 10 Feb 2019 16:19:47 -0200
Subject: [PATCH] ajustes de layout no painel

---
 sapl/templates/painel/mensagem.html      | 159 +++++++++---------
 sapl/templates/painel/parlamentares.html |  52 +++---
 sapl/templates/painel/votacao.html       | 195 ++++++++++++-----------
 sapl/templates/painel/voto_nominal.html  |  15 +-
 4 files changed, 228 insertions(+), 193 deletions(-)

diff --git a/sapl/templates/painel/mensagem.html b/sapl/templates/painel/mensagem.html
index 9a1486789..99b32dcad 100644
--- a/sapl/templates/painel/mensagem.html
+++ b/sapl/templates/painel/mensagem.html
@@ -1,4 +1,5 @@
-{% load i18n %}                                                                                                              
+{% load i18n %}    
+{% load common_tags %}
 {% load render_bundle from webpack_loader %}
 {% load webpack_static from webpack_loader %}
 
@@ -13,8 +14,11 @@
       <!-- TODO: does it need this head_title here? -->
       <title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      
-        {% render_bundle 'global'%}
+
+        {% render_chunk_vendors 'css' %}
+        {% render_bundle  'global' 'css' %}
+        {% render_bundle  'painel' 'css' %}
+
 
       <STYLE type="text/css">
         @media screen {
@@ -22,78 +26,6 @@
         }
       </STYLE>
       
-      <script type="text/javascript">
-         $(document).ready(function() {
-
-             //TODO: replace by a fancy jQuery clock
-             function checkTime(i) {
-                 if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
-                    return i;
-             }
-             function startTime() {
-                 var today=new Date();
-                 var h=today.getHours();
-                 var m=today.getMinutes();
-                 var s=today.getSeconds();
-                 m = checkTime(m);
-                 s = checkTime(s);
-                 $("#relogio").text(h+":"+m+":"+s)
-                 var t = setTimeout(function(){
-                     startTime()
-                 },500);
-             }
-
-             startTime();
-
-        var counter = 1;
-        (function poll() {
-            $.ajax({
-               url: $("#json_url").val(),
-               type: "GET",
-               success: function(data) {
-
-                  //TODO: json spitted out is very complex, have to simplify/flat it
-                  //TODO: probably building it by hand on REST side
-
-                  console.debug(data)
-
-                  var presentes = $("#parlamentares");
-                  presentes.children().remove();
-
-                  presentes_ordem_dia = data.presentes_ordem_dia
-                  $.each(presentes_ordem_dia, function(index, parlamentar) {                     
-                      $('<li />', {text: parlamentar.nome + '/' + parlamentar.partido + ' ' + parlamentar.voto }).appendTo(presentes);
-                  });
-
-                  var votacao = $("#votacao")
-                  votacao.children().remove()
-                  votacao.append("<li>Sim: " + data["numero_votos_sim"] + "</li>")
-                  votacao.append("<li>Não: " + data["numero_votos_nao"] + "</li>")
-                  votacao.append("<li>Abstenções: " + data["numero_abstencoes"] + "</li>")
-                  votacao.append("<li>Presentes: " + data["presentes"] + "</li>")
-                  votacao.append("<li>Total votos: " + data["total_votos"] + "</li>")
-
-                  $("#sessao_plenaria").text(data["sessao_plenaria"])
-                  $("#sessao_plenaria_data").text("Data Início: " + data["sessao_plenaria_data"])
-                  $("#sessao_plenaria_hora_inicio").text("Hora Início: " + data["sessao_plenaria_hora_inicio"])
-
-                  $("#materia_legislativa_texto").text(data["materia_legislativa_texto"])
-                  $("#observacao_materia").text(data["observacao_materia"])
-                  $("#resultado_votacao").text(data["tipo_resultado"])
-
-                  $("#counter").text(counter);
-                  counter++;
-               },
-               error: function(err) {
-                  console.error(err);
-               },
-               dataType: "json",
-               //complete: setTimeout(function() {poll()}, 5000),
-               timeout: 20000 // TODO: decrease
-            })
-          })();
-         });
-      </script>
     </head>
     <body>
         <h1>{{ context.title }}</h1>
@@ -108,4 +40,81 @@
         <span id="observacao_materia"></span>
         </h3>
     </body>
+
+    {% render_chunk_vendors 'js' %}
+    {% render_bundle  'global' 'js' %}  
+    {% render_bundle  'painel' 'js' %}      
+        
+    <script type="text/javascript">
+        $(document).ready(function() {
+
+            //TODO: replace by a fancy jQuery clock
+            function checkTime(i) {
+                if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
+                return i;
+            }
+            function startTime() {
+                var today=new Date();
+                var h=today.getHours();
+                var m=today.getMinutes();
+                var s=today.getSeconds();
+                m = checkTime(m);
+                s = checkTime(s);
+                $("#relogio").text(h+":"+m+":"+s)
+                var t = setTimeout(function(){
+                    startTime()
+                },500);
+            }
+
+            startTime();
+
+    var counter = 1;
+    (function poll() {
+        $.ajax({
+            url: $("#json_url").val(),
+            type: "GET",
+            success: function(data) {
+
+                //TODO: json spitted out is very complex, have to simplify/flat it
+                //TODO: probably building it by hand on REST side
+
+                console.debug(data)
+
+                var presentes = $("#parlamentares");
+                presentes.children().remove();
+
+                presentes_ordem_dia = data.presentes_ordem_dia
+                $.each(presentes_ordem_dia, function(index, parlamentar) {                     
+                    $('<li />', {text: parlamentar.nome + '/' + parlamentar.partido + ' ' + parlamentar.voto }).appendTo(presentes);
+                });
+
+                var votacao = $("#votacao")
+                votacao.children().remove()
+                votacao.append("<li>Sim: " + data["numero_votos_sim"] + "</li>")
+                votacao.append("<li>Não: " + data["numero_votos_nao"] + "</li>")
+                votacao.append("<li>Abstenções: " + data["numero_abstencoes"] + "</li>")
+                votacao.append("<li>Presentes: " + data["presentes"] + "</li>")
+                votacao.append("<li>Total votos: " + data["total_votos"] + "</li>")
+
+                $("#sessao_plenaria").text(data["sessao_plenaria"])
+                $("#sessao_plenaria_data").text("Data Início: " + data["sessao_plenaria_data"])
+                $("#sessao_plenaria_hora_inicio").text("Hora Início: " + data["sessao_plenaria_hora_inicio"])
+
+                $("#materia_legislativa_texto").text(data["materia_legislativa_texto"])
+                $("#observacao_materia").text(data["observacao_materia"])
+                $("#resultado_votacao").text(data["tipo_resultado"])
+
+                $("#counter").text(counter);
+                counter++;
+            },
+            error: function(err) {
+                console.error(err);
+            },
+            dataType: "json",
+            //complete: setTimeout(function() {poll()}, 5000),
+            timeout: 20000 // TODO: decrease
+        })
+        })();
+        });
+    </script>
 </html>
diff --git a/sapl/templates/painel/parlamentares.html b/sapl/templates/painel/parlamentares.html
index 527d08d14..583f4886f 100644
--- a/sapl/templates/painel/parlamentares.html
+++ b/sapl/templates/painel/parlamentares.html
@@ -1,4 +1,6 @@
-{% load i18n %}                                                                                                              
+{% load i18n %}     
+{% load common_tags %}
+                                                                                                         
 {% load render_bundle from webpack_loader %}
 {% load webpack_static from webpack_loader %}
 
@@ -14,7 +16,10 @@
       <title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-        {% render_bundle 'global'%}
+        {% render_chunk_vendors 'css' %}
+        {% render_bundle  'global' 'css' %}
+        {% render_bundle  'painel' 'css' %}
+
 
 
       <STYLE type="text/css">
@@ -23,6 +28,30 @@
         }
       </STYLE>
       
+    </head>
+    <body>
+        <h1>{{ context.title }}</h1>
+        <input id="json_url" type="hidden" value="{% url 'sapl.painel:dados_painel' %}">        
+        <h3>
+        <span id="sessao_plenaria"></span><br/><br/>
+        <span id="sessao_plenaria_data"></span><br/><br/>
+        <span id="sessao_plenaria_hora_inicio"></span></br><br/>
+        <h2><span id="relogio"></span></h2>
+        <table>
+            <tr>
+               <td>
+                  <ul id="parlamentares">
+                  </ul>
+               </td>
+            </tr>
+        </table>
+        </h3>
+    </body>
+        
+    {% render_chunk_vendors 'js' %}
+    {% render_bundle  'global' 'js' %}  
+    {% render_bundle  'painel' 'js' %}      
+        
       <script type="text/javascript">
          $(document).ready(function() {
 
@@ -96,23 +125,4 @@
           })();
          });
       </script>
-    </head>
-    <body>
-        <h1>{{ context.title }}</h1>
-        <input id="json_url" type="hidden" value="{% url 'sapl.painel:dados_painel' %}">        
-        <h3>
-        <span id="sessao_plenaria"></span><br/><br/>
-        <span id="sessao_plenaria_data"></span><br/><br/>
-        <span id="sessao_plenaria_hora_inicio"></span></br><br/>
-        <h2><span id="relogio"></span></h2>
-        <table>
-            <tr>
-               <td>
-                  <ul id="parlamentares">
-                  </ul>
-               </td>
-            </tr>
-        </table>
-        </h3>
-    </body>
 </html>
diff --git a/sapl/templates/painel/votacao.html b/sapl/templates/painel/votacao.html
index 00e44dc2a..7f55d6e04 100644
--- a/sapl/templates/painel/votacao.html
+++ b/sapl/templates/painel/votacao.html
@@ -1,4 +1,4 @@
-{% load i18n %}                                                                                                              
+{% load i18n %}                                                        
 {% load render_bundle from webpack_loader %}
 {% load webpack_static from webpack_loader %}
 
@@ -8,111 +8,116 @@
 <html lang="en">
 <!--<![endif]-->
 
-    <head>
-      <meta charset="UTF-8">
-      <!-- TODO: does it need this head_title here? -->
-      <title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8">
+    <!-- TODO: does it need this head_title here? -->
+    <title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
-        {% render_bundle 'global'%}
+    {% render_chunk_vendors 'css' %}
+    {% render_bundle  'global' 'css' %}
+    {% render_bundle  'painel' 'css' %}
 
+    <STYLE type="text/css">
+    @media screen {
+      body {font-size: medium; color: white; line-height: 1em; background: black;}
+    }
+    </STYLE>
+  </head>
+  <body>
+    <h1>{{ context.title }}</h1>
+    <input id="json_url" type="hidden" value="{% url 'sapl.painel:dados_painel' %}">    
+    <h3>
+      <span id="sessao_plenaria"></span><br/><br/>
+      <span id="sessao_plenaria_data"></span><br/><br/>
+      <span id="sessao_plenaria_hora_inicio"></span></br><br/>
+      <h2><span id="relogio"></span></h2>
+      <table>
+        <tr>
+          <td>
+            <ul id="votacao">
+            </ul>
+          </td>
+        </tr>
+      </table>
+      <span id="resultado_votacao"></span><br/>
+    </h3>
+  </body>
+    
+  {% render_chunk_vendors 'js' %}
+  {% render_bundle  'global' 'js' %}  
+  {% render_bundle  'painel' 'js' %}    
+    
+  <script type="text/javascript">
+    $(document).ready(function() {
 
-      <STYLE type="text/css">
-        @media screen {
-            body {font-size: medium; color: white; line-height: 1em; background: black;}
-        }
-      </STYLE>
-      
-      <script type="text/javascript">
-         $(document).ready(function() {
+      //TODO: replace by a fancy jQuery clock
+      function checkTime(i) {
+        if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
+          return i;
+      }
+      function startTime() {
+        var today=new Date();
+        var h=today.getHours();
+        var m=today.getMinutes();
+        var s=today.getSeconds();
+        m = checkTime(m);
+        s = checkTime(s);
+        $("#relogio").text(h+":"+m+":"+s)
+        var t = setTimeout(function(){
+          startTime()
+        },500);
+      }
 
-             //TODO: replace by a fancy jQuery clock
-             function checkTime(i) {
-                 if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
-                    return i;
-             }
-             function startTime() {
-                 var today=new Date();
-                 var h=today.getHours();
-                 var m=today.getMinutes();
-                 var s=today.getSeconds();
-                 m = checkTime(m);
-                 s = checkTime(s);
-                 $("#relogio").text(h+":"+m+":"+s)
-                 var t = setTimeout(function(){
-                     startTime()
-                 },500);
-             }
+      startTime();
 
-             startTime();
+      var counter = 1;
+      (function poll() {
+        $.ajax({
+          url: $("#json_url").val(),
+          type: "GET",
+          success: function(data) {
 
-        var counter = 1;
-        (function poll() {
-            $.ajax({
-               url: $("#json_url").val(),
-               type: "GET",
-               success: function(data) {
+            //TODO: json spitted out is very complex, have to simplify/flat it
+            //TODO: probably building it by hand on REST side
 
-                  //TODO: json spitted out is very complex, have to simplify/flat it
-                  //TODO: probably building it by hand on REST side
+            console.debug(data)
 
-                  console.debug(data)
+            var presentes = $("#parlamentares");
+            presentes.children().remove();
 
-                  var presentes = $("#parlamentares");
-                  presentes.children().remove();
+            presentes_ordem_dia = data.presentes_ordem_dia
+            $.each(presentes_ordem_dia, function(index, parlamentar) {           
+              $('<li />', {text: parlamentar.nome + '/' + parlamentar.partido + ' ' + parlamentar.voto }).appendTo(presentes);
+            });
 
-                  presentes_ordem_dia = data.presentes_ordem_dia
-                  $.each(presentes_ordem_dia, function(index, parlamentar) {                     
-                      $('<li />', {text: parlamentar.nome + '/' + parlamentar.partido + ' ' + parlamentar.voto }).appendTo(presentes);
-                  });
+            var votacao = $("#votacao")
+            votacao.children().remove()
+            votacao.append("<li>Sim: " + data["numero_votos_sim"] + "</li>")
+            votacao.append("<li>Não: " + data["numero_votos_nao"] + "</li>")
+            votacao.append("<li>Abstenções: " + data["numero_abstencoes"] + "</li>")
+            votacao.append("<li>Presentes: " + data["presentes"] + "</li>")
+            votacao.append("<li>Total votos: " + data["total_votos"] + "</li>")
 
-                  var votacao = $("#votacao")
-                  votacao.children().remove()
-                  votacao.append("<li>Sim: " + data["numero_votos_sim"] + "</li>")
-                  votacao.append("<li>Não: " + data["numero_votos_nao"] + "</li>")
-                  votacao.append("<li>Abstenções: " + data["numero_abstencoes"] + "</li>")
-                  votacao.append("<li>Presentes: " + data["presentes"] + "</li>")
-                  votacao.append("<li>Total votos: " + data["total_votos"] + "</li>")
+            $("#sessao_plenaria").text(data["sessao_plenaria"])
+            $("#sessao_plenaria_data").text("Data Início: " + data["sessao_plenaria_data"])
+            $("#sessao_plenaria_hora_inicio").text("Hora Início: " + data["sessao_plenaria_hora_inicio"])
 
-                  $("#sessao_plenaria").text(data["sessao_plenaria"])
-                  $("#sessao_plenaria_data").text("Data Início: " + data["sessao_plenaria_data"])
-                  $("#sessao_plenaria_hora_inicio").text("Hora Início: " + data["sessao_plenaria_hora_inicio"])
+            $("#materia_legislativa_texto").text(data["materia_legislativa_texto"])
+            $("#observacao_materia").text(data["observacao_materia"])
+            $("#resultado_votacao").text(data["tipo_resultado"])
 
-                  $("#materia_legislativa_texto").text(data["materia_legislativa_texto"])
-                  $("#observacao_materia").text(data["observacao_materia"])
-                  $("#resultado_votacao").text(data["tipo_resultado"])
-
-                  $("#counter").text(counter);
-                  counter++;
-               },
-               error: function(err) {
-                  console.error(err);
-               },
-               dataType: "json",
-               //complete: setTimeout(function() {poll()}, 5000),
-               timeout: 20000 // TODO: decrease
-            })
-          })();
-         });
-      </script>
-    </head>
-    <body>
-        <h1>{{ context.title }}</h1>
-        <input id="json_url" type="hidden" value="{% url 'sapl.painel:dados_painel' %}">        
-        <h3>
-        <span id="sessao_plenaria"></span><br/><br/>
-        <span id="sessao_plenaria_data"></span><br/><br/>
-        <span id="sessao_plenaria_hora_inicio"></span></br><br/>
-        <h2><span id="relogio"></span></h2>
-        <table>
-            <tr>
-               <td>
-                  <ul id="votacao">
-                  </ul>
-               </td>
-            </tr>
-        </table>
-        <span id="resultado_votacao"></span><br/>
-        </h3>
-    </body>
+            $("#counter").text(counter);
+            counter++;
+          },
+          error: function(err) {
+            console.error(err);
+          },
+          dataType: "json",
+          //complete: setTimeout(function() {poll()}, 5000),
+          timeout: 20000 // TODO: decrease
+        })
+      })();
+    });
+  </script>
 </html>
diff --git a/sapl/templates/painel/voto_nominal.html b/sapl/templates/painel/voto_nominal.html
index f7fdf7782..aa1a8f9cf 100644
--- a/sapl/templates/painel/voto_nominal.html
+++ b/sapl/templates/painel/voto_nominal.html
@@ -1,4 +1,5 @@
 {% load i18n %}
+{% load common_tags %}
 {% load render_bundle from webpack_loader %}
 {% load webpack_static from webpack_loader %}
 
@@ -9,7 +10,9 @@
     <title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    {% render_bundle 'global'%}
+    {% render_chunk_vendors 'css' %}
+    {% render_bundle  'global' 'css' %}
+    {% render_bundle  'painel' 'css' %}
 
     <style type="text/css">
         html, body {
@@ -26,7 +29,6 @@
         #date, #relogio, #resultado_votacao, #blocoprincipal, #blocoerro {
           font-family: Verdana;
         }
-      }
         #votos
         {
             text-align:center;
@@ -35,6 +37,11 @@
         {
             display:inline;
         }
+
+        #voltar {
+          margin-left: 5rem;
+        }
+      }
     </style>
   </head>
   <body>
@@ -122,6 +129,10 @@
     </body>
 </html>
 
+{% render_chunk_vendors 'js' %}
+{% render_bundle  'global' 'js' %}  
+{% render_bundle  'painel' 'js' %}      
+    
 <script type="text/javascript">
   var d = new Date();
   var n = d.toLocaleDateString();