Team pages should have a sub-nav for anchor linking the sections on the page

RESOLVED FIXED

Status

Webtools
Elmo
P2
normal
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: peterbe, Assigned: peterbe)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Assignee)

Description

5 years ago
Try to make it roll with the top of the page like this does: 
http://twitter.github.com/bootstrap/scaffolding.html
(Assignee)

Updated

5 years ago
Blocks: 772108

Updated

5 years ago
Priority: -- → P2
(Assignee)

Comment 1

5 years ago
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: 
https://github.com/peterbe/elmo/tree/feature/bug770360-teampage-subnav
Attachment #645417 - Flags: review?(l10n)

Comment 2

5 years ago
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.
Attachment #645417 - Flags: review?(l10n) → review-
(Assignee)

Comment 3

5 years ago
Notes-to-self:

* 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. https://l10n.mozilla.org/teams/my
(Assignee)

Comment 4

5 years ago
Created attachment 650910 [details] [diff] [review]
new sub-nav in place

also available 
https://github.com/peterbe/elmo/tree/feature/bug770360-teampage-subnav
Attachment #645417 - Attachment is obsolete: true
Attachment #650910 - Flags: review?(l10n)

Comment 5

5 years ago
Axel, can you review please?
Assignee: nobody → peterbe

Comment 6

5 years ago
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 http://mozilla.org/MPL/2.0/.
>  {% endcomment %} -->
> +<div id="shipping">
> +  <h2>Applications &amp; Sign-offs <a href="#shipping" class="permalink">#</a></h2>

... here.
Attachment #650910 - Flags: review?(l10n) → review+

Comment 7

5 years ago
Commit pushed to develop at https://github.com/mozilla/elmo

https://github.com/mozilla/elmo/commit/3906c16d395891aa172ae0fab88dc6fef2fc1c5c
bug770360 - smoothscrolling sub-nav on teams page, r=Pike
(Assignee)

Updated

5 years ago
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.