Clean up the Admin pages

[gjp]

What did you have in mind? I figured I might look at this as well as add the "published" flag to Puzzles.

[jordanbyron]

There are a few things I wanted to add / change:

• Markdown preview on fields which are processed with markdown (Puzzle#short_description, Puzzle#description, Announcement#body)
• Puzzle#short_description field should be a text_area
• UsersController#index should allow sorting by fields
• Easy way to access the UsersController#index page. Currently you have to manually type the route
• Overall form cleanup. I pulled in Blueprint form which is helping, but you might be able to make improvements on top of what is already there.

Thanks!

[gjp]

Would you mind giving further feedback before I dig in? Sorry, lots of questions.

• Markdown preview - like github, with tabs? Github does a round trip on each update. Maybe use https://github.com/jeffmcfadden/markdown_preview, though it looks like I'd have to fork that to use redcarpet. Am I missing an obvious gem?
• admin index access - how about a little admin-only link header for all the index pages in the upper left?
• sorting - as in http://railscasts.com/episodes/240-search-sort-paginate-with-ajax? Again, if there's reusable code all the cool kids are using...

Also, would it be appropriate for me to import some of the real data for testing markdown and index sorting, or should I work up a local data generator?

[jordanbyron]

Would you mind giving further feedback before I dig in? Sorry, lots of questions.

No worries at all. Keep 'em coming.

Markdown preview

Like the one we have in university-web for comments on the submissions page. Currently the one in university web uses showdown.js which will probably work fine for puzzlenode. See if you can rip the markdown preview code out of university-web and repurpose it for puzzlenode.

admin index access

The header is starting to get really crowded so I don't have a good answer for this question. Maybe we need a second admin bar that is either above or below the main nav bar? :warning: Obviously visible to only admins :)

sorting

The railscast you linked to looks like a good start.

Also, would it be appropriate for me to import some of the real data for testing markdown and index sorting, or should I work up a local data generator?

Both in university-web and puzzlenode we don't have a good mechanism to generate realistic testing data. I've created a separate ticket for this task that you might want to work on first.

[gjp]

university web uses showdown.js which will probably work fine for puzzlenode.

There's a GFM-patched version of showdown which replicates (some of the?) the Github additions in Redcarpet, but they deprecated that in favor of actually processing the text with Redcarpet. Too picky? Probably, unless someone hits a corner case and gets annoyed because the live version doesn't match the preview :)

I'll try showdown.

The header is starting to get really crowded so I don't have a good answer for this question.

I figured I'd shove it way up top, in the flash area, or have a popout over the banner. Optionally, a small notice to make it explicit that you're logged in with admin or draft access.

How do you test admin/non-admin BTW? There are tests, but in order to see how it looks, I've been flipping the admin flag on and off in my user record.

I'll check out the test data ticket as well.

[jordanbyron]

I'll try showdown.

Just use the one we have in university-web to start. At some point we can replace showdown with a round trip call to Redcarpet

I figured I'd shove it way up top, in the flash area, or have a popout over the banner.

That could work, I'm just not sure how much it will stand out. I think keeping it closer to the existing navigation elements makes more sense. Of course I am open to discuss it further.

Optionally, a small notice to make it explicit that you're logged in with admin or draft access.

I don't know if we need that. As a user I know what access rights I have, and don't need to be told each time. Why were you thinking of adding that?

How do you test admin/non-admin BTW?

Exactly as you said. I have the console open and just toggle the admin flag

User.find_by_id(<my_id>).update_attribute(:admin, <toggle>)

[gjp]

admin links: I'll play around with this and show you a mockup or two before submitting code.

admin notice: yeah, scratch that. I thought it might be helpful to have an unobtrusive indicator to confirm access rights during testing, but the appearance of admin-only links would make this redundant anyway.

Related question, though outside the scope of admin screens: Would it make sense to indicate unpublished status on the standard puzzle index? Users with standard access won't see those puzzles at all, of course, but I thought it might be useful for admin and draft users to confirm at a glance which puzzles are currently hidden from the rest of the world.

[gjp]

admin link popout mockup: http://imgur.com/q6Lzs

Should stand out just fine in that large white area. Shouldn't interfere with flash content unless it's really long. Room for another 2-3 future menu items with this font (75% of main nav font size). What do you think?

[gjp]

Would you prefer every patch on a topic branch, or should small things go to master? Such as some of the issues Andrea opened last week.

[jordanbyron]

@gjp sorry I've been busy and neglecting this. Doing work on feature branches is the preferred method. If you are doing something very small then working on master isn't terrible. It only gets tricky when that tiny fix on master needs work.

