On 11 November 2016 at 23:10, David Anderson <da...@ssl.berkeley.edu> wrote:

> Please send me comments/feedback.
>

Ok, pre-formatted text stretching table cells and allowing other text to go
off-screen.

Tables that have pre-formatted text need to be fixed to 100% width:

width: 100%;
table-layout: fixed;

These tables are in Thread view, Post to thread, PM Inbox, Forum search
results, Posts by user and  Profile: user (the inner table). The theme used
in Seti website seems to have tables set to 100% width already but it
doesn't hurt to make sure the width stays that even if the theme is changed.

When table layout is fixed browser doesn't adjust column widths based on
their content any more. Instead the browser divides the available space
evenly across the columns unless the browser is told otherwise.

Thread view and Post to thread needs width: 8em; set for the author column,
PM Inbox needs width: 8em; set for subject and sender columns. The previous
style used width: 136px; but that is not exactly responsive to font size
changes. I chose 8em because it looks good on my screen.

Team search results and Team display are a bit harder. Both could use fixed
layout but I'm not sure what to do next. If I limit column widths in Team
search results the page looks bad on narrow displays; if I don't it looks
bad on wide displays. On Team display page the header that spans the entire
table seems to prevent setting width to columns. Anyway, I guess it's rare
enough to have very long lines in these two pages so they could probably be
left as they are now.

The theme used on Seti has black on light grey for <pre> blocks which makes
large blocks of text to stand out quite a lot on dark theme. I think
monospace font would be enough and would use normal text colour for it.

You changed [code] BBcode element to render to <pre> with white-space:
pre-wrap;. For some reason the previous style had made <code> a block level
element. Normally it's an inline element, that is, it can be used within
text like I have done throughout this message. I would like [code] to be
rendered to <code> with slight adjustment. To keep compatibility with
existing uses of [code], <code> needs white-space: pre-wrap; set. (There's
a small snag with using <code> for multiple lines; the first line is
slightly indented.) The colour used for <code> in Seti theme is... eh,
eye-catching, so same treatment as with <pre>.

Putting those two together:

code {
    color: inherit;
    background-color: inherit;
    white-space: pre-wrap;
}

pre {
    color: inherit;
    background-color: inherit;
    white-space: pre;
}

That leaves borders for theme designers to decide.

-Juha
_______________________________________________
boinc_dev mailing list
boinc_dev@ssl.berkeley.edu
http://lists.ssl.berkeley.edu/mailman/listinfo/boinc_dev
To unsubscribe, visit the above URL and
(near bottom of page) enter your email address.

Reply via email to