ajustes de layout em composição da mesa e lista de parlamentares

sapl/parlamentares/views.py

@@ -17,6 +17,7 @@ from django.utils.translation import ugettext_lazy as _
 from django.views.decorators.clickjacking import xframe_options_exempt
 from django.views.generic import FormView
 from django.views.generic.edit import UpdateView
+from image_cropping.utils import get_backend
 
 from sapl.base.forms import SessaoLegislativaForm
 from sapl.base.models import Autor
@@ -1027,7 +1028,16 @@ def altera_field_mesa_public_view(request):
             partido_parlamentar_sessao_legislativa(sessao,
                                                    parlamentar))
         if parlamentar.fotografia:
-            lista_fotos.append(parlamentar.fotografia.url)
+            thumbnail_url = get_backend().get_thumbnail_url(
+                parlamentar.fotografia,
+                {
+                    'size': (128, 128),
+                    'box': parlamentar.cropping,
+                    'crop': True,
+                    'detail': True,
+                }
+            )
+            lista_fotos.append(thumbnail_url)
         else:
             lista_fotos.append(None)
 

sapl/templates/parlamentares/parlamentar_perfil_publico.html

@@ -2,6 +2,8 @@
 {% load i18n %}
 {% load common_tags %}
 
+{% load cropping%}
+
 {% block base_content %}
 
   <div class="clearfix">
@@ -14,15 +16,13 @@
 
   <div class="row">
     {% if parlamentar.fotografia %}
-      <div class="col-sm-3">
-        <div id="div_fotografia" class="form-group">
-          <div class="controls">
-            <img class="img-responsive" src="{{ object.fotografia.url }}">
-          </div>
+      <div class="col-sm-4">
+        <div id="div_fotografia w-100" class="form-group">
+          <img class="img-fluid img-thumbnail" src="{% cropped_thumbnail object "cropping" scale=2%}">
         </div>
       </div>
     {% endif %}
-
+    <div class="col-sm-8">
       <div class="col-sm-8">
         <div id="div_nome" class="form-group">
           <p><b>Nome Completo: </b> &nbsp {{object.nome_completo}}</p>
@@ -70,6 +70,7 @@
           <p><b>Biografia: </b> &nbsp {{object.biografia|safe}}</p>
         </div>
       </div>
+    </div>
   </div>
 
   {% endblock detail_content %}

sapl/templates/parlamentares/parlamentares_list.html

@@ -44,7 +44,9 @@
             {% if forloop.first %}
                 <td> 
                   {% if obj.fotografia %}
-                    <img class="avatar-parlamentar" src="{% cropped_thumbnail obj "cropping" %}">
+                  <div id="w-100">
+                    <img class="img-fluid img-thumbnail" src="{% cropped_thumbnail obj "cropping"%}">
+                  </div>
                   {% endif %}
                 </td>
             {% endif %}

sapl/templates/parlamentares/public_composicaomesa_form.html

@@ -31,7 +31,7 @@
     </div>
 	</fieldset>
 	<br />
-	<fieldset class="form-group">
+	<fieldset class="form-group lista-parlamentares">
 		<legend>Composição da Mesa Diretora</legend>
 		<table id="tabela-composicao" class="table table-striped table-hover table-link-ordering">
 		  <thead>
@@ -46,7 +46,10 @@
       	{% for p in composicao_mesa %}
 					<tr>
 						{% if p.parlamentar.fotografia %}
-							<td><img class="avatar-parlamentar" src="{% cropped_thumbnail p.parlamentar "cropping" %}"></td>
+							<td>
+                <div id="w-100">
+                  <img class="img-fluid img-thumbnail" src="{% cropped_thumbnail p.parlamentar "cropping"%}">
+                </div>
 						{% else %}
 							<td></td>
 						{% endif %}
@@ -70,7 +73,7 @@
 //##############################################################
 function retorna_imagem(url){
     if (url != null){
-        image_component = '<img class="avatar-parlamentar" src="' + url + '">'
+        image_component = '<img class="img-fluid img-thumbnail" src="' + url + '">'
         return image_component
     }
 
@@ -113,7 +116,7 @@ function altera_field(id_legislatura, id_sessao=null){
 
           // Atualiza a tabela de composição
           for (i = 0; i < lista_parlamentares.length; i++) {
-              $("#tabela-composicao tbody").append('<tr> <td>' + retorna_imagem(lista_fotos[i]) +'</td> <td><a href="/parlamentar/' + lista_parlamentares[i][0] + '">' + lista_parlamentares[i][1] + '</a></td> <td>' + lista_partidos[i] + '</td> <td>'+ lista_cargos[i][1] + '</td> </tr>');
+              $("#tabela-composicao tbody").append('<tr> <td> <div class="w-100">' + retorna_imagem(lista_fotos[i]) +' </div> </td> <td><a href="/parlamentar/' + lista_parlamentares[i][0] + '">' + lista_parlamentares[i][1] + '</a></td> <td>' + lista_partidos[i] + '</td> <td>'+ lista_cargos[i][1] + '</td> </tr>');
           }
 
           // Garante que a Sessão atual será a selecionada previamente e, no caso em que