Minor adjustments

memopol/templatetags/memopol_tags.py

@@ -93,19 +93,17 @@ def country_flag(country):
 
 
 @register.filter
-def chamber_icon(chamber):
+def chamber_icon(chamber, tplace='bottom'):
     url = static('images/chamber-%s.png' % cssify(chamber.abbreviation))
     return mark_safe(
-        u'<span class="chamber-icon" style="background-image: url({url})">'
-        u'</span>'.format(name=chamber.name, url=url))
-
-
-@register.filter
-def chamber_small_icon(chamber):
-    url = static('images/chamber-%s.png' % cssify(chamber.abbreviation))
-    return mark_safe(
-        u'<span class="chamber-icon" style="background-image: url({url})" '
-        u'title="{name}"></span>'.format(name=chamber.name, url=url))
+        u'<span class="chamber-icon" style="background-image: url({url})"'
+        u' data-toggle="tooltip" data-placement="{place}"'
+        u' title="{name}"></span>'.format(
+            name=chamber.name,
+            url=url,
+            place=tplace
+        )
+    )
 
 
 @register.simple_tag

memopol/tests/response_fixtures/DossierDocumentsTest.test_proposals.content

 <tr class="document">
         <td>
-          <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)"></span>
+          <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
         </td>
         <td>
           <a class="external" href="http://www.assemblee-nationale.fr/14/dossiers/loi_55-385_prorogation_application.asp" target="_blank">

memopol/tests/response_fixtures/RepresentativeDetailTest.test_details.content

@@ -8,7 +8,7 @@
           </dd>
 ---
 <dd>
-              <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)"></span> Assemblée nationale
+              <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span> Assemblée nationale
             </dd>
 ---
 <dd>
@@ -22,7 +22,7 @@
 <dd>
               
                 <a class="label label-primary" href="http://twitter.com/olivierdussopt" target="_blank">
-                  <img class="social-icon" src="/static/collected/images/social-twitter.png"/>
+                  <i class="fa fa-twitter" title=""></i>
                   
                     Twitter
                   

memopol/tests/response_fixtures/RepresentativeMandatesTest.test_current_mandates.content

 <div class="col-sm-12 col-md-6 mandate ">
   <div class="thumbnail">
     
-      <span class="mandate-badge"><span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-ep.png)"></span></span>
+      <span class="mandate-badge"><span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-ep.png)" title="European Parliament"></span></span>
     
     <h4 class="text-center">
       European Parliament

memopol/tests/response_fixtures/RepresentativeMandatesTest.test_past_mandates.content

 <div class="col-sm-12 col-md-6 mandate mandate-secondary">
   <div class="thumbnail">
     
-      <span class="mandate-badge"><span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-ep.png)"></span></span>
+      <span class="mandate-badge"><span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-ep.png)" title="European Parliament"></span></span>
     
     <h4 class="text-center">
       European Parliament
@@ -133,7 +133,7 @@
 <div class="col-sm-12 col-md-6 mandate mandate-secondary">
   <div class="thumbnail">
     
-      <span class="mandate-badge"><span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-ep.png)"></span></span>
+      <span class="mandate-badge"><span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-ep.png)" title="European Parliament"></span></span>
     
     <h4 class="text-center">
       European Parliament
@@ -327,7 +327,7 @@
 <div class="col-sm-12 col-md-6 mandate mandate-secondary">
   <div class="thumbnail">
     
-      <span class="mandate-badge"><span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-ep.png)"></span></span>
+      <span class="mandate-badge"><span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-ep.png)" title="European Parliament"></span></span>
     
     <h4 class="text-center">
       European Parliament

memopol/tests/response_fixtures/ThemeProposalsTest.test_proposals.content

 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -41,9 +41,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -82,9 +82,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -123,9 +123,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -164,9 +164,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -206,9 +206,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -247,9 +247,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -288,9 +288,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -329,9 +329,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -370,9 +370,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -411,9 +411,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -452,9 +452,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 
@@ -493,9 +493,9 @@
 ---
 <tr class="proposal">
       
-        <td>
+        <td class="lead">
           
-            <span class="chamber-icon" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
+            <span class="chamber-icon" data-placement="bottom" data-toggle="tooltip" style="background-image: url(/static/collected/images/chamber-an.png)" title="Assemblée nationale"></span>
           
         </td>
 

memopol/views/theme_detail_dossiers.py

@@ -17,6 +17,12 @@ class ThemeDetailDossiers(ThemeDetailBase):
                 'dossiers',
                 Dossier.objects.order_by('-pk')
                 .prefetch_related('documents__chamber', 'themes')
+                .annotate(
+                    nb_proposals=models.Count('proposals', distinct=True),
+                    nb_recommendations=models.Count(
+                        'proposals__recommendation', distinct=True),
+                    nb_documents=models.Count('documents', distinct=True)
+                )
             )
         )
         return qs

static/css/custom.css

