Issue #124 (Remi would you take a look)

[Sean Gilligan]

Hi Remi,

It looks like it's Issue #124 that you have a fix for in your CSS:
http://code.google.com/p/iui/issues/detail?id=124

A few questions:

1) Why do you add the selector 'body > .panel' when the *:not(.toolbar)
should hit a panel? Was it because of this issue:
http://code.google.com/p/iui/issues/detail?id=138 ??

2) Why are the min heights 415px and 255px?

3) What are the below fixes for:

body[orient="landscape"] > .toolbar > h1
{
width: 300px;
margin: 1px 0 0 -150px;
}
body > *.panel > fieldset > div.row > label
{
width: 100px;
}

OK, I've committed a fix in preparation for iui-0.40-dev2
http://code.google.com/p/iui/source/detail?r=7b1dafcbf6b590ede534751d4ce58b8176da867a

I've also created a "Long List" test based on the reduction in the
iPhoneWebDev thread - it's on appspot:
http://iui-js.appspot.com/test/css-tests.html

Am I missing anything?


Thanks,

Sean

[Remi Grumeau]

> Hi Remi,
>
> It looks like it's Issue #124 that you have a fix for in your CSS:
> http://code.google.com/p/iui/issues/detail?id=124

Yes it is. i thought i answered this bug entry btw...

>
> A few questions:
>
> 1) Why do you add the selector 'body > .panel' when the *:not(.toolbar)
> should hit a panel? Was it because of this issue:
> http://code.google.com/p/iui/issues/detail?id=138 ??

Not really, this is the first change i made and since there is no documentation the best way to do is testing :)
Perhaps a forgotten piece. I'll see if we can remove it when making all firefox related modifications.

> 2) Why are the min heights 415px and 255px?

Simply like hell :) on startup, the scroll+100 javascript can't scroll where it doesn't exists. If you homepage content is not long enough, the min-height is there to do it. The toolbar div is now perfectly align to the top of the screen.
And 225px is of course for the landscape mode.
Those 415px and 225px is to works perfectly in app mode (when added to the home screen) but are too height while using in safari (bottom navigation bar).

>
> 3) What are the below fixes for:
>
> body[orient="landscape"] > .toolbar > h1
> {
> width: 300px;
> margin: 1px 0 0 -150px;
> }

I've seen that this is not supported. Only one statement with an orientation on it doesn't work.
Again, testing here and there but the goal was to use a larger title block when landscaped. Thinking about it twice, this should belongs to /t/default/.

> body > *.panel > fieldset > div.row > label
> {
> width: 100px;
> }

You can delete this. i have noticed that [orient="landscape"] is not working since you don't double the statement (which is pretty strange)

> OK, I've committed a fix in preparation for iui-0.40-dev2
> http://code.google.com/p/iui/source/detail?r=7b1dafcbf6b590ede534751d4ce58b8176da867a
>
> I've also created a "Long List" test based on the reduction in the
> iPhoneWebDev thread - it's on appspot:
> http://iui-js.appspot.com/test/css-tests.html
>
> Am I missing anything?

Don't seems to miss a thing.
The toolbar goes to the top once loaded, panel background is now ok :)


Remi

[Sean Gilligan]

Remi Grumeau wrote:
>> It looks like it's Issue #124 that you have a fix for in your CSS:
>> http://code.google.com/p/iui/issues/detail?id=124
>>
>
> Yes it is. i thought i answered this bug entry btw...
>

You answered it in the mailing list thread and I posted a comment with a
link to the thread.

>
>> 2) Why are the min heights 415px and 255px?
>>
>
> Simply like hell :) on startup, the scroll+100 javascript can't scroll where it doesn't exists. If you homepage content is not long enough, the min-height is there to do it. The toolbar div is now perfectly align to the top of the screen.
> And 225px is of course for the landscape mode.
> Those 415px and 225px is to works perfectly in app mode (when added to the home screen) but are too height while using in safari (bottom navigation bar).
>

Any ideas for how to make the height match the screen whether it's in
Safari or in webapp mode?

>
>> 3) What are the below fixes for:
>>
>> body[orient="landscape"] > .toolbar > h1
>> {
>> width: 300px;
>> margin: 1px 0 0 -150px;
>> }
>>
>
> I've seen that this is not supported. Only one statement with an orientation on it doesn't work.
>

I'm not sure what you are saying here. Have you read my comment #8 on
Issue #138? http://code.google.com/p/iui/issues/detail?id=138

