sunlightlabs/datajam

Re-style /admin area using Twitter bootstrap

Closed this issue · 18 comments

drinks commented

I've committed the bootstrap 2 assets to the project, and broken out the header nav into 3 groups that can be menu bar dropdowns.

drinks commented

When this ticket gets tackled, attention should be paid to the admin forms and their error messages. Currently the level of error notification is insufficient.

drinks commented

Some specs:

  • Use the fluid layout w/ sidebar: https://skitch.com/dndrnkrd/88a9i/skitched-20120306-170307. Appropriate icons should appear to the left of the links if available.
  • Buttons should use the btn class appropriately. Primary actions should use .btn-primary, deletion should use .btn-danger, etc.
  • Disabled deletion buttons are currently not being shown for templates that cannot be deleted. This should be changed to show a .disabled button and perform no action on click
  • Tables: let's start with zebra-striped, no borders as in example 2 in the bootstrap docs, and see how that looks.
  • Forms: should use the Horizontal form layout in the docs. If possible, the Cloud 9 editor should be made to work with fluid dimensions
  • Plugins:
    • readmes from plugins should be rendered inside a closeable well, expanded by default. Expand link below action links should read "Show instructions ⬇"
    • action links (install, uninstall, etc) should be rendered as mini buttons.
drinks commented

Have a look at this for iconography: http://fortawesome.github.com/Font-Awesome/

elcuervo commented

Switching to bootstrap seems to have broken the ACE editor. We looked into it but could not figure out what's the problem yet. Will continue to look into it.

foca commented

Ok, the only thing missing from this is better error messages and plugins, but I can't seem to make the chat work. I'll look into it tomorrow.

drinks commented

Just fixed the order of bootstrap.css / bootstrap-responsive.css; looks like the top nav needs another look, a la http://twitter.github.com/bootstrap/components.html#navbar

drinks commented

Also, the devise login form should follow the 'basic form' pattern here: http://twitter.github.com/bootstrap/base-css.html#forms

drinks commented

Can you guys take a look at the email notification workflow? Looks like it remains untouched w/ respect to new styles...

elcuervo commented

Can you give me some feedback now? Does it look ok?

drinks commented

Well, I'm thrilled that the submission form will now be styled by default, but I was actually referring to the "Notifications" section of event detail page -- the template should be changed to use table_for and the correct button :)

elcuervo commented

Oops, sorry about that, i'll fix that in a moment

drinks commented

Ok, 3(.5) little things left:

  • It looks like all flash messages are getting the base alert class. They should be using error, success and info.
  • This comment has not yet been incorporated.
  • The table update for the notification list looks good, but should use btn-small delete buttons instead of the 'x' link
    • While I'm thinking about it, the rest of the in-table buttons should be .btn-small as well.
foca commented

Just using the delete_button helper (which I used for all the buttons I found) will make it a .btn-small, BTW.

drinks commented

Just to be clear, this is the navbar issue: https://skitch.com/dndrnkrd/8k4gx/skitched-20120316-164853

Dan Drinkard

On Friday, March 16, 2012 at 4:41 PM, Nicolás Sanguinetti wrote:

Just using the delete_button helper (which I used for all the buttons I found) will make it a .btn-small, BTW.

Reply to this email directly or view it on GitHub:
#14 (comment)

elcuervo commented

Ok, i have a question about the first task:

drinks commented

Ok, taking a closer look, it may just be devise that is getting alert.alert-alert for all messages. I'm seeing the proper success flash for a template save action now.

elcuervo commented

Thanks for the feedback, i've fixed that.