Skip to content

Commit

Permalink
streamline how we show commissioners on anc.html using popovers
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoshData
JoshData committed Feb 2, 2014
1 parent 5b4790c commit 3e4dc1d
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 27 deletions.
1 change: 1 addition & 0 deletions ancbrigadesite/static/css/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -468,3 +468,4 @@ div#use_my_location {

p.error { color: red; }
form ul { list-style: none; margin: 0; } /* radio widget */

106 changes: 79 additions & 27 deletions ancbrigadesite/templates/ancbrigadesite/anc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,36 @@

{% block head %}
<style>
h2 { font-size: 22px; }

#recent_docs > p { margin: 0; }

#commissioners td {
cursor: pointer;
padding: 0 1.5em .75em 0;
vertical-align: top;
}
#commissioners td > div {
padding: 4px;
}
#commissioners td > div:hover {
background-color: #EEE;
}
#commissioners .smd_num {
font-size: 12px;
line-height: 15px;
}
#commissioners .smd_name {
}
#commissioners .smd_actions {
font-size: 11px;
}
.smd_extra_info_wrapper em {
display: block;
font-size: 12px;
line-height: 14px;
}

#by_the_numbers > div { margin-top: 12px; }
#by_the_numbers span.number { font-size: 130%; font-weight: bold; }
#by_the_numbers span.description { margin-left: 1em; color: #555; }
Expand All @@ -21,10 +49,10 @@
<!-- Main hero unit for a primary marketing message or call to action -->
<div id="masthead">
<div class="container">
<div class="row">
<div class="row" style="text-align: center">
<h1 style="font-size: 36px">ANC {{anc}}</h1>
<div style="text-align: center">{{info.neighborhood_list}}</div>
<div style="text-align: center">Website: <a href="{{ info.website }}">{{ info.website }}</a> | Next meeting: {{ next_meeting }}</div>
<div>{{info.neighborhood_list}}</div>
<div style="margin-top: 3px">Website: <a href="{{ info.website }}">{{ info.website }}</a> | Next meeting: {{ next_meeting }}</div>
</div>
</div><!-- /container -->
</div><!-- /masthead -->
Expand All @@ -50,37 +78,51 @@ <h2>{{ anc }}'s Recent Documents</h2>
{% endfor %}
</div>
<p style="margin-top: .33em"><a href="#document_archive">See all of {{anc}}&rsquo;s documents...</a></p>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="span7">
<h2>Commissioners</h2>

<table id="commissioners" cols="3">
<tr>
{% for smd in info.smds.values %}
<td id="smd{{ smd.smd_number }}" width="33%" style="vertical-align: top; padding-right: 1.25em;" data-smd-number="{{ smd.smd_number }}">
<div style="padding-bottom: .4em; color: black; border-bottom: 1px solid #444;">{{ smd.first_name }} {{ smd.last_name }} <br><b><small>SMD {{ smd.smd_number }}</b></small>
</div>
<div>
<small>
{% if smd.Position %}<p><em>Position: </em>{{ smd.Position }}</p>{% endif %}
<p><em>Neighborhoods:</em> {{ smd.neighborhood_list|capfirst }}</p>
</small>
</div>
<div class="hidey" id="hidey{{ smd.smd_number }}">
<small>
<p><em>Email:</em> {% if smd.email %}{{ smd.email }}{% else %}None provided{% endif %}</p>
<p><em>Phone:</em> {% if smd.phone %}{{ smd.phone }}{% else %}None provided{% endif %}</p>
<p><em>Terms as commissioner: </em>{{ smd.terms }}</p>
</small>
</div>
</td>
{% if forloop.counter|divisibleby:3 and not forloop.last %}</tr><tr>{% endif %}
<td id="smd{{ smd.smd_number }}" width="33%" data-smd-number="{{ smd.smd_number }}">
<div>
<div class="smd_num_and_name">
<div class="smd_num">
<strong>SMD {{ smd.smd_number }}</strong>
{% if smd.Position %} / {{ smd.Position }}{% endif %}
</div>
<div class="smd_name">
{{ smd.first_name }} {{ smd.last_name }}
</div>
</div>
<div class="smd_actions">
<a href="#" class="show_on_map">show on map</a>
{% if smd.email %}| <a href="mailto:{{ smd.email }}">email</a>{% endif %}
</div>
<div class="smd_extra_info" style="display: none">
<div class="smd_extra_info_wrapper">
<p><em>Neighborhoods</em> {{ smd.neighborhood_list|capfirst }}</p>
<p><em>Phone</em> {% if smd.phone %}{{ smd.phone }}{% else %}None provided{% endif %}</p>
<p><em>Terms as commissioner: </em>{{ smd.terms|ordinal }} term</p>
</div>
</div>
</div>
</td>
{% if forloop.counter|divisibleby:3 and not forloop.last %}</tr><tr>{% endif %}
{% endfor %}
</tr>
</table>

{% if info.committees.values %}
<h2>Committees</h2>

</td>
<table class="committees" cols="1">
<tr>
{% for cmte in info.committees.values %}
Expand Down Expand Up @@ -219,19 +261,27 @@ <h2>{{ anc }} by the numbers</h2>

$("#smd" + window.location.hash.replace("#", "")).css({"background-color": "#ffffcc"});
$("#hidey" + window.location.hash.replace("#", "")).show();

var smd_bounds = {
{% for smd in info.smds.values %}
'{{smd.smd_number}}': new google.maps.LatLngBounds(new google.maps.LatLng({{smd.bounds.1}}, {{smd.bounds.0}}), new google.maps.LatLng({{smd.bounds.3}}, {{smd.bounds.2}})){% if not forloop.last %},{% endif %}
{% endfor %}
};

$("#commissioners td").each(function() {
var smd_number = $(this).attr('data-smd-number');

$(this).find('.smd_num_and_name').popover({
container: 'body',
trigger: 'hover',
placement: function() { return $(window).width() > 640 ? 'right' : 'bottom'; },
title: "SMD " + smd_number,
html: true,
content: $(this).find('.smd_extra_info').html()
});

$("#commissioners td").click(function() {
var smd_number = $(this).attr('data-smd-number');

$(".hidey").hide();
$("#hidey" + smd_number).show();

$(this).find('.show_on_map').click(function() {
if (!map) return;
map.fitBounds(smd_bounds[smd_number]);
map.overlayMapTypes.clear();
Expand All @@ -240,6 +290,8 @@ <h2>{{ anc }} by the numbers</h2>
add_overlay(map, "dc-anc-2013-outlines", 15, 20);
add_overlay(map, "dc-smd-2013-outlines", 13, 14);
add_overlay(map, "dc-smd-2013", 15, 20);
return false;
});
});

</script>
Expand Down

0 comments on commit 3e4dc1d

Please sign in to comment.