Page MenuHomePhabricator

Code block header styling
Closed, ResolvedPublic

Assigned To
Authored By
joshuaspence
Mar 3 2015, 7:48 PM
Referenced Files
F387682: pasted_file
Apr 28 2015, 5:29 PM
F328566: Screenshot_2015-03-04-07-02-53.png
Mar 3 2015, 8:04 PM
Tokens
"Orange Medal" token, awarded by epriestley.

Description

I'm not a fan of the new styling for remarkup code blocks, specifically for the name attribute. When I first saw this I thought that I had forgotten how to remarkup.

test.php
<?php
deep();

Event Timeline

joshuaspence raised the priority of this task from to Needs Triage.
joshuaspence updated the task description. (Show Details)
joshuaspence added a project: Remarkup.
joshuaspence added subscribers: joshuaspence, chad.

Do you have specific feedback? The old design was not consistent with other Remarkup blocks, so it was converted to a standard UI header. I went through a few dozen live examples before settling on this direction.

Im not sure if its consistent, but I liked the boxing that previously joined the header to the code block. It made it obvious that the two were related.

At the moment, my original example looks too similar to:

test.php

<?php
derp();

The problem with the old design is it has a number of display issues, bad font mixing, and the different colors were problematic. One way to keep the header connected would likely involve removing the color choices.

Interestingly the format seems inconsistent with email now too.

Screenshot_2015-03-04-07-02-53.png (1×1 px, 176 KB)

In T7444#99690, @chad wrote:

The problem with the old design is it has a number of display issues, bad font mixing, and the different colors were problematic. One way to keep the header connected would likely involve removing the color choices.

I didn't realize there were choices?

I had similar feedback on the original diff I think -- I think this one looks a lot better, but we did lose the sense that the title is visually tied to the code block and is a label for the block content.

Giving it a yellow background is the obvious fix, and maybe it wouldn't be awful now with the other font/size/weight fixes? Or if it was very pale?

Or maybe just putting a bottom border on it? Not sure if that'd be gross/weird:

Title
-------
-----------------------
| code code code       |
-----------------------

Just something to tie it visually to the block in a stronger way, so it's clear that it's a block name and not just a small section header.

the color choices

The only choices are red (COUNTEREXAMPLE) and yellow right now, right?

Yeah, the main thing I looked at with the header was where the actual use was occurring. In real examples, most were in documentation or more long-form comments/descriptions. In those cases a simpler header worked very well. If you're using these more frequently in code-review or other short form comments, the display does not hold up as well.