ENHANCEMENT Tab style consolidation and design consistency #934

merged 1 commit into from Nov 6, 2012


None yet

4 participants

chillu commented Nov 6, 2012

Relies on silverstripe/silverstripe-cms#231

The tabs in the CMS had quite a bit of "wild growth". What started out as basically two styles (primary and secondary) evolved into a couple of variations which were very similar, but had heaps of copypaste, leading to CSS maintenance issues.

Here's the use cases:

  • "Primary" tabs with darker unselected tabs, directly adjacent to top (can't be nested)
  • "Secondary" tabs with a more common styling, and rounded corners (can be nested)
  • Tabs with text or icons (both primary and secondary)
  • Tabs alongside breadcrumbs (in "Edit Page" view)
  • Tabs alongside dialog title (in "Insert Media" view)
  • Tabs in dialog, but without title (in "My Profile" view) - removed from master

What I've changed:

  • Icons are declarative via generic CSS classes, rather than tied to unrelated classes like .AssetAdmin
  • Same goes for distinction between the two tabset styles. Instead of half a dozen rules scoping to ".CMSPagesController", ".ui-dialog" etc, we just have a ".cms-tabset-primary" class
  • SCSS sprites for icons
  • Dark instead of white text, lighter background for primary unselected tabs, for better contrast and more consistent text display (we rarely use white text anywhere else)
  • Darker background for secondary unselected tabs
  • Corrected text color for selected secondary tabs (was black rather than the main dark-grey we use for text)
  • Right aligned primary and secondary tabs to each other, and the form fields (if window >700px, since form fields have a max-width of 512px)
  • Reduced top padding between primary and secondary tabs
  • Reduced left/right padding of main tabs content area
  • Indented nested secondary tabs
  • Fixed IE7 tab overlap into content

Tested in IE7/IE8/Firefox/Chrome

Comparisons (before/after pairs):






@chillu chillu referenced this pull request in silverstripe/silverstripe-cms Nov 6, 2012

ENHANCEMENT Tab style consolidation and design consistency #231

@halkyon halkyon merged commit 96a4080 into silverstripe:master Nov 6, 2012
chillu commented Nov 6, 2012

Paul said: "Great work, I'm glad you got rid of the white text, and the non-active tab colour works much better too. The only thing that I noticed straight away is the different width's of the second and third tab sets border on the bottom but I'm sure your already aware of that. +1 from me"

@clarkepaul do you mean https://www.evernote.com/shard/s5/sh/2ae92d26-4399-4be7-aa45-7c57fbcc72b3/74f96cd5f6fe7ec357e80acf7aa32b85 ? That was on purpose, I guess wanted to distinguish between a single tabset simply wrapping into multiple lines (although unlikely), and a parent-child relationship. It does look a bit weird. But then again, third level tabs in itself are an edge case :)


If there is possibility that the tabs would wrap then I would prefer slider tabs or the last tab turns into a "more" dropdown to select hidden tabs, I know that this would probably be overkill though as it would be a feature that would almost never be used.

Going with what you have in your designs, even if the 2nd and 3rd level tabs would wrap I think the border on the bottom should still needs to remain the same length (without rounded corners) as the content area purely for simplicity. I find it not necessary to design something weirdly for the majority just so it makes sense for the minority.

sminnee commented Nov 7, 2012

I'd go with Paul's suggestions, and leave whatever the existing behaviour of excessive tabs is as a known issue. The more dropdown and/or slider would be a nice touch, but seems low priority.

As for 3rd level tabs being an edge-case: you're correct, although I'd hope that 3rd level tabs are more common than wrapping tabs ;-)

chillu commented Nov 7, 2012

Alright, fixed in 91b69bf :)

@sminnee sminnee pushed a commit to sminnee/silverstripe-admin that referenced this pull request May 13, 2016
@chillu chillu Fixed tab alignment and padding 12cce43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment