Templates revision - part 3

[Gwenwyfar]

Let's get this out before it grows into a little monster. There aren't many things left that will involve editing the templates from here onwards.

[equinoxmatt]

Been looking at this for a short while tonight. I am not the best person to comment, but I took a look at your commits individually and checked your branch out. It seems fine, I can't see any issues.

I won't 'approve' it, because this isn't my area of expertise, but LTGM 👍

[wintstar]

@Gwenwyfar, the text in the reports is somewhat small. Is there a way to make this a little bigger?
index.php?action=admin;area=reports

admin.css line 31

.table_caption, tr.table_caption td {
    color: #000;
    font-size: 10px;
    font-weight: bold;
}

[Gwenwyfar]

This PR is already long enough, but I'll add font size revision to one of my next ones. There are some oddly sized fonts elsewhere as well.

[Sesquipedalian]

Mostly just some changes regarding hyphenation and word wrapping.

[Sesquipedalian]

Apparently, IE and Edge < 18 don't support the standard overflow-wrap, so we need to keep word-wrap: break-word; for them.
https://caniuse.com/#search=overflow-wrap

[Sesquipedalian]

This change doesn't make a lot of sense to me. If we define a generic monospace before the generic sans-serif, then the latter will never be used. So I think we only need one, right? Personally, I'd stick with sans-serif rather than monospace for this.

[Sesquipedalian]

Because support for hyphens is dependent not only on browser, but also on language, we should keep word-wrap: break-word; overflow-wrap: break-word; as a fallback.

[Sesquipedalian]

As noted above, because support for hyphens is dependent not only on browser, but also on language, we should keep word-wrap: break-word; overflow-wrap: break-word; as a fallback.

[Sesquipedalian]

word-break: break-all; is not very nice to readers. It'd be better to use hyphens: auto; (with the vendor prefixes, of course).

[Gwenwyfar]

Hyphens will not break some links and other overly long words. And unfortunately text-ellipsis needs white-space: nowrap which we don't want here either. And outside those cases there is enough space in this area that hyphens is not necessary.

[Sesquipedalian]

If I can't convince you to use hyphens: auto, please at the very least use word-wrap: break-word instead of word-break: break-all. Using word-wrap: break-word will only break the word if absolutely necessary, whereas word-break: break-all will break any and all words whenever they reach the edge of the container.

[Gwenwyfar]

You're right, I missed this.

[Sesquipedalian]

Apparently GitHub doesn't allow comments on just any random line, so I couldn't add one for #basicinfo h4 on line 2186 of index.css. That selector needs to have the following added to its ruleset in order to fix #4719:

word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

[Sesquipedalian]

I just noticed some other spots where overflow-wrap is being used without word-wrap being set as as compatibility fallback for IE. That should be fixed everywhere.

[Gwenwyfar]

Just to update on this, I'm hoping to make the fixes soon, as I'm finally getting some free time back :)

[XinYenFon]

I think at this stage its better to just remove the conflict and merge this big one in and do rest of the fixes later.

[Gwenwyfar]

Nevermind, got the quirks to replicate once more. We may need to watch out those places to see if they aren't breaking in strange ways, still. Those rules are still unreliable.

[Gwenwyfar]

Can you handle the conflicts, Sesq? I could do it but it's going to also merge the PR (if there's another way through GitKraken I haven't it figured out yet)