TGIMBA .NET Core – CSS ‘Beautification’ – The desktop layout is done!

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

The desktop layout is here!

Before we start, this post will complete the series on the The Globe In My BucketList Application (TGIMBA) .NET Core Cascading Style Sheets (CSS) upgrade.   At least for now, I will only be ‘beautifying’ the Vanilla JS client.  I am anxious to move on to the Application Programmatic Interface (API).

I am using the same mobile CSS class names because there is only one set of markup files.  If not listed below, the desktop CSS is exactly the same as the mobile.  To this point, I realized there is A LOT of duplication between Mobile.css and Desktop.css.  My developer mind said that there should be a base CSS file.  I believe this is possible, but I will not be doing that now.  There are a lot more features/updates I want to complete first.

So, the desktop differences are:

  • tgimbaBody – global settings – I shrank the font-size from 16 to 12.

1

  • tgimbaMain – header/title – I moved the text alignment right and added an underline.

 

1.PNG

  • menu – Different image, same functionality.

1

  • tgimbaMain – bucket list –  I added some extra columns.  To do this and the mobile columns displayed, I am testing for the IsMobile variable in HtmlVanillaJsIndex.cshtml and filtering the columns.

1

The main logged mobile page looks like this:

1

Searching:

1

Next will be some tweaks to the Continuous Integration/Continuous Deployment (CI/CD) pipeline to get the fully functional site deployed.

Stay tuned!

References

  1. https://stackoverflow.com/questions/50043977/css-layout-with-difference-on-mobile-vs-desktop
  2. https://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly
  3. https://hdtuto.com/article/jquery-tofixed2-is-not-a-function-error-solved

 

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