Wedge

Public area => The Pub => Features => Topic started by: Nao on February 26th, 2013, 10:28 PM

Title: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 26th, 2013, 10:28 PM
So... I've already spent two days on this. After implementing support for flex in Wedge, I was going to commit this, but stopped at the last minute.
I wanted it to be a surprise, but it just can't. I can't commit until it's fixed. And I can't seem to fix it... So I might as well ask for opinions.

My idea was to reset the message layout to what we had in SMF 1.1, i.e. a 100% table-like layout. In CSS, display:table works quite well, but it doesn't support rowspan and colspan. This 'oversight' was fixed by the W3C in the form of flexbox, where you can precisely force an element to take all of the available height.

All right.

So, I set display:flex on the post wrapper. This works just fine.
Then I set display:flex on the postarea class, with a width set to 100% (otherwise the child divs don't fill the postarea width, whatver!) Again, works normally... Then I'll set flex:1 on the .post class, meaning it gets priority on whatever fills the space.
As a result, the first post in the screenshot shows that the action bar is at the BOTTOM of the post, with extra space in between. This is what I wanted. I was so happy when I got to that point...

Except that right before committing, I noticed a problem with some posts. See second post in screenshot...

So, what is it due to..? Very simple. Just do "code { display: none }" or equivalent, and it starts working again.
To be clear: the post with the code block acts like if postarea was 'wrapped' on line two (flex-direction: column on the post wrapper), then it gets reset to the desired position (on the right of the poster area), but it keeps the same dimensions.
This is 'fixed' by forcing .post width to 70%, but the first post will then show a postarea that's 70% of the expected width... i.e. whatever I do, the body that contains the code block, will always be ~30% wider than the body with regular text.

I've always hated code blocks and their silly devilish implementation (WTF really?! Just look at the bbc PHP for it...), but this is not just that... Any item that would usually get overflow:hidden like a gallery preview, will now overflow:visible out of the post div, and extend their post width just the same, so that postheader overflows as well.

This is with Chrome... Even if it works in Opera 12 and Firefox 21 (haven't tested), there's no point in keeping that tech around if it's going to fuck up like this on a whim. I mean, it's actually worse than using floats at this point...

Who got this wonderful idea, already, that only tabular content should use table tags..?!
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Arantor on February 26th, 2013, 10:43 PM
I have no idea why the code bbc is fundamentally so complicated. I have never really understood the need for the complexity but there must have been a reason for it :/

The use of flexbox is great, and will solve an ongoing complaint, but I got no idea how to fix it, sorry :(
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: MultiformeIngegno on February 26th, 2013, 10:46 PM
Uhm, what's the CSS of the code block?
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 26th, 2013, 11:20 PM
yes I was going to suggest overflow: auto: in the CSS?

Hope I'm not way off base here!

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 08:09 AM
overflow:auto in .post does nothing, in .postarea and .post_wrapper it forces the entire post to be inside the colored background, BUT it simply adds scrollbars to the post to achieve that, so everything is still distorted the same... I guess it's a bit 'better', but it also breaks mini-menus (don't ask me why... they get cut off. And yes they're absolutely-positioned.)
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 03:06 PM
Nao,

Sorry but off the top of my bean, that's what I think of, I have nothing to work with, except SMF you know!, but I will be thinking about it, this morning!

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 03:42 PM
The bbc body code in the CSS( Style) I know you may be using something other than this, But it goes something like this

 and playing with the quote and or code portion of the BBC css code, i find these typical:

Code: [Select]
  border-style: none solid solid;    border-width: medium 1px 1px;    font-size: 0.9em;    line-height: 1.3em;    margin: 0 5px 8px 0;    overflow: auto;    padding: 8px;

However if you are working with the PHP coding to control this, that would bbe another story I guess!
and yes it does add scroll bar if you limit it to 70% or + or - 100 percent>

Overflow hidden did not work for me, on SMF, and you already have it wrapping so that's probably not the issue.

Please keep in mind, that my mind set is within the SMF index.css to control these things!

I will dig deeper in this today though!

regards,
maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 03:48 PM
Yes! Yes!!!! YES!!!!!!! YEEEEEEEEEEEES!!!!!!!!!!!
Fixed!! At last!

Okay, ready guys...?

.postarea
   min-width: 0

That's all it took...

Thanks to this solution posted at http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text?rq=1
-- of course, finding it took me days... The closest I got before, was a tip to use 'width: 0', but it wouldn't work.
So, that's basically a hack... For a bug.

That's for the good news.

Now, the bad news: I've tested in Firefox, and the bug is just the same... Even worse, the horizontal scrollbar for the code block shows up, but it's showing like 99% of the very long line, and the code block is overflowing across the entire sidebar and even after... Now that's completely silly...

I'm not exactly back to square one, but it's not really encouraging... We're talking about a feature that's in Candidate Recommendation status, i.e. it's fully standardized, the algorithm is out, and... It's not working well.

Of course, when it comes to posting demos of the feature, I don't know if you ever looked, but authors usually just put a short place-holder like "Hello, world" in the box... This isn't exactly going to help spot any problems, like here... ::)
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Arantor on February 27th, 2013, 03:55 PM
Yay for this standards thing :)
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 04:08 PM
OK for Firefox, if you set the max-width to 80% it stays inside some, but gives scroll bar ( H) !

But one thing I notice, even though you have the wrap tag, but the code I just posted does not wrap on Fire fox!

But your getting very close, it's hard to pleas all the browser, I know!

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 04:37 PM
Nope, not getting anything with max-width, it just doesn't follow it.

I've also got a funny one with .postheader, where I'd removed the display:table stuff (you can see it here in action by watching the DOM...), in Chrome it works fine, in Firefox the div's height extends to a larger than expected height, making the border-bottom show up like 30 pixels below the actual text... Silly, silly, silly. I tried various tricks, to no avail for now. I can only get it to work with a max-height, but I don't want to set a max-height, obviously, because it can be shown over three lines...

So, I'm thinking that either I'll get rid of flexes altogether (not cool...), or I'll just drop Firefox from the list of browsers that we can mark as fully supporting flexbox. I don't like this either, though...
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 04:45 PM
this is how I see it in FF set at the following:

Code: [Select]
.bbc_code code, .php_code code {    background: none repeat scroll 0 0 rgba(240, 235, 255, 0.5);    border-bottom: 2px solid #999999;    border-top: 2px solid #999999;    display: block;    font: 8pt/1.5em Consolas,"Dejavu Sans Mono",Menlo,"Lucida Console","Courier New",monospace;    max-height: 24em;    overflow: auto;    padding: 3px 1em;    white-space: pre;    word-wrap: normal;}

I no your looking toward flex box, but not sure like say the FF is it for it! :)

regards,
maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 05:32 PM
And... Fixed! (Again.)

So... After I confirmed that the original 'bug' was in all 3 implementations (tested in Chrome 27 (sic), Firefox 21 and Opera 12.14), and that min-width only 'fixed' it in Chrome, I started looking elsewhere...
Turns out that Firefox and Opera not only need the min-width hack, but they also need the contents to be devoid of any inline blocks.
And it just turns out that Wedge's implementation of .bbc_pre is an inline block.
Turning it back into a regular block makes it behave correctly in all three browsers. (Removing min-height breaks it again, so I had to leave it in.)

Now, the only issue is to determine whether it's thinkable to get rid of all inline-blocks that might overflow the post box...?
It may be 'only' due to some inline-block + nowrap combination, mind you. I haven't seen any issues with other inline blocks in the post area. (Buttons, etc.)

Still... Is it 'ready for prime time'..? I don't know. I'll test with my gallery previews, too.
Posted: February 27th, 2013, 05:25 PM

Nope, gallery items don't get cut off when overflowing, but apparently it's also the case in the regular CSS table style, so... I may have been wrong about that one. Same for videos... :-/
I don't know if it's best to cut them off on the side or have them overflow. I mean, it's less elegant, but it's probably more elegant than a scrollbar... I don't know.
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 05:34 PM
Well,

Looks like you have a plan in the works so Will bother any more unless I find something special LOL!

But no rush for me it's best to iron out the miner stuff, they seem to be the heart breakers, until it dawn ones mind, that it was a simple thing, (I hope)  :)

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 06:09 PM
OK lets try another approach:

let play with the "inner" css code:

Code: [Select]
.inner {    border-top: 0 none;}.inner {    margin: 0 1em 0 0;    overflow: auto;                  <! ---- ad this --->
    padding: 0 0.7em;}

then try your bbc variations!

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 07:05 PM
I'm not sure what would be the point of the css you're suggesting..?

No, you're not bothering me, on the contrary I was pleased that someone else was working on this at the same time as I was... It meant it'd be twice faster to fix ;)