As for the admin mockup, I still think adding a secondary navbar right below the main one makes the most sense. Having that box at the top just seems strange and out of place for a navigation box.

Would it make sense to indicate unpublished status on the standard puzzle index?

Yes it would. Feel free to create a ticket for this so we don't forget to do that.

[gjp]

No worries, it's not neglect if you're busy.

navbar: This may come down to personal preference - the upper left is prime screen real estate, and I actually like be reminded of which options are "privileged", but I admit my design experience is pretty haphazard :) Would you use the standard blue background with the MonkirtaPursuitNCRegular font for a second nav? Looks like the user box will be isolated above a dead space if I use the orange bg. I'll do another mockup.

[jordanbyron]

The second nag doesn't need to look that impressive. I was thinking simple dark blue background with plain white text. Maybe a thin white border at the bottom to seperate it from the main content. Play around with it and see what looks good.

[gjp]

simple horizontal nav - http://imgur.com/s2j82 Not a fan of this one myself, as it duplicates the words "puzzles" and "announcements" without context and creates even more dead space.

I just had this strange vision of calling to the sky for a costumed superhero (cape and tights) who swoops down and fixes pesky design issues.

[jordanbyron]

Not a fan of this one myself

Neither am I, but I think it can be salvaged. The padding isn't even between the main nav and the bottom border of the secondary nav. Because of that it looks like the admin links are jammed up to the primary nav bar.

Also we probably need something like "Admin:" on the far left of that bar to indicate those are administrative links.

I just had this strange vision of calling to the sky for a costumed superhero (cape and tights) who swoops down and fixes pesky design issues.

Me too, but it's these challenges that make us better developers / designers. We'll come up with something functional. Thanks for continuing to work on this. I know it can be challenging when it's not something you do everyday.

[jordanbyron]

How does this look?

[gjp]

I'll add the orange Administration. Did I incorrectly assume from the start that you'd want access to the puzzle and announcement admin screens without manually typing those routes?

I think what's been bugging me is that this part of the page clocks in at 20% logo, 20% content + nav, and 60% space (not counting the side margins). I have a strong urge to tighten it up. Do I need to update my internal usability guidelines?

Regardless, I should probably get moving on some of the other issues.

[gjp]

I'd like to add the Nickname field to the user index. It's currently searched but not visible in the search results, so search appears to give results that weren't requested.

[jordanbyron]

Did I incorrectly assume from the start that you'd want access to the puzzle and announcement admin screens without manually typing those routes?

No, I just didn't feel like mocking them up.

I think what's been bugging me is that this part of the page clocks in at 20% logo, 20% content + nav, and 60% space (not counting the side margins). I have a strong urge to tighten it up. Do I need to update my internal usability guidelines?

I'm not sure I follow. Are you talking about vertical or horizontal space? The entire page has a fixed with so it fits on 1024x768 displays. Also, this ticket is starting to go all over the place, and I think that is my fault. I created this ticket more as a reminder to myself that the admin panel was thrown together and there are several things that need to be fixed.

To remedy that, let's focus on the core issues I listed above and any thing else just create a separate ticket (IE Adding nickname to index, overhauling the layout spacing, etc). Sound fair? I'm much rather we have several bite sized tickets then these massive ones. They are way easier to handle.

[gjp]

You're right about the bite-sized tickets. Thanks for taking the time to work through this discussion with me. I've got a counter proposal: let's break this ticket up.

Issue #42 definitely overlaps this and #41 may. #41 and/or sorting by columns in the user view will need a bit more work because the submission counts are currently tallied in the view; we can't sort and paginate based on counts that haven't been calculated yet. Would you mind terribly if we move those issues out of this ticket, and just wrap up the admin links and minor cleanup on this one so we can close it?

Again, thanks for your patience. You're bearing the brunt of my workflow newbness.

[jordanbyron]

Would you mind terribly if we move those issues out of this ticket, and just wrap up the admin links and minor cleanup on this one so we can close it?

Absolutely not. I am all for breaking up this ticket. I think the break points you outlined look good. Go ahead and split this ticket up and once that is done I will close this one.

Again, thanks for your patience. You're bearing the brunt of my workflow newbness.

No thank you for helping me out! Next conference we got to I owe you a :beer:

[gjp]

Split off issues #49 and #50. I'll look into #41 and #42 with Andrea. Other design stuff is kind of open so I'll leave that alone for now. Okay to close?

[jordanbyron]

Looks good. Closing this issue. Thanks for your continued work.