Any example of a real mobile app using CSS?

[Alberto]

Any one has a real example of a mobile app using CSS
Its almost imposible for me to reach a reazonable mobile format.
Thanks

[bshields]

Hi,

Yes, but not built with the stock NetTalk UI, but it is built with 100% NetTalk.

http://inhabit.com.au/freedom

In the video at the bottom of the screen you'll see (glimpses) of the UI.

Regards
Bill

[DonRidley]

I may suggest you watch this user group webinar:

http://www.capesoft.com/ftp/public/webinars/UG_NT192_20180510_NetTalkUserGroupMeeting192.wmv

30 minutes in.

Don

[Alberto]

Cool Don! I congratulate you, good job.
Now, how do you do it?
Any way of having a Demo of at least the menu and a browse with the css to make it work?
Im lost.
Thanks!!

[DonRidley]

Demo attached.

It's a little rough.  I have since refactored it a little but you will get the idea.

Thank you for the kind words!

Don

[Alberto]

Thanks Don, Ive compile your app, copied the css to styles but I got wht you can see in the attached image.
What am I doning wrong?

[DonRidley]

My apologies.

Move the custom.css and custonmenu.css into web/styles/

Remove the "remove" from the custom.js and move the file to web/scripts/

Run GzipAll.gz

It will work then.

Don

[Alberto]

Thanks Don , the menu is working now, but why is this happening? see image...

And... any explanation of how to add this to a web app ?

[DonRidley]

Don't know.  I reported it to Bruce.

The behavior goes away if the browse is placed on a memory form.

Also, only seems to appear in div layout versus table layout.

Open the same browse via the menu.  Same browse but on memory form.  Displays normal behavior.

Don

[Alberto]

Thanks again Don.
Any chance for you to explain what youve done with the css and js to achive this responsive beauty ? :-)

[DonRidley]

There is very little JavaScript there.  Only two functions to open and close the side panel.

The CSS really works the "magic."

The media query section of the custom.css:

@media screen and (max-width: 600px) {
   #leftspan-btn {display: block; margin: -83px 0px 0px 0px;}
   .nt-menu-div {display: none;}
   .nt-locate-button {display: none;}
   .nt-clear-button {display: none;}
   .header_text {font-size: 20px;}
   .nt-browse-header {margin: 25px 0px 0px 0px;}
}

is what performs most of the heavy lifting.  In fact, I think some of the css classes listed above are not even used in the example app.

Basically, I use the classes in the media query to modify existing css classes based upon the size of the screen.  In this case, a width of 600 pixels or less.  I hide, move, or otherwise modify elements on the displayed page to be more user friendly on smaller screens.

Don

[Alberto]

Thanks again Don, Im lookin at your app and I discover that the side menu is done manually in the page header tag, is there any way of do this automatically from the menu options? this is a problem with many items and with hide and unhide items depending on the user, etc.
And, by the way, this is not only CSS edited. I point this out because its cofused when you read all can be done by only edit the CSS files and thats it... the app is responsive.
Thanks again

[DonRidley]

Hello Michelis,

I apologize for the confusion.  The menu itself is created with CSS.  There are, however, two JavaScript calls.  One to open the side panel and one to close it.  I have since removed those calls and moved all scripts into a separate script file in my app.

Don