Skip to main content ↑ ↓
Topic: Breadcrumb linking (Read 3119 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Breadcrumb linking

I'm not sure if it's been discussed before (and I'm too lazy to search), but I'm wondering if the Elkarte Light theme breadcrumbs could benefit from moving the a-link from the breadcrumb text to the breadcrumb li?

Re: Breadcrumb linking

Reply #1 –

Bumping, because I'd actually like to have this "feature" (tweak).

Re: Breadcrumb linking

Reply #2 –

Yep, would be better, for mobile devices too. But I remember some issues with the new home button in the breadcrumb.

Re: Breadcrumb linking

Reply #3 –

I'm not sure what you mean... :-[
Bugs creator.
Features destroyer.
Template killer.

Re: Breadcrumb linking

Reply #4 –

At the moment you have to click on the text to follow the link. We wish we could click on the whole button instead.

Re: Breadcrumb linking

Reply #7 –

Getting back to this for a moment.

The only way I see to fix this issue is to change those end "arrows / indicators" to images, even apple uses images when they use this style breadcrumb.  Maybe there is a pure CSS solution but I don't see it ATM, and if it exists I bet there is more "bandwidth" used in the CSS then there would be to add a simple image.

Currently we create the indicators via CSS and works well enough.  Actually it took the efforts of several folks to finally get to to a solution that worked in most all cases and have it generally artifact free.  The indicators are as below and then the artifacts are masked by some selective box-shadow application.
Code: [Select]
.linktree:after {
	position: absolute;
	top: 0;
	right: -1em;
	z-index: 1;
	display: inline-block;
	width: 2em;
	height: 2em;
	/* Scale the squares diagonal to = the line-height */
	content: "";
	-webkit-transform: scale(0.7071) rotate(45deg);
	-ms-transform: scale(0.7071) rotate(45deg);
	transform: scale(0.7071) rotate(45deg);
}

So I'll give the image route a try and see where it goes, or perhaps someone has an example that does not take 400 lines of CSS to produce.

Re: Breadcrumb linking

Reply #8 –

Well I'm not digging the images, no surprise.  In playing around a bit I found a way to slightly change the current link behavior which is somewhat better I think

Today the width of the link area is the width of the text in each crumb.  We can change that to be the with of the li, meaning the arrow, but it does have another side effect that I'll try to explain.

Even thought it looks like an arrow shape, the li is still just a rectangle in terms of the link.  So when I move the CSS around a bit you can indeed place the pointer on the tip of an arrow and click to select that crumb as expected BUT the side effect is the "tail" of the next link is also in that link. 

Think of drawing a vertical line at each arrow tip, everything in that rectangle is the link, so the tip of the current and the tail of the next ... thats just the way it is without images and the best I think we could do. 

Re: Breadcrumb linking

Reply #9 –

But even with images, I think it's impossible to have a link with a shape that is not a rectangle, so you'll get the exact same result: linking from tip to tip.
If it is possible, the :after used to create the arrow effect should be moved from the span to the a, that way the arrow would be linked as well... I think.
Bugs creator.
Features destroyer.
Template killer.

Re: Breadcrumb linking

Reply #10 –

It's not even necessary to have the arrow tips linked, just expand the links to the li element instead of the a. Let the link fall wherever for now, until you come up with a more elegant solution. Or just mark it as a theme problem on Light.
 

Re: Breadcrumb linking

Reply #11 –

Quote from: emanuele – If it is possible, the :after used to create the arrow effect should be moved from the span to the a, that way the arrow would be linked as well... I think.
Kind of what I did ... currently most of the style is applied against the li element, I moved almost all of that away from the li and instead use .linktree a and .linktree a:after so the li is 100% filled with the link.  Still need to make sure the span is working when needed and several other issues that linktree has had in the past.

Quote from: Eliana Tamerin – It's not even necessary to have the arrow tips linked, just expand the links to the li element instead of the a. Let the link fall wherever for now, until you come up with a more elegant solution. Or just mark it as a theme problem on Light.
Thats pretty much what I did, but thats what causes the effect ... even if you look at the li element on this site you can see the tip of the previous arrow is in the next link, feeling that was not so cool I "shifted" the overlap so the tip is part of the correct link but pulls the tail in of the previous.   

That overlap can be minimized with larger angles than the 45 tips we have, then you could also space things and avoid the issue, probably, maybe.

ETA: I've kind of given up on this ...
The last problem which I could not work around was as we de elevate the pseudo elements form the li to the a link then they will be hidden by the overflow: hidden of the a  links.  So for cases where you have a long link line and use ellipses to cut the text, then the pseudo indicator is cut as well. 
If you try to elevate them back to the span, you have the same link conditions as we have today.  So I'm currently out of ideas, but others are free to have a run in the thunder dome !

Last Edit: December 27, 2015, 05:03:10 pm by Spuds