ENHANCEMENT Tab style consolidation and design consistency #934

Merged
merged 1 commit into from Nov 6, 2012

Projects

None yet

4 participants

@chillu
Member
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):

https://www.evernote.com/shard/s5/sh/e570a98d-1ab3-4d14-b3d8-54d97b7e8298/60e20ff1852c4fc83e19e0991608fff7
https://www.evernote.com/shard/s5/sh/a089c5ee-f973-4714-9d18-f76a0d4815a3/1204152c653dabad6ec8a3ff4f06b3c5

https://www.evernote.com/shard/s5/sh/a089c5ee-f973-4714-9d18-f76a0d4815a3/1204152c653dabad6ec8a3ff4f06b3c5
https://www.evernote.com/shard/s5/sh/c4f687eb-0e65-4c75-b142-3a1098961bdd/427d7da6b387b077efc710183921f563

https://www.evernote.com/shard/s5/sh/00be9095-daab-4ac7-8432-a45d3727e1bd/aea4e27cf8d4343814639d769bdee6f4
https://www.evernote.com/shard/s5/sh/2ae92d26-4399-4be7-aa45-7c57fbcc72b3/74f96cd5f6fe7ec357e80acf7aa32b85

https://www.evernote.com/shard/s5/sh/a2068a0d-b84f-434a-bcb8-9cafae14f6d4/393ff3ad195c3eb8adb1b606723d55ad
https://www.evernote.com/shard/s5/sh/54ca3314-25b9-4c98-a218-0e8d6846159a/d875829169c1b7830f5fd9ab9e6c0983

https://www.evernote.com/shard/s5/sh/51df0762-37e9-4711-a1bc-84d3829772c2/88309376e4d21fdf7e4479df685cef97
https://www.evernote.com/shard/s5/sh/8ff4a8d4-f619-494d-8ad2-bb883a3383b4/ba5e2985493eaedcdd471ab84e4b50c3

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

ENHANCEMENT Tab style consolidation and design consistency #231

@halkyon halkyon merged commit 96a4080 into silverstripe:master Nov 6, 2012
@chillu
Member
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 :)

@clarkepaul
Member

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
Member
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
Member
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