Re^3: Nodelets' layout

[jdporter]

Thank you sincerely for your feedback. It is much appreciated. It's definitely better than being "warnocked". :-)

Whatever happened, "rush job" definitely comes to mind.

Now that, I have to take at least a little bit of exception to. On the gripping hand, you have to remember that we have no dev site. The only way to try any changes of any consequence is to alter the live site. If it turns out that a patch breaks things, or is considered regressive by most monks, then we can roll it back. On the loosing hand, making the grand change I had in mind — which necessarily involved numerous patches and doc edits — could not be done even remotely atomically; it took days. And I carefully examined the effects of each one, trying to calculate how it contributed to the desired trajectory. Understanding that between the moment the first alteration is made and the grand change is finally complete the site is in some sense "broken", I did my best to do it all as quickly as possible, while being careful not to miss any unexpected side-effects.

I find it hard to believe that the intent is to start with a "|"

It's not really so unbelievable, is it? I think you could get used to it in about 2 days. In any case, if you really hate it, you can get rid of the first "|" through css.

[Argel]

I find it hard to believe that the intent is to start with a "|"

It's not really so unbelievable, is it? I think you could get used to it in about 2 days. In any case, if you really hate it, you can get rid of the first "|" through css.

Oh man!! Aesthetically and from a layout and design standpoint it's horrible! Instead of "rush job" clearly I should have been thinking "aesthetically challenged"!! :-/

And no, I won't get used to it in a couple days!! I mean do you really think this looks fine:

 | My info | User | Display | Nodelet
| Timezone | Signature | Newest 
Nodes | RAT Style | Free Nodelet |
Personal Nodelet | Message | 
Pmdev | ignored users

Especially when surrounded by a box? The first "|" doesn't line up vertically with the rest of the text which looks horrible form a layout and design perspective. The links are word wrapped, which is poor UI design and it looks bad from a layout and design perspective. And it doesn't end with a "|" which makes it inconsistent. And it looks like someone just starting out in programming wrote it this way because they couldn't figure out how to avoid adding it to the beginning of the list!!

Granted, I get that you are kludging these changes onto a linked list which does presetnt limitations, but that doesn't change that the results are less than stellar. And I'm still trying to figure out what problem this was trying to solve. I mean, I have a ton of nodelets that scroll down off the page. The only thing the new terse linked lists do for me is make me cringe at the bad design. It reminds me of the rule that you don't let C programmers design X-windows window managers (at least not if you want them to look good).

Sorry, but from an aesthetic and UI design perspective it just doesn't cut it. Guess I will have to learn some CSS because the "best" that will ever happen is I will get used to cringing at it. I will never get used to looking at it. Sorry if that sounds harsh, but aesthetically, it really is that jarring to me.

[jdporter]

It's really no different than it used to be, with the exception that there is a "|" in front of the first item. What you see as "not lining up" is just an artifact of browsers wrapping (breaking) lines on whitespace. The old version of the nodelet had exactly the same whitespace.

clearly I should have been thinking "aesthetically challenged"

I certainly won't argue with you on that point. :-)

Guess I will have to learn some CSS...

Please do, and when you've figured out the css to make this look "better", please let us know.

[Argel]

Hey, how hard would it be to generate a "first" and "last" class in the PM code so we can do things mentioned in CSS Design: Taming Lists? Search for "li.last:after". Then we could format these almost anyway we wanted to.

Update: For the above, in the HTML code you would do something like: <li class="last">list item here</li>

Leading space is due to the margin-left:3pt (and maybe the leading space in " | " -- didn't try since I switched to the CSS listed below).

Here's the CSS I'm using right now, which eliminates the leading "space" and places a comma and a space after each entry. If we had a "last" class as per above then we could eliminate the trailing comma. Would like to see a "first" class as well so that everyone can make their own CSS inline list code. Update: for example, enclose the list in brackets.

/* Override inline-list CSS */
li.inline,        .inline-list li { display: inline; margin-left: 0pt;
+ }
li.inline:before, .inline-list li:before  { content: ""    }
li.inline:after,  .inline-list li:after   { content: ","   }
ul.inline-list { display: inline; margin: 0; padding: 0; list-style: n
+one; }

[Argel]

Why is there a space in front of the first "|"? Is that because there is one in front of all of the pipe characters? What I am seeing and what tye is seeing are very different. For tye the only "issue" is the space in front of the first pipe. If what tye is seeing is what it is supposed to be (minus the leading space) then I am perfectly fine with that look.

Could you give an example of what you see so we can compare? Tye seems to think mine is not displaying as intended and I'd like to verify that.

Also, you may have missed it, but I mentioned that in IE7 there are *no* pipe characters!

If I do figure some CSS code out I will post in some cryptic thread like most of the custom CSS here! ;-)

