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

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

The mobile layout is here.  To implement this, I am going to start at the biggest display element and move my way in.

My Cascading Style Sheet (CSS) classes are:

  • tgimbaBody – background color setting – Structurally, this is the background and based on the my choices, it is set to #F4E4C1 (a light tan (ish) color).  The surprise for me was where I had to set this class.  To make it work, I had to add it to the body tag in ‘Layout.cshtml’.  In an Model View Controller (MVC) view, ‘Layout.cshtml’ is the base of all views.  I was expecting to add this class to each component level back ground div. But as you can see in the previous post, adding it here only covered part of the page.  So, I then added it to the <div> in ‘HtmlVanillaJsIndex.cshtml’ which I expected to cover the whole page…but it didn’t.

Capture

  • tgimbaBody – global settings – Besides the background color discussed above, these are settings I want to take affect everywhere.  High lights include the font/font size/font color for input, button and other tags.

1

  • tgimbaComponent/tgimbaForm – tgimbaComponent is a generic class meant to handle anything other than the main panel.  tgimbaForm contains classes for forms I have placed on each component.  I didn’t intend this, but it seems like all my components have the same form-like functionality, so I named it this way 🙂  The login (below), registration, add and edit components all have these same classes in a similar structure.

1

  • tgimbaBody/tgimbaComponent/tgimbaForm x all render like this.

1

The remaining classes is for everything on the main display page.

  • tgimbaMain – header/title – The first row of the header is a two column div. The left column is the menu button for some application functions and the right column is the search.  The search consists of a text box/search button.  Just below this is the title.  This next row is hidden unless a search is done.  If done, the search results replace the normal bucket list.   This is different from the previous TGIMBA version where the results were on their own page.

1

  • tgimbaMain – search results toggle – Something I had not done before with Vanilla JavaScript was dynamically load/toggle CSS.  This is done in Display.js

1

  • menu – Since this is a mobile site, the menu (at least most menus I have seen on mobile sites) are hamburger menus (named for the 3 lines looking like a hamburger…ish).  There are ways to do this with CSS, but the samples looked a little on the complicated site.  So, I chose to create a hamburger menu image and use it.

1

  • tgimbaMain – bucket list – The normal bucket list display.  Another new thing for me was how to set properties on specific td elements from CSS.  I found a good technique in reference #6 and it involves using the ‘td:nth-child(index)’ operator.

.tgimbaMain div table td:nth-child(1) {
width: 5%;
}

1

One interesting non-CSS thing I want to mention.  I was able to find a very slightly different background for the buttons (very faint).  I did this using the awesome tool described in reference #5.

The main logged mobile page looks like this:

1

Searching:

1

Next will be the desktop layout.

Stay tuned!

References

  1. https://stackoverflow.com/questions/50043977/css-layout-with-difference-on-mobile-vs-desktop
  2. https://css-tricks.com/multiple-class-id-selectors/
  3. https://stackoverflow.com/questions/20566660/3-column-layout-html-css
  4. https://stackoverflow.com/questions/21657379/css-button-font-size-doesnt-work
  5. https://www.sessions.edu/color-calculator/
  6. https://stackoverflow.com/questions/16243149/how-to-externally-style-with-css-the-specific-3-td-tags-on-the-html-table-genera

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