Selection list page

Every application has a selection page. On this page, the user can select something. Today we will make our selection page. We are also gonna make this page mobile-friendly.

Let’s make a layout of our selection page. We have the main page when a user clicks on the button, the selection page will pop up on full-screen. Inside the selection page, we have a button to hide the selection page. In the middle, we have a grid with different options and at the bottom, we show the company logo.

Code in HTML and TS of the component is simple. In TS we have EventEmitter to notify when a user clicked on the close button and handler when the user clicked on an item in the list.

In HTML we have a bunch of divs with images.

All magic happens in CSS. First, for the main style, we set an absolute position with a z-index value and make it full-screen. That means the main div will take all the sizes of the window and will be on top of everything on this page. Instead of background color, we can use background images. Images should be resizable, for that we need to use the next CSS styles.

All styles for buttons just make them pretty. The close button we set on the top left corner of the page.

The rest of the styles set a list in the center of the page. To make a table we use the CSS Grid with two columns. Inside the table, we adjust the position of icons and text.

In logo style, we have size settings and image settings.

The last part of this page is to make it mobile-friendly. For that, we need to change a couple styles using media queries. Mostly we make everything smaller. Also for mobile devices, our grid has only one column.

Our selection page is ready.

If you need to take a close look at the project here is the link.

Originally published at http://tomorrowmeannever.wordpress.com on May 1, 2022.