Last Comment Bug 770360 - Team pages should have a sub-nav for anchor linking the sections on the page
: Team pages should have a sub-nav for anchor linking the sections on the page
Product: Webtools
Classification: Server Software
Component: Elmo (show other bugs)
: 1.0
: x86 Mac OS X
: P2 normal (vote)
: ---
Assigned To: Peter Bengtsson [:peterbe]
Depends on:
Blocks: 772108
  Show dependency treegraph
Reported: 2012-07-02 15:40 PDT by Peter Bengtsson [:peterbe]
Modified: 2012-08-17 13:57 PDT (History)
2 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---

smoothscrolling sub-nav on teams page (6.70 KB, patch)
2012-07-24 12:01 PDT, Peter Bengtsson [:peterbe]
l10n: review-
Details | Diff | Review
new sub-nav in place (13.02 KB, patch)
2012-08-10 09:29 PDT, Peter Bengtsson [:peterbe]
l10n: review+
Details | Diff | Review

Description Peter Bengtsson [:peterbe] 2012-07-02 15:40:11 PDT
Try to make it roll with the top of the page like this does:
Comment 1 Peter Bengtsson [:peterbe] 2012-07-24 12:01:40 PDT
Created attachment 645417 [details] [diff] [review]
smoothscrolling sub-nav on teams page

I decided to not use a fixed subnav because it led down a rabbit hole of lots of other problems. For example, it covers the text and it also requires a lot of work on each scroll callback. 

The best way to review would be to test it by fetching:
Comment 2 Axel Hecht [:Pike] 2012-07-27 05:25:02 PDT
Comment on attachment 645417 [details] [diff] [review]
smoothscrolling sub-nav on teams page

Review of attachment 645417 [details] [diff] [review]:

I think less is more here. r- thus.

I opened a thread in .elmo for the animation piece, I think that deserves a discussion outside of this bug.

A few more things beyond the animation:

The navigation bar looks odd. Less styling is more, I think. Also, it squashes the two other lines there in an unfortunate way. Maybe move the wikimo link into the bar itself, as "Contacts", perhaps with an external link marker? Re the style of the bar itself, I'd go for less style, to either make it look more like the top-level navigation, or the table markup below.

I'd also get rid of the whole "top" logic. no anchor, no links. Yeah, bootstrap still has it, but I don't see the point. Scrolling up is something our folks can do themselves, or go back.

I also have RFEs, I'd like to have anchors at the section headings. So once you're down at webdashboard, be able to click the anchor to send a link to where you are. Right now, you'd have to go all the way to the top and hope the link gets you where you want to link to.

Another RFE, add #Firefox etc in the shipping snippet, I've felt the need to have those every now and then.
Comment 3 Peter Bengtsson [:peterbe] 2012-08-06 10:17:39 PDT

* Remove the smooth scrolling

* Remove the "top" anchor links

* Re-style the navbar look & feel

* anchor links near each section (including the appversion, e.g Fennec) like on django documentation

* Also, if no "Applications & Signoffs" then not appear in navbar either. E.g.
Comment 4 Peter Bengtsson [:peterbe] 2012-08-10 09:29:16 PDT
Created attachment 650910 [details] [diff] [review]
new sub-nav in place

also available
Comment 5 Laura Thomson :laura 2012-08-14 09:21:29 PDT
Axel, can you review please?
Comment 6 Axel Hecht [:Pike] 2012-08-17 05:33:23 PDT
Comment on attachment 650910 [details] [diff] [review]
new sub-nav in place

Review of attachment 650910 [details] [diff] [review]:

r=me with two more nits, I'd still like to disable the navigation item if there's not shipping snippet.

And can we rename the anchor from "shipping" to "applications", shipping itself is rather internal detail.

::: apps/homepage/templates/homepage/locale-team.html
@@ +36,5 @@
> +<div class="subnav">
> +  <ul>
> +    <li>
> +      <a href="#shipping">Applications &amp; Sign-offs</a>
> +    </li>

Make the <li> conditional {% if shipping %}, and replace "#shipping" with "#applications" here and ...

::: apps/shipping/templates/shipping/team-snippet.html
@@ +3,5 @@
>     - License, v. 2.0. If a copy of the MPL was not distributed with this
>     - file, You can obtain one at
>  {% endcomment %} -->
> +<div id="shipping">
> +  <h2>Applications &amp; Sign-offs <a href="#shipping" class="permalink">#</a></h2>

... here.
Comment 7 [github robot] 2012-08-17 13:56:05 PDT
Commit pushed to develop at
bug770360 - smoothscrolling sub-nav on teams page, r=Pike

Note You need to log in before you can comment on or make changes to this bug.