> Again, testing here and there but the goal was to use a larger title block when landscaped. Thinking about it twice, this should belongs to /t/default/.
>
>
>> body > *.panel > fieldset > div.row > label
>> {
>> width: 100px;
>> }
>>
>
> You can delete this. i have noticed that [orient="landscape"] is not working since you don't double the statement (which is pretty strange)
>

Could you provide more detail an what you are seeing? Again is this
related to my comment #8 on Issue 138?


Thanks,

Sean

[Remi Grumeau]

Remi Grumeau wrote:

It looks like it's Issue #124 that you have a fix for in your CSS:

http://code.google.com/p/iui/issues/detail?id=124

Yes it is. i thought i answered this bug entry btw...

You answered it in the mailing list thread and I posted a comment with a
link to the thread.

2) Why are the min heights 415px and 255px?

Simply like hell :) on startup, the scroll+100 javascript can't scroll where it doesn't exists. If you homepage content is not long enough, the min-height is there to do it. The toolbar div is now perfectly align to the top of the screen.

And 225px is of course for the landscape mode.

Those 415px and 225px is to works perfectly in app mode (when added to the home screen) but are too height while using in safari (bottom navigation bar).

Any ideas for how to make the height match the screen whether it's in
Safari or in webapp mode?

wow … no idea if it's even possible to figure out, since Safari is a software using an HTMLView, which is basically what a webapp do too.

Should be interesting to dig this a big more, using navigator.userAgent for example. A quick test on a simulator here shows that they are different:

in Safari: 

Mozilla/5.0 (iPhone Simulator; U; CPU iPhone OS 3_1_2 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16

as a webapp:

Mozilla/5.0 (iPhone Simulator; U; CPU iPhone OS 3_1_2 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Mobile/7D11

So testing is "Safari/" is present could do the job here, based on the iPhone Simulator … but what about an Android platform ? 

Arf :-/

3) What are the below fixes for:

body[orient="landscape"] > .toolbar > h1

{

  width:             300px;

  margin:         1px 0 0 -150px;

}

I've seen that this is not supported. Only one statement with an orientation on it doesn't work.

I'm not sure what you are saying here.  Have you read my comment #8 on
Issue #138?  http://code.google.com/p/iui/issues/detail?id=138

See this example : http://remi-grumeau.com/labs/iui/ (and clic on "orientation detection")

It's using this CSS code:

body > ul > .landscape_test {

color: #fff;

background: green;

}

body > ul > .landscape_test[orient="landscape"],

body[orient="landscape"] > ul > .landscape_test

{

color: #000;

background: red;

}

and this HTML code:

<ul id="orientation" title="Orientation detection" class="panel">

<h2>Turn your iPhone</h2>

<fieldset class="landscape_test">

<div class="row text">

<p>GREEN - portrait mode</p>

<p>RED - landscape mode</p>

</div>

</fieldset>

</ul>

Just remove one of the two landscape mode css definition and it doesn't work anymore. Really can't tell why neither … but with this, it works … perhaps i'm mistaken something :-S

Again, testing here and there but the goal was to use a larger title block when landscaped. Thinking about it twice, this should belongs to /t/default/.

body > *.panel > fieldset > div.row > label

{

  width:        100px;

}

You can delete this. i have noticed that [orient="landscape"] is not working since you don't double the statement (which is pretty strange)

Could you provide more detail an what you are seeing?  Again is this
related to my comment #8 on Issue 138?

See previous answer :) Same "issue"

Remi

[lictor4]

> Any ideas for how to make the height match the screen whether it's in
> Safari or in webapp mode?
>

checkout this:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

the last line that I've quotes is the important part.



Hiding Safari User Interface Components

As part of optimizing your web application for Safari on iPhone OS,
have it launch in full-screen mode to look like a native application.
When using full-screen mode, Safari is not used to display the web
content—specifically, there is no browser URL text field at the top of
the screen or button bar at the bottom of the screen. Only a status
bar appears at the top of the screen. Read “Changing the Status Bar
Appearance” for how to minimize the status bar.

Set the apple-mobile-web-app-capable meta tag to yes to turn on this
feature. For example, the following HTML displays web content in full-
screen mode.

<meta name="apple-mobile-web-app-capable" content="yes" />

You can determine whether a webpage is displayed in full-screen mode
using the window.navigator.standalone read-only Boolean JavaScript
property.

[Remi Grumeau]

It works !
Thanks

Remi

> --
>
> You received this message because you are subscribed to the Google Groups "iui-developers" group.
> To post to this group, send email to iui-dev...@googlegroups.com.
> To unsubscribe from this group, send email to iui-developer...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/iui-developers?hl=en.
>
>


Remi Grumeau
(+33) 663 687 206
http://www.remi-grumeau.com