Unordered lists

Jtring

Being edited by the original poster

Jtring

I see that unordered lists are mostly working now. Very good. There is, however, one remaining problem. The preview is borked (since that seems to be the word of the day).

First the good news. This code

Here is a three item list:
- Item 1
- Item 2
- Item 3

now gives the right result, shown below.

Here is a three item list:

• Item 1
• Item 2
• Item 3

But in the preview, there is no formatting. The three lines have no bullets and are all the way out to the left. All are double spaced.

This isn't a huge issue but it would be good to clean up the preview sometime.

(By the way, I first posted this after seeing a nicely formatted unordered list by @leftquark over in one bug forum post. Since the preview is borked, I had to post to see how the unordered list code was working when live. Once I saw, I put the little note up in the lead post in place of my test and wrote this response to match the actual situation. Hence the odd form of this thread.)

Jtring

Well, is are still at least one other oddity (in addition to the borked previews). Quoted unordered lists have an extra large font.

The following

Here is a three item list:

• Item 1
• Item 2
• Item 3

Gives this

Here is a three item list:

• Item 1
• Item 2
• Item 3

You can see a weird quoted unordered list in actual use here. There's no problem understanding what's going on, but it's probably not as intended.

Ferguson

I'm confused. I just did an unordered list in another thread and it looked ... strange as below.

Here is another attempt. After this sentence I am hitting return twice.

• I then typed this line and return
• Another line and return
• A third line and two returns

I highlighted only three lines and clicked unordered list. Each got an asterisk at the beginning. Preview looked really weird. Here's another screen shot.

And going to post it and see what I get.

Postscript: The preview didn't look like the result, and the result didn't look like what is shown above by Jim.

Jtring

Bizarre. It does look like the behavior is different if you attempt to put spaces in after list entries

Let's see what this does:

• I'll type a hyphen, some text, then two "enters"

• Another hyphen, text, and two "enters"

• Same again

Now no hyphen and some text. Will this pop out of the unordered list cleanly?

The above used the following entered code:

Let's see what this does:

- I'll type a hyphen, some text, then two "enters"

- Another hyphen, text, and two "enters"

- Same again

Now no hyphen and some text.  Will this pop out of the unordered list cleanly?

Hmm, repeatable bad behavior, different with spaces than without.

Ferguson

It's just broken. The good thing is they have support from Vanilla.

Jtring

Let's note several different things are "just broken", and there are some common problems among unordered and ordered lists.

1. List entries appear in a dim gray when double spaced ... sometimes. If you look close, font-weight, font-color, and line-spacing all differ in the dim and regular versions.

2. Ordered list entries need some editing to be double spaced, but you can do it ... and they always come out dim as far as I can tell. At least they did here.

3. In blockquotes, list entries have a too-large font.

4. In the preview, list entries have no bullet or number markers and are pulled to the far left.

It will be an interesting test of Vanilla to see how they work through these. Pulling out the developer tools, it's pretty easy to see what's going wrong in their CSS. The fixes are simple. I wrote a short CSS patch and inserted it via the Firefox and Chrome Stylish plugins that cleaned up all. Unfortunately, that helps no one except me, and more may be needed to deal with responsive design and other platforms. For the first, a more elegant solution would be for Vanilla to correct some odd Markdown-to-HTML translation rather than patch the CSS around it as I did.

(If it were me, I'd indent lists a little farther for better readability too, like what shows in blockquotes, but that's a style preference, not a bug.)

Ferguson

What's surprising is that this basic, ubiquitous thing did not work out of the box.

Jtring

@Jtring said:
Let's note several different things are "just broken", and there are some common problems among unordered and ordered lists.

1. List entries appear in a dim gray when double spaced ... sometimes. If you look close, font-weight, font-color, and line-spacing all differ in the dim and regular versions.

2. Ordered list entries need some editing to be double spaced, but you can do it ... and they always come out dim as far as I can tell. At least they did here.

3. In blockquotes, list entries have a too-large font.

4. In the preview, list entries have no bullet or number markers and are pulled to the far left.

It will be an interesting test of Vanilla to see how they work through these. Pulling out the developer tools, it's pretty easy to see what's going wrong in their CSS. The fixes are simple. I wrote a short CSS patch and inserted it via the Firefox and Chrome Stylish plugins that cleaned up all. Unfortunately, that helps no one except me, and more may be needed to deal with responsive design and other platforms. For the first, a more elegant solution would be for Vanilla to correct some odd Markdown-to-HTML translation rather than patch the CSS around it as I did.

(If it were me, I'd indent lists a little farther for better readability too, like what shows in blockquotes, but that's a style
preference, not a bug.)

After the latest post on the Dgrin is now Vanilla Forums thread about lists, I though I'd comment here. There's been some fixing of lists inside block quotes, but note how this one got scrambled. The other items -- read the original thread if you can't make out what happened in the blockquotes -- still belong on the TBD list.