diff options
| -rwxr-xr-x | templates/web/fixmystreet/around/display_location.html | 6 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/base.scss | 30 | ||||
| -rw-r--r-- | web/js/fixmystreet.js | 46 |
3 files changed, 75 insertions, 7 deletions
diff --git a/templates/web/fixmystreet/around/display_location.html b/templates/web/fixmystreet/around/display_location.html index ec4b67269..7010ff93e 100755 --- a/templates/web/fixmystreet/around/display_location.html +++ b/templates/web/fixmystreet/around/display_location.html @@ -89,18 +89,18 @@ <section class="full-width"> - <menu id="problems-nav"> + <menu id="problems-nav" class="tab-nav"> <ul> <li><a href="#problems-on-the-map">[% loc('Problems on the map') %]</a></li> <li><a href="#problems-nearby">[% loc( 'Problems nearby' ) %]</a></li> </ul> </menu> - <ul id="problems-on-the-map" class="issue-list-a"> + <ul id="problems-on-the-map" class="issue-list-a tab"> [% INCLUDE "around/on_map_list_items.html" %] </ul> - <ul id="problems-nearby" class="issue-list-a"> + <ul id="problems-nearby" class="issue-list-a tab"> [% INCLUDE "around/around_map_list_items.html" %] </ul> </section> diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index 46b28a22f..2fc7f6940 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -637,13 +637,37 @@ a:hover.rap-notes-trigger { //report a problem tabs #problems-nav { - padding:0; + padding:0 1em; overflow:hidden; border-bottom:0.25em solid #333; ul { - @include list-reset; + @include list-reset-soft; + display:table; + width:100%; li { - + display:table-cell; + border-right:0.25em solid #fff; + &:last-child { + border-right:none; + } + a { + display:block; + background:#e2e2e2; + color:#333; + padding:1em; + text: { + transform:uppercase; + align:center; + } + &:hover { + text-decoration:none; + background:#e6e6e6; + } + &.active { + background:#333; + color:#fff; + } + } } } } diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js index c382a9645..7a512fdf5 100644 --- a/web/js/fixmystreet.js +++ b/web/js/fixmystreet.js @@ -30,7 +30,13 @@ function form_category_onchange() { }); } - +/* + * general height fixing function + * + * elem1: element to check against + * elem2: target element + * offest: this will be added (if present) to the final value, useful for height errors + */ function heightFix(elem1, elem2, offset){ var h1 = $(elem1).height(), h2 = $(elem2).height(); @@ -42,6 +48,27 @@ function heightFix(elem1, elem2, offset){ } } + +/* + * very simple tab function + * + * elem: trigger element, must have an href attribute (so probably needs to be an <a>) + */ +function tabs(elem) +{ + var target = elem.attr('href'); + if(!$(target).hasClass('open')) + { + //toggle class on nav + $('.tab-nav .active').removeClass('active'); + elem.addClass('active'); + //hide / show the right tab + $('.tab.open').removeClass('open').hide(); + $(target).addClass('open').show(); + } +} + + $(function(){ if(Modernizr.mq('only screen and (max-width:48em)')) { $('html').addClass('mobile'); @@ -235,4 +262,21 @@ $(function(){ $('.mobile .content').show(); $('.rap-notes').hide(); }); + + + /* + * Tabs + */ + //make initial tab active + $('.tab-nav a:first').addClass('active'); + $('.tab:first').addClass('open'); + + //hide other tabs + $('.tab').not('.open').hide(); + + //set up click event + $(".tab-nav").on('click', 'a', function(e){ + e.preventDefault(); + tabs($(this)); + }); });
\ No newline at end of file |