Re: images and videos, I can easily hide them via .inner { overflow: hidden }, but I still don't know what to do with them... (See my latest post in the Test board, and resize your window.)
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 07:13 PM
I'll be back in a bit but I need to take my morning bath and it's noon here, I do not have your code so I working in the blend! just what I find with firebug LOL!

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 07:17 PM
I'll be uploading the flex-powered version here (for this site) tomorrow or tonight.
So people will be able to test whether it's broken or not. ;)
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Arantor on February 27th, 2013, 07:22 PM
Sounds like a plan to me, I'm curious to see where this goes.

@Maxx, Firebug may not be that helpful here. The CSS gets minified and so on - and is typically browser dependent, too.
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 07:35 PM
Quote from Arantor on February 27th, 2013, 07:22 PM
Sounds like a plan to me, I'm curious to see where this goes.
Did you have a look at the latest rev...?
Quote
@Maxx, Firebug may not be that helpful here. The CSS gets minified and so on - and is typically browser dependent, too.
Well, with a dev tool, CSS is always prettified, so it doesn't matter... ;)
As for JS, the only dev tool that ever implemented prettification was Dragonfly... And it's not going to be ported to the new Opera+WebKit. Sad...

(Oh, and for those who missed it... Opera for Android is now a complete clone of Chrome Beta for Android, UI included, with just a small 'O' logo in the corner. That doesn't bode well for their future desktop UI... -_-)
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Arantor on February 27th, 2013, 07:37 PM
Not yet, I'm still trying to make sense of my stuff - though I did revert the changes I made locally for the page indicator ;)
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 07:39 PM
Yes Thanks and that's my problem the firebug, anyway if I can help I'll try, and still digging, but like said you guys are coding out of the box of the typical and, this leaves me in the blind side LOL!

So best of luck, and I'm still thinking, I think!

regards,
Maxx

Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 07:44 PM
@Pete> Ah, well, me too actually... (Well, not much, I just had four lines of custom code...)
Makes me think I should re-add it locally.

Anyway.

I'll be posting the update here in a few minutes... The website might break for you at that point, of course. Just refresh a few seconds later and it should be okay.
Posted: February 27th, 2013, 07:40 PM

It's up :)
Hack away!
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 07:57 PM
Quote from Nao on February 27th, 2013, 07:05 PM
I'm not sure what would be the point of the css you're suggesting..?

No, you're not bothering me, on the contrary I was pleased that someone else was working on this at the same time as I was... It meant it'd be twice faster to fix ;)

