TGIMBA .NET Core – CSS ‘Beautification’ – Look Ma…I know how to display two different layouts :)

Git  Code Commit (all commits between last post and this commit (link))

In this post, I will take the previously added IsMobile(arg) method and make it ready for use in the Vanilla JS client.

Couple of things before we start:

  • I have also decided to no longer work on the JQuery client.  It really never was a client and only had specific code for interacting with the server.  I will remove this code at some point in the future.
  • I am tweaking the color scheme.  After another review, I believe it looks dated.  So, I am going to lose the surrounding blue outline.  It will (essentially) be the light background with blue text/buttons/etc.

Mobile(ish)

1

Desktop (ish)

2

To be able to load a layout, you have to know what type.  This means getting the user agent to the .NET Core Mode View Controller (MVC) back end for analysis and return the conclusion.  The implementation looks like this:

  • Exposing the Utilities.cs -> IsMobile(string userAgent) method to the client.  I chose to add this directly to the Vanilla JS MVC back end because it exists as a Utility method in the shared project and already has a test.

1

  • Client Hypertext Transfer Protocol (HTTP) GET server call to ‘IsMobile(arg)’

1

  • Client setting a session value for future checks and loading the appropriate Cascading Style Sheets (CSS).

1

In the next post, I will load the appropriate CSS for use.

Stay tuned!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s