diff options
| -rwxr-xr-x | templates/web/fixmystreet/reports/council.html | 100 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/base.scss | 24 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/fixmystreet.js | 40 |
3 files changed, 112 insertions, 52 deletions
diff --git a/templates/web/fixmystreet/reports/council.html b/templates/web/fixmystreet/reports/council.html index 7af9201cd..17ed2c37f 100755 --- a/templates/web/fixmystreet/reports/council.html +++ b/templates/web/fixmystreet/reports/council.html @@ -59,9 +59,9 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a [% END %] [% IF ward %] -[% tprintf( loc('You can <a href="%s">view all reports for the council</a> or <a href="/reports">show all councils</a>.'), council_url ) %] + [% tprintf( loc('You can <a href="%s">view all reports for the council</a> or <a href="/reports">show all councils</a>.'), council_url ) %] [% ELSE %] -[% loc('You can <a href="/reports">show all councils</a>.') %] + [% loc('You can <a href="/reports">show all councils</a>.') %] [% END %] <h2>[% name %]</h2> @@ -75,67 +75,93 @@ Its area is now covered by <a href="/reports/Bedford">Bedford Borough Council</a </p> [% END %] - [% INCLUDE 'pagination.html', param = 'p' %] +[% IF children.size %] + +<a href="#council_wards" class="button-right hidden-nojs hideshow-trigger">[% loc('Wards of this council') %]</a> + +<section id="council_wards" class="hidden-js"> + <h2>[% loc('Wards of this council') %]</h2> + <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p> + <ul class="list-a full-width"> + [% FOR child IN children.values.sort('name') %] + <li><a href="[% child.url %]">[% child.name %]</a></li> + [% END %] + </ul> +</section> +[% END %] + + + +[% INCLUDE 'pagination.html', param = 'p' %] + +<section class="full-width"> + <menu id="problems-nav" class="tab-nav"> + <ul> + [% IF fixed.${council.id}.new %]<li><a href="#recently_fixed">[% loc('Recently fixed') %]</a></li>[% END %] + [% IF open.${council.id}.new %]<li><a href="#new_problems">[% loc( 'New problems' ) %]</a></li>[% END %] + [% IF open.${council.id}.older%]<li><a href="#older_problems">[% loc( 'Older problems' ) %]</a></li>[% END %] + [% IF open.${council.id}.unknown %]<li><a href="#old_unknown_problems">[% loc( 'Old / unknown problems' ) %]</a></li>[% END %] + [% IF fixed.${council.id}.old %]<li><a href="#old_fixed">[% loc( 'Old fixed' ) %]</a></li>[% END %] + </ul> + </menu> [% INCLUDE column title = loc('Recently fixed') + tab_id = 'recently_fixed' problems = fixed.${council.id}.new %] [% INCLUDE column title = loc('New problems') + tab_id = 'new_problems' problems = open.${council.id}.new %] - [%# This doesn't really need a whole separate template %] - [% IF c.cobrand.moniker == 'emptyhomes' %] - [% - INCLUDE column - title = loc('Older problems') - problems = open.${council.id}.older.merge( open.${council.id}.unknown ) - %] - [% ELSE %] - [% INCLUDE column - title = loc('Older problems') - problems = open.${council.id}.older - %] - [% INCLUDE column - title = loc('Old problems, state unknown') - problems = open.${council.id}.unknown - %] - [% END %] + [% INCLUDE column + title = loc('Older problems') + tab_id = 'older_problems' + problems = open.${council.id}.older + %] + + [% INCLUDE column + title = loc('Old / unknown problems') + tab_id = 'old_unknown_problems' + problems = open.${council.id}.unknown + %] [% INCLUDE column title = loc('Old fixed') + tab_id = 'old_fixed' problems = fixed.${council.id}.old %] +</section> -[% IF children.size %] -<h2>[% loc('Wards of this council') %]</h2> -<p>[% loc('Follow a ward link to view only reports within that ward.') %]</p> -<ul> - [% FOR child IN children.values.sort('name') %] - <li><a href="[% child.url %]">[% child.name %]</a></li> - [% END %] -</ul> -[% END %] - </div> [% INCLUDE 'footer.html' %] [% BLOCK column %] [% IF problems %] -<h3>[% title %]</h3> +<h3 class="hidden-js">[% title %]</h3> -<ul> +<ul id="[% tab_id %]" class="issue-list-a tab"> [% FOREACH problem IN problems %] - <li><a href="[% c.uri_for('/report/' _ problem.id) %]">[% problem.title | html %]</a> - [% IF problem.councils > 1 %] <small>[% loc('(sent to both)') %]</small> [% END %] - [% IF c.cobrand.moniker != 'emptyhomes' %] - [% IF problem.councils == 0 %] <small>[% loc('(not sent to council)') %]</small> [% END %] - [% END %] + <li> + <a href="[% c.uri_for('/report/' _ problem.id) %]"> + <div class="text"> + <h4>[% problem.title | html %]</h4> + [% IF problem.councils > 1 %] <small>[% loc('(sent to both)') %]</small> [% END %] + [% IF c.cobrand.moniker != 'emptyhomes' %] + [% IF problem.councils == 0 %] <small>[% loc('(not sent to council)') %]</small> [% END %] + [% END %] + </div> + [% IF problem.photo %] + <div class="img"> + <img height="60" width="90" src="/photo?id=[% p.id %];fp=1" alt=""> + </div> + [% END %] + </a> </li> [% END %] </ul> diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index e846cfe1b..1bcfd58df 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -860,6 +860,13 @@ a:hover.button-left { } } } +.list-a { + @extend .issue-list-a; + a { + padding:0.5em 1em; + font-weight:bold; + } +} //display:table fixes .ie6, .ie7 { .issue-list-a { @@ -1020,8 +1027,15 @@ table.nicetable { } } - - +.promo { + @extend .full-width; + background:$contrast1; + padding:1em; + margin-bottom:1em; + a, a:hover { + color:#fff; + } +} // this is a bit of a hack to get some differentation between desk and mobile .desk-only { @@ -1034,6 +1048,12 @@ table.nicetable { visibility: hidden; } +// hide anything with this class if js is NOT working +.no-js .hidden-nojs { + display: none !important; + visibility: hidden; +} + /* Front page */ #front-main { diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index c035fe32a..a6ae9be21 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -75,23 +75,24 @@ function tabs(elem) $(function(){ + $('html').removeClass('no-js').addClass('js'); + //add mobile class if small screen if(Modernizr.mq('only screen and (max-width:48em)')) { $('html').addClass('mobile'); } else { - - // Make map full screen on non-mobile sizes. - // temp: exclude ie6 as it doesn't like the height part of this - if(!$('html').hasClass('ie6')){ - $('#map_box').prependTo('.wrapper').css({ - zIndex: 0, position: 'fixed', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }).data('size', 'full'); + // Make map full screen on non-mobile sizes. + // temp: exclude ie6 as it doesn't like the height part of this + if(!$('html').hasClass('ie6')){ + $('#map_box').prependTo('.wrapper').css({ + zIndex: 0, position: 'fixed', + top: 0, left: 0, right: 0, bottom: 0, + width: '100%', height: '100%', + margin: 0 + }).data('size', 'full'); + } } - } //heightfix the desktop .content div if(Modernizr.mq('only screen and (min-width:48em)')) { if (!($('body').hasClass('frontpage'))){ @@ -99,8 +100,6 @@ $(function(){ } } - $('html').removeClass('no-js').addClass('js'); - $('#pc').focus(); $('input[type=submit]').removeAttr('disabled'); @@ -301,4 +300,19 @@ $(function(){ $('.form-focus-trigger').on('focus', function(){ $('.form-focus-hidden').fadeIn(500); }); + + /* + * Show on click - pretty generic + */ + $('.hideshow-trigger').on('click', function(e){ + e.preventDefault(); + var href = $(this).attr('href'), + //stupid IE sometimes adds the full uri into the href attr, so trim + start = href.indexOf('#'), + target = href.slice(start, href.length); + + $(target).removeClass('hidden-js'); + + $(this).hide(); + }); }); |