NetTalk Central
NetTalk Web Server => Web Server - Ask For Help => Topic started by: Alberto on May 06, 2018, 05:37:07 AM
-
Any one has a real example of a mobile app using CSS
Its almost imposible for me to reach a reazonable mobile format.
Thanks
-
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
-
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
-
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!!
-
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
-
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?
-
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
-
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 ?
-
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
-
Thanks again Don.
Any chance for you to explain what youve done with the css and js to achive this responsive beauty ? :-)
-
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
-
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
-
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