NetTalk Central

Author Topic: Any example of a real mobile app using CSS?  (Read 138 times)

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Any example of a real mobile app using CSS?
« 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
-----------
Regards
Alberto

bshields

  • Sr. Member
  • ****
  • Posts: 272
    • View Profile
    • Inhabit
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #1 on: May 06, 2018, 05:24:11 PM »
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

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 483
    • View Profile
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #2 on: May 13, 2018, 12:32:07 PM »
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
NetTalk 10.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #3 on: May 13, 2018, 02:10:04 PM »
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!!
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 483
    • View Profile
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #4 on: May 14, 2018, 09:46:09 AM »
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
NetTalk 10.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #5 on: May 14, 2018, 10:00:11 AM »
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?
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 483
    • View Profile
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #6 on: May 15, 2018, 03:41:36 AM »
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
NetTalk 10.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #7 on: May 15, 2018, 06:51:08 AM »
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 ?
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 483
    • View Profile
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #8 on: May 15, 2018, 09:39:50 AM »
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
NetTalk 10.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #9 on: May 16, 2018, 01:52:13 AM »
Thanks again Don.
Any chance for you to explain what youve done with the css and js to achive this responsive beauty ? :-)
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 483
    • View Profile
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #10 on: May 16, 2018, 05:08:10 AM »
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
NetTalk 10.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #11 on: May 17, 2018, 07:58:02 AM »
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
« Last Edit: May 17, 2018, 08:02:57 AM by michelis »
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 483
    • View Profile
    • Email
Re: Any example of a real mobile app using CSS?
« Reply #12 on: May 17, 2018, 08:38:56 AM »
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
NetTalk 10.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4