Styling and Theming

Styling and Theming

We are basically done at this point — the application is functional… it’s just not particularly good looking.

Displaying a message when no checklists are available

Instead of just display text when there are no checklists available, let’s utilise Ionic’s card component to display the message.

Action

Update the template of the ChecklistListComponent to include the following:

      } @empty {
        <ion-card>
          <ion-card-header>
            <h2>Welcome!</h2>
          </ion-card-header>
          <ion-card-content>
            <p>Click the add button to create your first quicklist</p>
          </ion-card-content>
        </ion-card>
      }

Action

Update the template of the ChecklistItemListComponent to include the following:

      } @empty {
        <ion-card>
          <ion-card-header>
            <h2>Add an item</h2>
          </ion-card-header>
          <ion-card-content>
            <p>Click the add button to add your first item to this quicklist</p>
          </ion-card-content>
        </ion-card>
      }

Add presenting element for modals

This is mostly just a stylistic change but it does require some code changes. By setting a presenting element, we can get cooler mobile looking popups for our modals (you will see what I mean if you enable the device emulator in Chrome DevTools and set it to simulate a mobile device).

I will leave this one up to you a little bit.

Action

Create a signal in both the HomeComponent and ChecklistComponent

  presentingElement = signal<HTMLElement | null>(null);

Action

Use afterNextRender to set the signal in the constructor of both components

    afterNextRender(() => {
      this.presentingElement.set(document.querySelector('.ion-page'));
    });

Action

Add the following binding to the ion-modal in both components:

[presentingElement]="presentingElement()"

Scroll to bottom when checklists change

This one isn’t really a problem initially, but if you create enough checklists or items to fill the entire page, when you add a new one you won’t see it (because it will be off the bottom of the page). We are going to add some code so that when a new checklist or item is added, we automatically scroll to the bottom of the page.

Action

In both the HomeComponent and the ChecklistComponent grab a reference to the ion-content component using viewChild:

  ionContent = viewChild.required(IonContent);

Action

Create the following effects in the respective components (only the home component effect is shown)

    effect(() => {
      this.checklistService.checklists();
      setTimeout(() => {
        this.ionContent().scrollToBottom(200);
      }, 0);
    });

Note

A slight hack is used here to delay the scroll, as if we do it immediately without the setTimeout it won’t include the recently added item in the scroll

Close sliding items after editing

Now let’s do a similar thing to automatically close our sliding items list after an edit.

Action

Add the following to both ChecklistListComponent and ChecklistItemListComponent:

checklistList = viewChild.required(IonList);

Action

Trigger the close when an edit occurs:

<ion-item-option
  color="light"
  (click)="
    edit.emit(checklist); checklistList().closeSlidingItems()
  "
>

Global Styles

We have two main files that affect the global styling of our application:

• src/theme/variables.scss where most of our CSS variables are defined
• src/global.scss where we place any custom CSS styles we want to apply globally

Let’s start by providing some modified theme variable values.

Action