The way the linktree is currently coded, long thread titles overflow the linktree. They run under the "arrow" (rotated box) and onto the background. Especially on narrow mobile views. The reason it's not obvious here is the linktree foreground text color and the background color are similar (or equal maybe) but it was very obvious on my dark theme with light text flowing onto the dark background.
I fixed it making the following changes to the linktree css. This would be in index_light.css
.linktree a {
color: #555;
}.linktree a {
color: #555;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
Haven't noticed any glaring side effects, but just made the change on my test forum. I'd noticed the issue for a while but since it didn't show up here I figured it was fixed in 1.0. Then when finally working on installing 1.0 I noticed it was just the colors making it work.
I tried here:
http://www.elkarte.net/community/index.php?topic=2048.0
okay, I guess I can now see it at low resolutions.
It also shows some more problems (message index and the h2 tag) that would benefit from some make-up... :-\
ETA: oh, and the recent posts in the info center.
Tracked: https://github.com/elkarte/Elkarte/issues/1825
Sigh. This doesn't work for the reply page because of the extra <span><strong>... elements which cause the block to be on a newline. And inline-block doesn't know the containing element width correction. So I'll call for someone better at CSS to help fix this.
Not easy to fix I guess...
/me has no idea
Do we really need to bold that anyway? Could do it with last child as well and get rid of the extra reply markup?
You would have to put it into the link itself to not have the problem. Or figure out how to get the link to truncate without display=block. (inline-block didn't work.)
Well poop .... I added that max-width to try and contain those darn long names .... maybe just to back to allowing it to wrap?
so replace
.linktree:last-child {
max-width: 25em;
}with
.linktree:last-child>a {
display: inline;
} ?
I don't see that max-width anywhere in my 1.00 code, but just putting in the second part didn't cause things to wrap for me. It left it overflowing.
I uploaded here the last change suggested by Spuds.
It's still broken like the original. Change the text color to red and you'll see it's overflowing the box still.
Oh I see it on narrow screens with a long subject ... meh, chasing our tails ... i'm just going to cut its length in the sources as I'm not in a corner case mood :P
From a quick look, maybe
.linktree:last-child>a {
display: inline;
} change that to display block then ... still going to cut that in sources since the topic subject is repeated immediately below that
Ah scratch that, thats what messes up the reply page :P ... cut me Mick, cut me !
Have a look if this fixes it: https://github.com/emanuele45/Dialogo/commit/2101c85dd459634a24ff1396c47815a8acbad84a
And I did this: https://github.com/elkarte/Elkarte/pull/1839 O:-)
Yep, that's what brought me to raise this from the dead. Noticed the same issue with my initial fix.
Haven't looked at ema's latest. If you want to change source you could have made the extra before and extra after or whatever be just text inside the link. Then the reply page would work.
May give that a whirl, I think thats what ema's fix does anyway. Of course just being on the link diminishes what you can do with them past just plain text.
Then again those before and after are used a total of 3 times! (2 before's and 1 after) so not super important, kind of seem like leftovers really. One adds a count after the text, the other adds Post Reply ( ... and a trailing )
I guess if ema's fix works and it leaves some flexibility in place thats cool, otherwise I'd say remove them as sillly.
I think that is on the site now and the problem on the reply screen is that it still wraps across 3 rows, A couple of attempts to get it inline result in the overflow text. There may be a magic css bean to fix this but it I can't find it.
I think the options are
1) move the text to the link text (does remove special styling capability)
2) To me if we do the above, then simply remove the extra_before extra_after and simply add the text to the 'name' tag. Those extra_ are only used in two places.
3) Since long link titles are ugly anyway, util:shorten-text on the post screens, the information in the link is redundant anyway
Yeah, mine to work needs (still, at least, unless I missed something... LOL):
display: block;
max-width: 25em;
overflow: hidden;
on the additional span.
Give it a shot on the site, easier to test :D
I replaced:
.linktree:last-child {
max-width: 25em;
}with:
.linktree:last-child>span>a {
display: inline;
}
.linktree:last-child>span {
display: block;
overflow: hidden;
max-width: 25em;
}
Looks good to me :)
I'm not sure I got all the changes exactly as you have them. I added the extra span to index.template.php and put these in index_light.css
.linktree:last-child>span>a {
display: inline;
}
.linktree:last-child>span {
display: block;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
}
Using max-width:100% seems to still shorten it correctly but lets it go long if the screen can hold it. (Well, I didn't try the single word long title) and the ellipsis is just for style.
And the change I had suggested have been removed entirely.
Is that correct?
Seems to be working. Good job. Thanks.
I tried 100%, I personally didn't like that much the title go on the second line if too long, so I reverted to 25em just to have something shorter.
Yep, I think so. Even though I lost a bit track of all the versions. lol
Ok.