@@ -20,6 +20,8 @@ body {
 
 .card-list {
     margin-top: 1em;
+    display: flex;
+    flex-flow: row wrap;
 }
 
 .tag {
@@ -374,6 +376,9 @@ iframe {
 	margin-bottom: 1em;
 }
 
+.dossier-card div.lead {
+    margin-bottom: 5px;
+}
 
 
 /***************************************************************
@@ -386,12 +391,17 @@ iframe {
 }
 
 .chamber-icon, .group-icon, .flag-icon {
-    width: 1.75em;
-    height: 1.75em;
+    width: 2em;
+    height: 2em;
     line-height: initial;
     vertical-align: bottom;
 }
 
+.lead .chamber-icon, .lead .group-icon, .lead .flag-icon {
+    width: 1.75em;
+    height: 1.75em;
+}
+
 .flag-icon:before {
     content: initial;
 }
@@ -408,14 +418,6 @@ iframe {
     margin-left: .5em;
 }
 
-.social-icon {
-    width: 1.1em;
-    height: 1.1em;
-
-    display: inline-block;
-    vertical-align: sub;
-}
-
 .vote_positive {
     color: green;
 }

templates/blocks/_dossier_list.html

@@ -12,44 +12,47 @@
           <div class="col-xs-12">
             <h4 class="text-center">{{ dossier.title }}</h4>
 
-            <p class="text-center lead">
-              &nbsp;
-
-              {% if dossier.nb_proposals > 0 %}
-                <span class="label label-default" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Proposals' %}">
-                  {% fontawesome_icon "pencil" %}
-                  <span class="badge">{{ dossier.nb_proposals }}</span>
-                </span>
-              {% endif %}
-
-              {% if dossier.nb_recommendations > 0 %}
-                <span class="label label-default" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Recommendations' %}">
-                  {% fontawesome_icon "eye" %}
-                  <span class="badge">{{ dossier.nb_recommendations }}</span>
-                </span>
-              {% endif %}
-
-              {% if dossier.nb_documents > 0 %}
-                <span class="label label-default" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Documents' %}">
-                  {% fontawesome_icon "file" %}
-                  <span class="badge">{{ dossier.nb_documents }}</span>
-                </span>
-              {% endif %}
+            <div class="lead">
+              <div class="pull-right">
+                {% if dossier.nb_proposals > 0 %}
+                  <span class="label label-default" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Proposals' %}">
+                    {% fontawesome_icon "pencil" %}
+                    <span class="badge">{{ dossier.nb_proposals }}</span>
+                  </span>
+                {% endif %}
+
+                {% if dossier.nb_recommendations > 0 %}
+                  <span class="label label-default" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Recommendations' %}">
+                    {% fontawesome_icon "eye" %}
+                    <span class="badge">{{ dossier.nb_recommendations }}</span>
+                  </span>
+                {% endif %}
+
+                {% if dossier.nb_documents > 0 %}
+                  <span class="label label-default" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Documents' %}">
+                    {% fontawesome_icon "file" %}
+                    <span class="badge">{{ dossier.nb_documents }}</span>
+                  </span>
+                {% endif %}
+
+                &nbsp;
+              </div>
 
               &nbsp;
-            </p>
-
-            <p class="text-center">
-              &nbsp;
 
               {% for chamber in dossier.chambers %}
                 {{ chamber|chamber_icon }}
               {% endfor %}
 
-              {% include "blocks/_themetags.html" with themes=dossier.themes.all %}
+            </div>
 
-              &nbsp;
-            </p>
+            {% if dossier.themes.all|length %}
+              <p class="text-right">
+                &nbsp;
+                {% include "blocks/_themetags.html" with themes=dossier.themes.all %}
+                &nbsp;
+              </p>
+            {% endif %}
           </div>
         </div>
         </a>

templates/blocks/_proposal_list.html

@@ -30,9 +30,9 @@
   {% for proposal in proposals %}
     <tr class="proposal">
       {% if show_dossier %}
-        <td>
+        <td class="lead">
           {% for chamber in proposal.dossier.chambers %}
-            {{ chamber | chamber_small_icon }}
+            {{ chamber | chamber_icon }}
           {% endfor %}
         </td>
 

templates/representatives/representative_detail.html

@@ -55,7 +55,7 @@
             <dd>
               {% for site in representative.social_websites %}
                 <a class="label label-primary" href="{{ site.url }}" target="_blank">
-                  <img class="social-icon" src="{% static 'images' %}/social-{{ site.kind }}.png">
+                  {% fontawesome_icon site.kind %}
                   {% with kind=site.kind|capfirst %}
                     {% trans kind %}
                   {% endwith %}

templates/representatives/representative_grid.html

@@ -37,7 +37,8 @@
 
           <div class="col-xs-7">
             <h4 class="text-center">{{ representative.full_name }}</h4>
-            <p class="text-center">
+            <p class="text-center lead">
+              <br>
               {% if representative.country %}
               <a class="icon-badge" href="{% country_url representative.country %}" title="{{ representative.country.name }}">{{ representative.country|country_flag }}</a>
               {% endif %}