Display inactive rep picture in grayscale

static/scss/legislature.scss

@@ -65,4 +65,17 @@
             text-indent: 10px;
         }
     }
+}
+
+.representative_item.inactive,
+.representative.inactive {
+    .photo img {
+        -webkit-filter: greyscale(1);
+        -moz-filter: grayscale(1);
+        -ms-filter: grayscale(1);
+        -o-filter: grayscale(1);
+        filter: grayscale(1);
+
+        opacity: 0.5;
+    }
 }
\ No newline at end of file

templates/representatives/_representative_block.haml

@@ -3,7 +3,7 @@
 - load representatives_recommendations_tags
 - load humanize
 
-.representative
+.representative{'class': '{{ representative.active|yesno:"active,inactive" }}' }
 
   %h1.name<
     ={representative.full_name}

templates/representatives/representative_grid.haml

@@ -8,7 +8,7 @@
 
   .representative_grid
     - for representative in object_list
-      .representative_item
+      .representative_item{'class': '{{ representative.active|yesno:"active,inactive" }}'}
         %p.photo
           %a{'href': "{% url 'representative-detail' representative.slug %}"}
             %img{'src': '={representative.photo}', 'width': '80'}/

templates/representatives/representative_list.haml

@@ -38,8 +38,8 @@
           - trans 'Score'
 
       - for representative in object_list
-        %tr
-          %td
+        %tr.representative_item{'class': '{{ representative.active|yesno:"active,inactive" }}'}
+          %td.photo
             %a{'href': "{% url 'representative-detail' representative.slug %}"}
               %img{'src': '={representative.photo}', 'width': '80'}/