[tye]

But in your prior complaining you didn't even mention the first "|" not lining up. That is certainly undesirable. As for what you say you see:

 | My info | User | Display | Nodelet
| Timezone | Signature | Newest 
Nodes | RAT Style | Free Nodelet |
Personal Nodelet | Message | 
Pmdev | ignored users

There's no way I could see that in my browser. The closest my browser could come would be:

 | My info | User | Display | Nodelet
| Timezone | Signature | Newest
Nodes | RAT Style | Free Nodelet
| Personal Nodelet | Message
| Pmdev | ignored users


(because the "before" content is " |&nbsp;" not " |").

And the break in the middle of "Newest Nodes" is why I only advocate this style for tersely labeled links. The Settings Nodelet uses moderately terse labels but perhaps they aren't terse enough to qualify for this style of list. The labels could be made more terse, the style changed to "one link per line", or the deviations from extreme terseness could be worked around via s/ /&nbsp;/g. The last option might be the best.

FYI, what I currently see is:

| My info | User | Display
| Nodelet | Timezone
| Signature | Newest Nodes
| RAT Style | Free Nodelet
| Personal Nodelet | Message
| Pmdev | ignored users

(except for the bug of the extra space before the first "|") Which is less than 1/2 the vertical space of the non-terse style so I, FYI, personally prefer it that way.

Now, if you'd like to get off your visual design high horse and trade ranting for giving a useful bug report and maybe offer a little help, then somebody might be able to figure out why you are getting line breaks immediately after "|"s (probably resulting in prettier rendering for more than just you). Have you forced your browser to reload the site CSS recently? (I'm not convinced browsers are sane about how they decide that stuff needs to be reloaded, despite the plethora of overlapping standard features meant to address such things -- after doing some testing of many of them.)

I'd love for somebody to figure out where the extra leading space is coming from (or, second best, how to get that same leading space on each line). I choose to not do CSS except for myself (where I don't have to worry about bugs in other people's browsers) and then only rarely and rather minimally, so it won't be me.

Just FYI, I don't actually use the Settings Nodelet. In my Free Nodelet I have a span of links for settings that looks like:

... | me pad fn u s disp ndlt tz sig | ...

(The rest I access elsewhere or don't use.) I have the Settings Nodelet configured to display, but that's just so I know what it looks like for when helping others trying to use the site or to change the site.

[Argel]

The way things usually work on PerlMonks is if we do not like something we are encouraged to use JavaScript and/or CSS to change it (like we did in Nodelets on the left?). Given the above in combination with how things looked when the code was first pushed out (when almost every nodelet was affected), Nodelets' layout, and Site facelift? why would I ever think this is a bug?!? Next time, post what it is supposed to look like so we can tell if there is a bug vs. different standards in aesthetics.

Anyway...

Is that first space a bug? Or does the symbol/token indicating a linked list contain a leading and trailing space? That is: " | ".

Firefox is already set to load the page every time. How would I force the browser to load the latest site CSS? Or even verify that it did? Would Ctrl+F5 do the trick?

I was going to post the custom CSS and Javascript I am using, but I removed all of it and set the theme back to the default and the problem still exists! Even stranger, in IE7 the pipes are not even visible!

In my display settings, I have the following set:

• Render <spoiler> tags as: div
• Enforce proper nesting of HTML: Checked
• HTML error reporting during Preview: 4
• Code Wrap Length: 80
• Auto Code Wrapping: Checked
• Large Code Font: Checked
• Show a ID tags on notes?: Checked
Not sure what to look at after that.
Note: Using Firefox 3.6.12 with several extensions like Adblock, CS Lite, and NoScript (latter two are set to allow PM).

Update: BTW, what browser are you using?