openlab-at-city-tech / webworkqa

WeBWorK integration for WordPress and BuddyPress
GNU General Public License v2.0
4 stars 2 forks source link

Question title styling modifications #149

Closed boonebgorges closed 5 years ago

boonebgorges commented 5 years ago

On the Question List page, question titles should be underlined, to indicate that they're links. Remove underline on hover for a11y.

Title should be black and NOT underlined on single problem page, according to https://www.dropbox.com/s/enr47xuwh1rsico/Screenshot%202019-03-21%2015.32.04.png?dl=0. @jennaspevack @bree-z Note that the question title on single problem pages is a link, primarily so that you can easily get a permalink to the specific question (right-click, "copy link location"). Should I be removing the link, in addition to removing the link styling?

jennaspevack commented 5 years ago

My thought was that underlined text indicates a link to "somewhere" and could be confusing to users. Rather, could we add the permalink below the header, next to the Edit button? @boonebgorges is it easy to add a copy permalink function? See mockup. Alternatively, we could replace the COPY text with PERMALINK. @drdrew42 does having the permalink accessible in this way seem like it would be useful to students/faculty? image

boonebgorges commented 5 years ago

The idea that the title should be a permalink comes from me - it's a convention around the web for this kind of item that either the title itself, or the timestamp ("Posted March 14, 2019") is a permalink to the current item. If the team doesn't think it's useful, we can take it out; and if it's not useful in its current iteration, then it seems unlikely to be worth adding another bit of UI (the "Permalink" or "Copy link" button) just for this purpose. My point in asking the question here was just that removing the link styling, without also removing the link, creates some UI inconsistency. Happy to do whatever the team thinks is best.

jennaspevack commented 5 years ago

Ah, I see. I guess if the timestamp is also a convention, I'd put it there instead to avoid confusion. Or just remove it altogether, if moving it to the timestamp is out of scope.

boonebgorges commented 5 years ago

Thanks, Jenna! I've made the following changes:

a. Timestamps "Posted ..." are now links, both on the List and Single views. I've allowed the theme's link styling to bleed through, so that this text is now blue instead of gray (but no underlines) b. On the List view, titles are now underlines to indicate that they're links c. On the Single view, titles are no longer links

Screenshots: Screenshot_2019-04-29_13-49-45 Screenshot_2019-04-29_13-49-26

@jennaspevack Please let me know if I've captured the spirit, or if you'd like changes.

jennaspevack commented 5 years ago

Boone, quick question.

Could we get a hover for the title? Perhaps black, no underline to keep with the rest of the links and also to differentiate the visited link?

Sorry, I didn't realize the hover was missing on the live site...

boonebgorges commented 5 years ago

I've added a declaration that removes the underline on hover. The :visited styling isn't working consistently for me across browsers, but I'm afraid that this may be a browser security limitation that I can't fix. Let me know what you think.

bree-z commented 5 years ago

This looks good to me! I do also see inconsistencies across browsers with the visited link color. But, everything else is working as expected.

@jennaspevack I'm not sure if you want to take a look. Otherwise we can close this one. Thanks!

jennaspevack commented 5 years ago

Thanks @boonebgorges! The hover/visited looks good to me, but noticing that the anonymous link and regular hover styles are strangely overlaid. It's not clear that the anonymous link is different from a regular link because the underline and dotted line are layered. Current anonymous link: Current visited anonymous link:

Is it terribly complicated to remove the regular underlined link and just have the dotted line for anonymous question titles? And make the dotted underline black for visited (though maybe this whole visited business isn't worth the effort due to browser inconsistencies.). Removing the dotted underline on hover would be good to keep it consistent -- and a visual clue that it's a clickable link.

Anonymous link: https://www.dropbox.com/s/wyyr4syi7m6nsvh/anonomous-link.png?dl=0 Anonymous visited link: https://www.dropbox.com/s/2mlfmy2ljakdn0e/anonomous-link-visited.png?dl=0

boonebgorges commented 5 years ago

I think I've captured your feedback, @jennaspevack - see openlabdev.org or the gif below, where I look at both a visited and an unvisited anonymous question link.

Peek 2019-06-19 20-35

jennaspevack commented 5 years ago

Looks good for logged in view!

Oy, however logged out view doesn't have the underline link styling for anonymous. For the logged out view can we get an underline to keep the link style consistent with the other links?

See here: https://www.dropbox.com/s/1uiefgsq2cu7syv/loggedoutview-anonomouslink.mov?dl=0

boonebgorges commented 5 years ago

Thanks, Jenna. I think I've made the proper change, but the logic is getting pretty tangled, so another test from you would be helpful.

jennaspevack commented 5 years ago

Phew. Perfect. Thanks!