Re: images and videos, I can easily hide them via .inner { overflow: hidden }, but I still don't know what to do with them... (See my latest post in the Test board, and re size your window.)
Ok on this I was trying to set the "inner" so that the BBC code # would not exceed the boundary of the "inner" settings, first then play with the code portion of the BBC css to fill the th code space without overflow, if this make two pennies!

Or am I thinking on track, I may have lost you somewhere??? old age and all!
need new batteries in my key board eats them up

regards,
maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 08:00 PM
You should play with this forum, there's a test board, you can post content and see if your browser breaks or not ;)
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 08:08 PM
It looks like this on my big monitor let me check on thee 19" wide!

Now this just the suggested inner setting and overflow hidden looks the same!

regards,
maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 27th, 2013, 08:22 PM
Is this as desired..?
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 27th, 2013, 08:30 PM
sorry Did not understand your last!

It's just a quick test on the code>nothing exact about it, only playing with ideas!

edit: where is the test board?

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Arantor on February 28th, 2013, 12:26 AM
http://wedge.org/pub/test/ is the test board.
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 28th, 2013, 12:31 AM
Blind in one eye and can't see out the other!

Thanks!! :)

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: godboko71 on February 28th, 2013, 12:43 AM
iOS Chrome Default theme.
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: godboko71 on February 28th, 2013, 01:16 AM
Meant to say wireless looks fine
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: live627 on February 28th, 2013, 02:04 AM
Display error in Firefox :sob:
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 28th, 2013, 11:53 AM
iOS: okay, iPad only I suppose..? Can't bother to test on my decommissioned iPod. Let's just say, because Android marketshares are getting bigger, and frankly because I like Android way better these days (although I don't *reject* iOS, I simply find its UI to be too outdated and its system to be too closed), I don't see myself going on iOS testing sessions a lot in the future. Which is a shame, because at least, Safari Mobile has an obscure setting to enable the JavaScript console... Something that I have yet to see in an Android browser... :^^;: But no real dev tools for now.

Firefox: my tests are always done on Aurora, which currently is v21, and it works fine there because they enabled flexbox by default in v20.
However, I tested in Pale Moon 15 and indeed, it breaks there. I've looked at the HTML and CSS, and I don't see anything strange. It looks like the same good old CSS/HTML I wrote and that was the default in Wedge until yesterday...
Can you test an earlier SVN version on your Firefox..? I'm guessing rev 1955 would be just fine. If it works, save HTML page + the gzipped CSS file, then go back to HEAD and save HTML + CSS, and see if a diff between the two can generate anything interesting...?

Well, I know, I'm not supposed to teach you how to debug, but I have to say, I'm not in a position to debug thoroughly right now... :^^;:
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 28th, 2013, 01:22 PM
Okay, spotted where the problem is... It's in how I parse Wess. It's not due to the CSS itself.
I'm going to work on fixing the bug right now.
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 28th, 2013, 02:07 PM
Okay, so it's not fixed, but at least I know why...

The reason is the internals of my @if implementation... It's a bit complicated, but it was pretty much mandatory for me because I wanted to be able to use variables in mixins, and it didn't work otherwise. The specifics are that @if calls are parsed twice. The first pass is for browser tests (@if chrome[20-], opera...), while the second (which occurs later in the CSS compilation process), is for variable tests (@if $bg_color == #fff). I didn't take into account the possibility of using a variable to store indirect helpers.

So, what I did is 'simply' add a test in the variable parser, to ensure that it held at least one "$" in the string. If it doesn't, return false. And this magically fixes everything... Then again, it doesn't actually fixes much, because at THAT point, I remembered there's no $ in the string anyway. They're all transformed, i.e. the second @if pass actually tests for "@if #fff == #fff" of "@if #000 != #fff"...
This means that I could fix this all by searching for one of the comparison operators, i.e. "==", "!=", "<" and ">", which (thankfully?), aren't supported in browser tests (it supports "!", "&"/"&&", bracket grouping and "," which is an equivalent for "or").
But it also means that if someone looks at my CSS, finds "@if !($supports_flex)" and decides that it's in their right to use @if !($my_random_variable), they'll start bugging me because it doesn't work, and they won't understand why they should be doing "@if $my_random_variable == 0" or something...

I'm afraid my "system" is a bit too smart for its own good.
Perhaps I should be using another variable declaration scheme to clearly differentiate between browser variables and generic variables.
That, or I should simply give up on storing a browser list in $supports_flex, and instead add a constant (like 'member' and 'guest') to the browser test suite, that tests for flexbox support. i.e., "@if supports_flex"...

Something like a list of browser features that can't be detected through CSS and can be useful to regular themers.
can_flex = chrome[20-], ...
can_table = !ie[-7]
Things like that...

What do you think, guys...? And if you think it's the best compromise, can we settle on a constant structure (can_, supports_, browser_, browser_can...? Lowercase? Uppercase?), and a list of features that we should allow testing against..?
I'm a little lost, myself.
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 28th, 2013, 05:50 PM
Just and FYI... I found surfing flex stuff
:
http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/


Also in this article:

A Word on Firefox The flexbox model was, at least originally, based on a syntax that Mozilla used in its products. That syntax, called XUL(https://developer.mozilla.org/En/XUL), is a mark-up language designed for user interfaces.
The irony here is that Firefox is still catching up, and its rendering of some flexbox properties can be buggy. Below are some issues to watch out for, which future releases of Firefox will fix. Credit here must go to the uber-smart Peter Gasston(http://twitter.com/#%21/stopsatgreen) and Oli Studholme(http://twitter.com/#%21/boblet), giants on whose shoulders I stand.
 
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 28th, 2013, 07:57 PM
Yup, it's a well-known article...
Fact is, even though the old Firefox bug mentioned is similar to mine, it really was only in the old flexbox specification, and they simply dropped the bug (didn't fix it) because they've rewritten the entire thing for the new flexbox specification anyway, the one I'm using in Wedge...
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 28th, 2013, 08:58 PM
LOL I knew I could not possibly get one passed you, But For me this is very interesting site and I will spend time there reading.

I love stuff like this, But unlike you my bean can only take in so much at a time!

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 28th, 2013, 09:12 PM
Well, wait for me, I'm not getting any younger either, I'll soon be in your same age category... :P
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 28th, 2013, 09:42 PM
You have a long way to go>>> So I'll be waiting on the dark side of the moon for Ya! Just as soon as I learn how to Fly!
HEHE,
But for now I'll stay Comfortably Numb. How ever I'm still not aring the inside out... P Floyd... I must be old But I'm happy!
.

Off topic again!

regards,
maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on February 28th, 2013, 10:36 PM
Come in here, dear boy, have a cigar! You're gonna go far, fly high, you're never gonna die, you're gonna make it if you try. They're gonna love you!™
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Maxx on February 28th, 2013, 11:30 PM
My favorite Cigars are "it's a Boy >!


Hint there free, in the USA here we give out cigars, when it's a buy! JIC YD NGI :)

regards,
Maxx
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Nao on June 13th, 2013, 06:12 PM
So, last April I disabled this feature, because I'd discovered that no matter how much I worked on fixing it across browsers, nested flexboxes have an undefined behavior.

Today, for some reason, I decided I wanted to see if I could do without the parent flexbox, and only use the child. So, I experimented on it, and added a dummy div in postarea, and made it absolutely positioned, but then I remembered the table cell itself could be relatively positioned, because of a Firefox bug or something, so I tweaked everything, and managed to get the child div to take the entire height of the cell, *without even resorting to absolute positioning*!

This is probably a Chrome bug or something, but from my tests (and I assure you, it was a totally random shot, not some hack I read from another website), setting the table's height to 100% (which doesn't have any impact) allows me to set it on its cells as well. Odd, eh..? And then I can also set height: 100% on the child div. It works, and allows me to turn the div into a flexbox, but unfortunately, the height: 100% trick didn't work on other browsers, and thus can't be used there, AFAIK.

Then I thought about it some more, and decided I didn't give a damn... I'm on Chrome, I can decide to 'improve' its layout if it supports it; other browsers will just behave as usual. I also removed the dummy div, and tried doing display: flex on the postarea, and it friggin' worked. I can't believe it, eh..?!! Anyway, considering that it's Chrome-only now, I'll spot bugs soon enough, so, I suppose, it's time to restore flexbox into Wedge, and enjoy the moment.

'course, as usual, if someone finds a truly cross-browser way to do it, feel free to point it out...!

This will be in my next commit, I think... Along with other things, hmm... Can't tell, it's top secret.[1]
 1. No, not really... I'm re-doing the Ajax box, but I'm not 100% happy with it; actually, I'm tempted to remove it entirely, and replace it with a page-wide 'progress' cursor during the call... I did a test, and it worked.
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: Arantor on August 8th, 2013, 11:51 PM
I should just add, I'm using Chrome 29 and I got sent a block of XML in a PM. Trouble is, not only was the indentation screwed up, half the line breaks were also missing. It made a real mess out of the file I was sent :(
Title: Re: Flexible box model. It's easy, until it gets hard.
Post by: icari on August 9th, 2013, 12:10 PM
Quote from Arantor on August 8th, 2013, 11:51 PM
I should just add, I'm using Chrome 29 and I got sent a block of XML in a PM. Trouble is, not only was the indentation screwed up, half the line breaks were also missing. It made a real mess out of the file I was sent :(
when i copied/pasted the xml the tabs were removed... for whatever reason the file was opened in opera and i copied/pasted into another tab. the moment i pasted it the tabs were gone. i did not test if i pasted it into a text editor etc to see if the issue was opera or wedge.

i dont know about the line breaks being missing though i did not notice that.

i just copied the xml from opera into notepad++ and the tabs were removed. i guess not a wedge bug after all.