Skip to main content ↑ ↓
Topic: Elkarte Light has a funky button (Read 19590 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Elkarte Light has a funky button

Reply #45 –

Quote from: Spuds – I know I know  :'(   

Really the idea was brilliant, big arrows hidden by the overflow of the container (allowed any line artifacts to be hidden) ... never considered mutli line crumbs  ;D . 

You need to grab the latest index.css and the variant.css files as well, that will fix the posted issue BUT they may show those small line artifacts again.   I plan to experiment some more on these, the hidden overflow will be more robust, just need a multi line (container) version

Posting in here to avoid duplicating the conversation.

Couldn't you serve the multi-line fix for mobile, since there pretty much isn't much of a problem with zooming on mobile (most mobile sites don't even allow you to zoom in)? And then serve the artifact fix for desktop?

Re: Elkarte Light has a funky button

Reply #46 –

Unfortunately the line wrap occurs on the desktop which breaks (well changes) the overflow limits (so to speak) ... so I need to find the overflow fix that works on the line wrap for desktop.  Should be doable I think, just have not had time to try.   Did you get a change to see if the sort-a-fix on the test site (the link posted above) works sort-a-kind-a for you?

Re: Elkarte Light has a funky button

Reply #47 –

Quote from: Spuds – Unfortunately the line wrap occurs on the desktop which breaks (well changes) the overflow limits (so to speak) ... so I need to find the overflow fix that works on the line wrap for desktop.  Should be doable I think, just have not had time to try.   Did you get a change to see if the sort-a-fix on the test site (the link posted above) works sort-a-kind-a for you?

The test site seems to be sized oddly. My normal install of Elk shows up as decently-sized on mobile, but the test site looks more like Mobile Curve did. Structure is smaller, but the text is just as tiny as it would look like on desktop view.

This site looks more like my site as well. I'll attach screenshots of the two.

Re: Elkarte Light has a funky button

Reply #48 –

QuoteThe test site seems to be sized oddly
I'm hoping thats something else going on, like some other change not on that site, the linktree should not have changed that (oh please oh please)

So back to this again bwahhhhhh

I completely changed the way the arrows are created, its still all css and no images.  The current css is IMO simpler, has less markup,  less margin tweaks, less pseudo elements, and does not use borders at all (to generate the effect).  OK thats the good part, question is does it work :P

So once again on the old test site http://elkarte.spudsdesign.com/community has been updated with the changes, I did a quick look with a couple of browsers and it seemed to work.  So everyone please give that a shot an see how it performs for you.

One note, I know the last item in the linktree does not have an arrow, but its the end so I left if off as that seemed, to me at least, correct, otherwise whats it pointing to?  Also I've only updated the light theme, not besocial with this change.

Re: Elkarte Light has a funky button

Reply #50 –

QuoteDaww, no arrow.  :'(
Hey I said there was none LOL ... So do you want the arrow back on the final crumb, the one that points to nothing :D ... TBH I'm so used to seeing it as wel and part of having it seems logical, but figured what the heck, leave it off for a test.

Re: Elkarte Light has a funky button

Reply #51 –

Quote from: Spuds –
QuoteDaww, no arrow.  :'(
Hey I said there was none LOL ... So do you want the arrow back on the final crumb, the one that points to nothing :D ... TBH I'm so used to seeing it as wel and part of having it seems logical, but figured what the heck, leave it off for a test.

I like the arrow, it does complete the breadcrumb trail. The flat start looks fine, I think, because it's at the left end of the div. The right end, without the arrow, looks awkward.

Suggestions:
1. Try the arrow.
2. Extend the green background to the end of the div. Maybe the link as well.
3. Gradient fade into the background? Could be cool. Could also look awful and ugly on this theme.

Re: Elkarte Light has a funky button

Reply #52 –

Just for you I added the end arrow back  :D  ... Now it should be like the old layout just done in a way that I hope will be less prone to those edge artifacts.  Once I'm sure of that I look at the other suggestions, but don't want to go to far should it be no better.

Re: Elkarte Light has a funky button

Reply #53 –

Quote from: Spuds – Just for you I added the end arrow back  :D  ... Now it should be like the old layout just done in a way that I hope will be less prone to those edge artifacts.  Once I'm sure of that I look at the other suggestions, but don't want to go to far should it be no better.

The arrow would be the best solution. The others were ideas for less-than-ideal solutions.

Re: Elkarte Light has a funky button

Reply #54 –

Works pretty well here.  Slight artifact at the bottom edge of the last arrow but easy to miss if you don't zoom in.  I think the back of the first entry should not have a rounded border on the left side though.  The curvature doesn't fit the outer box so it looks a bit odd both for single and split lines.  But otherwise this looks better than the previous method.

And I like the arrow at the end as well.

Re: Elkarte Light has a funky button

Reply #55 –

It may be just me, though I seem to see the "other" part of the shadow of the arrow (the one backward).
Using:
Code: [Select]
.linktree:after {
box-shadow: -1px 1px 0 0px rgba(204, 204, 204, 0.9);
}
Instead of the original:
Code: [Select]
.linktree:after {
box-shadow: -1px 1px 0 1px rgba(204, 204, 204, 0.9);
}
seems to remove it.

I'm not sure if this breaks other things though... :-[
Bugs creator.
Features destroyer.
Template killer.

Re: Elkarte Light has a funky button

Reply #56 –

No thats what it should be (what you posted) ... there is a square on a 45 angle and the shadow provides the edge ... the numbers should match .. 2 2 0 2 or 1 1 0 1 etc   ...   I was doing to much playing about so who knows what I committed :P

Re: Elkarte Light has a funky button

Reply #57 –

Wait:
  • 1px 1px 0 1px
  • 1px 1px 0 0

Option 1 or option 2?
Because 2 is the one that seems to work here, but you committed the one that matches your pattern (1 1 0 1).

Darn, I hate these css things!!! LOL
Bugs creator.
Features destroyer.
Template killer.

Re: Elkarte Light has a funky button

Reply #58 –

Let me guess, your nix box :P

Well 1 1 0 1 should have been fine ... 1 1 0 0 would also be fine but that is going to be very very faint (or should be)

Does 2 2 0 1 work for you? 

The first two are the edge offset (like a border width), then the blur (we want it sharp so 0) then the spread (width) which when = < the offset should only be on one side of the "box" lol .... the 2 2 0 1 for sure should cover it.

Re: Elkarte Light has a funky button

Reply #59 –

Checked and apparently it is present in windows as well with Chrome (35).
And is there in Eliana's picture as well:
http://www.elkarte.net/community/index.php?topic=1461.msg10434#msg10434
in the first three.
Bugs creator.
Features destroyer.
Template killer.