How make NT Web Server app look like a Creative Tim Material Angular2?

[RichCPT]

The look of the Creative Tim Material Dashboard Angular 2 (MD)  stuff  (https://demos.creative-tim.com/material-dashboard-angular2/#/dashboard seems pretty nice.  If my client really wants his app to look something like that, how much work would it take to put the MD CSS and Javascript into NT WebServer so I could have:

1) The left sidebar menu.
2) The edit fields (like on "User Profile / Edit Profile") start with watermarks and then have the watermark jump up into a label position as the user makes their data entry.
3) The editing form turn into vertical list when page size becomes too narrow.
4) The various shadow effects.
5) The real application that I have seen that uses MD, has more effects like tabbed interface on detail pages and dynamic sorting of displayed tables.  There are also various color schemes to choose from in MD. 

How would I even go about making NT WebServer app look like the MD example in the above link?

[bshields]

Hi,

My first suggestion is go with the bootstrap version (https://demos.creative-tim.com/material-dashboard/examples/dashboard.html) it plays nicer with NetTalk, AngularJS tries to do stuff that NetTalk does for you already (and frankly much better).

To quickly and somewhat unhelpfully answer your questions:

Your question 1:
1. Create your own global pageheader. Place html into them that includes all the stuff above <div class="content"> (from the dashboard.html) - This is a gross over simplification, but its the starting point.
2. Create your own global pagefooter. Place html into them that includes all the stuff after the closing </div> from this <div class="content"> (from the dashboard.html).
3. Accept the fact that you'll have to do the menus yourself. Its the stuff in <div class="sidebar">.
4. Accept the fact that you'll have to do the top menu stuff yourself. Its the stuff in <nav class="navbar"...
5. You'll need to deal with conflicts, if any, between "creative tim" version of jquery etc with NetTalk. Usually a little bit of stuff, the general rule is change "creative-tim" not nettalk (NetTalk is far more powerful and complex - tim is just pretties).

Your question 2:
This could be fabulously complex... but I really like the style, so i might have a go with my own system and see how I go. The css is completely understandable, so will probably work.

Your question 3:
Possible now with NetTalk DIV layout mode, but I haven't tried for over a year, but its just bootstrap "col" layout.

Your question 4:
Just CSS, should work but you'll need to use the correct css classes within NT.

Your question 5:
Most of these will work, but they each depend upon your usage.


This all presupposes your a well skilled in NT,CSS,HTML,JS,JQuery and Bootstrap.

But it is possible see http://www.nettalkcentral.com/forum/index.php?topic=8126.0 and http://www.nettalkcentral.com/forum/index.php?topic=8127.0.

Regards
Bill Shields

[RichCPT]

Bill,
Thanks for the tips.

Nice screenshots of your app. 

Did you happen to make a demo app for sharing?