Add the Navigation Tabs for hub pages (e.g. at the top of the overlay). See http://groups.drupal.org/node/283223#Navigation_Tabs and http://groups.drupal.org/node/283223#Overlay.

Notes:
- A variant with darker colors will be needed for the Overlay
- We may be able to simplify this component visually (e.g. remove drop shadows, tab 'backdrop')
- Secondary tabs should be styled with a separate set of classes. They look different from primary tabs, so don’t try styling them by overriding the primary tab classes. Markup will likely be something like: <ul class="tabs">…</ul> and for secondary: <ul class="secondary-tabs">…</ul>.

CommentFileSizeAuthor
#8 tabs-8.patch5.26 KBry5n
#8 tabs-5-8.interdiff.txt5.67 KBry5n
#5 1945542-navigation-tabs-5.patch4.51 KBoresh
#2 1945542-navigation-tabs-2.patch3.99 KBoresh
#1 tabs-1.patch4.13 KBlewisnyman

Comments

lewisnyman’s picture

lewisnyman
he/him
commented
Status: Active » Needs review
StatusFileSize
new tabs-1.patch4.13 KB

I've got Photoshop issues so I'd pay close attention to anything involving layer styles and font sizing/spacing

oresh’s picture

oresh commented
StatusFileSize
new 1945542-navigation-tabs-2.patch3.99 KB

@LewisNyman, you shouldn't use the __ in the class name;
That will work of course, but it breaks the overall stylistic of css.
And when possible emit using classes - we don't always have a chance to add a class to something.
if you have .tabs you can use .tabs li and .tabs li a instead of __link or something like that.
I've provided a patch for that, please take a look.

For the vertical tabs: In current theme of Drupal 8 the vertical tab is now horizontal, and is the same as collapse. Lets leave it for now.

For the dark version: need more information about class names, and let's do it a bit later?

ry5n’s picture

ry5n commented

Looks great! Committed and pushed to branch `tabs`.

ry5n’s picture

ry5n commented

@oresh I committed the initial patch. For background on the double-underscore naming convention and why we’re trying to avoid selectors like `tabs li a`, please take a look at the new CSS coding standards: http://drupal.org/node/1887918. This is new stuff, and we’re still working it out, so your input is very much welcome.

oresh’s picture

oresh commented
StatusFileSize
new 1945542-navigation-tabs-5.patch4.51 KB

ry5n,
I've made a patch all acording to smacss and http://drupal.org/node/1887918
And fixed some bugs with z-index and hover underline (as in designs)
Please review and apply if its ok.

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
Status: Needs review » Needs work

Review from Bojhan while reviewing #1953374: Implement Seven style guide for core overlay:

[2:55pm] Bojhan: GaborHojtsy: couple of things
[2:55pm] Bojhan: GaborHojtsy: the top
[2:55pm] Bojhan: GaborHojtsy: tabs
[2:55pm] Bojhan: GaborHojtsy: the rounding, is rather random
[2:55pm] Bojhan: GaborHojtsy: for all the interactive tabs, it should be to the left
[2:56pm] Bojhan: GaborHojtsy: the active tab text, should be #00
[2:56pm] Bojhan: #000
[2:56pm] Bojhan: GaborHojtsy: the background on those tabs buttons is #e6e5e1
[2:56pm] Bojhan: GaborHojtsy: the background on the tabs should be #e6e5e1
[3:03pm] Bojhan: GaborHojtsy: the design also has a backdrop #000 of about 80%
[3:03pm] Bojhan: GaborHojtsy: not sure if thats hard to figure out though, this is obviously easy in PS, and harder in CSS
[3:04pm] GaborHojtsy: Bojhan: yeah, I don't have a feel for converting backdrops to CSS like that
[3:08pm] Bojhan: the top tab should be 004f80
[3:08pm] Bojhan: the inactive links
[3:08pm] Bojhan: GaborHojtsy: probably same for bold, the design the title is not bold.
[3:10pm] Bojhan: err
[3:10pm] Bojhan: the tabs
[3:11pm] GaborHojtsy: Bojhan: the title is not bold here either
[3:11pm] GaborHojtsy: Bojhan: so the tabs?
[3:12pm] Bojhan: GaborHojtsy: ugh, my firebug sucks
[3:12pm] GaborHojtsy: the tabs css from the patch says font-weight 600
[3:12pm] Bojhan: GaborHojtsy: yhea, that seems a little heavy
[3:14pm] Bojhan: GaborHojtsy: I think thats it. I have some weird effect, on the top of the bar? there is like another 1/2 pixels of blurryness
[3:14pm] Bojhan: GaborHojtsy: perhaps thats my retina
[3:16pm] GaborHojtsy: Bojhan: yeah, possible
[3:17pm] Bojhan: GaborHojtsy: thats all anyway

ry5n’s picture

ry5n commented

I think this might need some work before it’s ready to see a lot of code polish. I’ll spend some time on this as soon as I can. Some quick answers:

- Some font weights in the sandbox code only make sense when a semi-bold font is available (Source Sans).
- The modal header has a 1px top highlight, something like 1px solid hsla(0, 0%, 0%, 0.4) should do it.

ry5n’s picture

ry5n commented
StatusFileSize
new tabs-5-8.interdiff.txt5.67 KB
new tabs-8.patch5.26 KB

New patch solves the border-radius direction issues on the tabs and a few other things including the drop shadow on the active tab. Demo.

Still needs lots of work:
- no darker variant for use with the Overlay
- the whole thing breaks badly when it exceed the container width
- the markup and CSS is more complex than I’d like.

