Problem/Motivation

Current text links for "Bookmark this" ; "Not completed" ; "Recommend this" are not intuitive.

Proposed resolution

Change these to checkmark images. Gray = not flagged. Color = flagged. When you hover over the check mark change the background color to make it a little lighter (see Google +1) to give a visual queue to the user that the image is clickable. Also on hover show text that says "complete" or "not completed", "recommended" or "not recommended", "bookmarked" or "not bookmarked"

Remaining tasks

  • DONE Figure out how to theme flag module flags and add basic theming to recommended, completed, bookmarked flags
  • Replace buttons with checkmark images that indicate the current state of the lesson
  • Add title attributes to <a> tags to indicate the current state of the lesson

User interface changes

All remaining tasks are UI changes.

API changes

None

CommentFileSizeAuthor
#2 features.zip27.09 KBtechnikh

Comments

bryanhirsch’s picture

100% in agreement. Thanks for working on this TechNikh!

technikh’s picture

StatusFileSize
new27.09 KB

I am attaching the three features, full directories here

technikh’s picture

Assigned: technikh » Unassigned
Status: Active » Needs review

Changing status to Needs Review.

bryanhirsch’s picture

Thanks Nikh! I'll take a look.

bryanhirsch’s picture

TechNikh, thanks. I think this is useful to make it easier for some other people to tinker with theming with CSS. I'm not sure this actually makes the flags more usable though. For future reference, please upload a patch, it makes code reviewing easier.

I went ahead and committed. I think this will provide a good starting point for sprinters at DrupalCon.

bryanhirsch’s picture

Issue summary: View changes

clarify problem and solution

bryanhirsch’s picture

Priority: Normal » Major

changing status

bhosmer’s picture

Assigned: Unassigned » bhosmer
Status: Needs review » Active

Assigned to bhosmer

bhosmer’s picture

I haven't had a chance to create a patch yet, and the repository contains some binaries as well that I don't think will transfer with a patch.

https://github.com/benhosmer/Learn

I hope in the next few days to also add a pre-process to the .module to circumvent the shifting image when the user rolls over it.

bryanhirsch’s picture

We're making great progress. Building on top of @TechNikh's improvements with these icons is awesome, @bhosmer and @brightbold. It looks like the checkbox icon is getting cut off in some places.

https://skitch.com/bryan.hirsch/8q2bi/drupal-ladder-ld.dev
https://skitch.com/bryan.hirsch/8q2b5/install-git-ld.dev

If you make the height of the icon bigger, it seems to break the ladder. But I believe this can be fixed pretty easily by increasing the height of the ladder rungs in the Ladder module CSS (I went ahead and did this quickly, see ec9804a, but now we should probably adjust a few other things on the ladder, like the positioning and/or size of the lesson title text, to make it look right).

It would also be awesome if we could come up with similar icons for bookmarked and recommended. (brighbold suggested a bookmark icon and a star during our sprint at DrupalCon Denver. These sound like terrific ideas to me.)

bhosmer’s picture

Thanks Bryan. I haven't had a chance to work on the images getting cut off yet, this was my idea for implementing the pre-process function. When the user hovers over the link, the text that is supplied by the flag module changes. This is causing the image to shift.

Let me see what I can come up with.

brightbold’s picture

Just wanted to confirm that I do intend to contribute additional icons and add some hover styles, but I haven't had a chance to do it yet. I'll take on the CSS issues with the ladder too (I thought we'd fixed some of those in Denver, but obviously not!) if Ben doesn't beat me to it.

bryanhirsch’s picture

Awesome. Thanks @BrightBold.

When you get back to it, you may want to take a look at this thread just to see if there's any progress on a larger color scheme or site design to coordinate with: http://drupal.org/node/1504476#comment-5830124.

bryanhirsch’s picture

Status: Active » Fixed

Patches in Ben's GitHub repo committed and released with Lessons 7.x-1.0-alpha8 and Ladder 7.x-1.0-alpha3.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

add DONE item for step nikh completed