I want to take another try at this to reduce the amount of UI chrome (simplify the engineering) and also solve how this works for narrow screens. I really don’t think the current approach in core of a scrolling pane is a comfortable or familiar experience.

ry5n’s picture

ry5n commented
Priority: Normal » Major

I think this is major now, with #1953374: Implement Seven style guide for core overlay active in the core queue.

ry5n’s picture

ry5n commented
Assigned: Unassigned » ry5n

Actually even though this needs more work, I’m going to merge #8 into master, since it is the only thing really holding up #1953054: [META] Build Demonstration Pages. I’m going to tackle the updates separately.

ry5n’s picture

ry5n commented

I just posted a modified design of the tabs, with less chrome and fewer implementation headaches: http://drupal.org/node/1953374#comment-7264454

new tabs
new tabs in overlay

ry5n’s picture

ry5n commented

It’s actually way past time to figure out how to handle tabs on narrow screens. I really dislike the current solution for Seven. In Bartik, the tabs are simply stacked, but I’m not sure we can get away with that in Seven, with the nav tabs constantly butting in above the actual admin screen content.

So I put something speculative together: http://drupalcode.org/sandbox/ry5n/1932040.git/blob_plain/refs/heads/res...

I stripped some of the style guide appearance to focus on the functionality. Consider this just schematic.

ry5n’s picture

ry5n commented
Status: Needs work » Needs review
yoroy’s picture

yoroy commented

I like the look!

Only niggle I have is that in the light version, the grey for the line/border around the active tab.

I would probably play around with a bit of letter-spacing too. Especially the lowercase words seem a bit cramped in these screenshots. But that's not necessarily for this particular issue.

ry5n’s picture

ry5n commented

I have been sick the last few weeks so my pace of work has been really slow. Still, I finished a new design for handling the tabs on all screen sizes. Up-to-date code is available in the responsive_tabs branch. Again, I’ve simplified the styling here to focus on the interaction, so don’t focus on any styling details. Demo:

http://drupalcode.org/sandbox/ry5n/1932040.git/blob_plain/7f259b9e419b2d...

Screenshot:
Auto-responsive tabs

oresh’s picture

oresh commented

ry5n,
This Is Just Awesome!
I want that in Drupal 8 in any cost! Especially i love the 2nd and 3rd variant. I don't know how it behaves when for example 3rd of 5 tab is selected. if it's the same - it's fantastic!

ry5n’s picture

ry5n commented

@oresh Thanks for the feedback! The active tab is always shown at the top when the tabs are collapsible, which means it’s shown out of order when the tabs are opened. I don’t think that’s a big deal though. Implementation-wise it’s just CSS and absolute positioning (move the 'is-active' class to a different tab to see the effect).

I’m going to return soon to the demo pages; in the meantime I’d like to get more feedback on this design from Bojhan/Roy on UX and _nod (or other JS contribs) on implementation.

lewisnyman’s picture

lewisnyman
he/him
commented

Nice! A few things:

  1. The no JS default navigation is a thoughtful approach
  2. When not collapsed these tabs could take up the entire vertical viewport, this is painful design pattern.
  3. When collapsed mobile users completely lose all visibility of the IA. Pre interaction the tabs effectively become a page header. I was hoping we could try and avoid this where we can.
ry5n’s picture

ry5n commented

@LewisNyman Responding to your points:

2. Yes, the stacked tabs take up a fair amount of space. But on very small screens I don’t know how to avoid it. We simply can’t fit an arbitrary number of text labels in a row (and I can’t imagine a grid really working). But yeah, it sucks, so…

3. We hide the list behind a toggle. It’s a trade-off, but this pattern seems to have become the de facto standard for web site navigation on small screens. It’s the same pattern here, except the active item is shown alongside the toggle.

The only similar solution I can think of is what Safari (desktop) does: tabs squash a little, but when they start to get too small, the 'overflow' tabs disappear into a popup menu attached to the last tab. However, that would be really difficult to implement well, and would need even more JS. Plus, it might not be that much of an improvement on small screens. So I don’t know: the current sandbox solution isn’t perfect, but I think it’s acceptable, and I think it’s the best option I’ve seen so far.

oresh’s picture

oresh commented

@ry5n,
I think you shouldn't worry that much about space. There are usually not more that 4-5 main tabs and 4-6 second level tabs.
Also You expend them only when you need to navigate to somewhere else, so still it takes almost no space when you are already on the tab you need.

We shouldn't try to invent a wheel right now, it can cause a lot of discussion about Usability and can fail in realworld tests.
I think we should go with #3 solution, cause it keeps active tab always visible and readable. It also looks modern :)

Just one small bug - the dotts go to the left when changing the screen resolution to a smaller one :)
As ry5n said : 'de facto standard for web site ' - let's make Drupal a standard and not again something unfamiliar for users.

Bojhan’s picture

Bojhan commented

Just wondering, should we do something like https://blog.mozilla.org/ux/2013/05/polish-all-the-things1/ ? Where the number of dots indicates the number of tabs orso?

ry5n’s picture

ry5n commented

@bojhan That’s not a bad idea, although in that case maybe an icon with a numeral like Mozilla has might be a bit more scalable. Do you think this is working overall though?

@oresh I’ll do some cross-browser testing over the next week. In the meantime, can you say more about the bug? From #20, I don’t quite understand what’s breaking.

oresh’s picture

oresh commented

@ry5n,
when you scale your browser to ~270px, you'll see that the dots (.js-nav-tabs__trigger) will move from center to the right. That's the bug :)

ry5n’s picture

ry5n commented

@oresh Ah, ok, got it. Thanks.