Family Planner (pt. 2) Custom Components

In this episode, we're revisiting the Family Planner app to customize and stylize our Family Lists using the Custom Component.

Page CSS - Form Component

/*### PAGE CSS ###*/
.family_list {
    background-color: #fff;
    border-radius: 2rem;
    padding: 2rem;
}

Detail Custom Component

HTML

{{#each records}}

<div class="list_header">
    <div class="list_title">
        <p>{{field_52}}</p>
    </div>
</div>

{{/each}}

CSS

/*### DETAIL CSS ###*/
.list_header {
    text-align: left;
    border-bottom: 1px solid #d8d8d8;
}
.list_title {
    font-size: 28px;
    font-weight: 900;
}

 

List Custom Component

HTML

<div class="list_actions">
    <div>
        <span class="task_count">{{tb_total_records}} Items</span>
    </div>
    <div>
        {{tb_filter tb-id=1 tb-value="All" class="btn btn-primary"}}
        {{tb_filter tb-id=2 tb-value="Active" class="btn btn-primary"}}
        {{tb_filter tb-id=3 tb-value="Completed" class="btn btn-primary"}}
    </div>
</div>

{{#each records}}
<div class="list_item">
    <div class="item_name">
    {{#is field_56 "completed"}}
        <p class="{{field_56}}"><i class="fas fa-check-circle"></i> {{field_54}}</p>
    {{else}}
        <p><i class="fal fa-circle"></i> {{field_54}}</p>
    {{/is}}
    </div>
    
    {{#isnt field_56 "completed"}}
    <div class="action_button">
        {{tb_link this tb-id="1" class="btn btn-success"}}
    </div>
    {{/isnt}}
</div>
{{/each}}

CSS

/*### LIST ITEM CSS ###*/
.list_actions {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
.task_count {
    color: #555;
    font-style: italic;
    font-size: 18px;
    justify-self: flex-start;
}
.list_actions .btn-primary {
    padding: 2px 5px;
}
.list_item {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.completed {
    color: #8f8f8f;
}
.completed i {
    color: rgb(31,190,31);
    margin-right: 5px;  
}
.action_button a {
    height: 30px !important;
    width: 50px !important;
    background-color: rgb(31,190,31) !important;
}
.action_button::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900; 
    color: #fff;
    font-size: 18px;
    content: "\f058 ";
    height: 25px;
    width: 25px;
    position: relative;
    left: 53%;
    top: 2px;
    pointer-events: none;
}

Features Discussed:

1. Theme (Time: 01:22)
   Learn how to switch from one theme to another within your application. Starting with the Atlas custom theme, you'll learn how to apply the Luna theme, and observe the immediate changes in the app's appearance.
2. List Component (Time: 08:35)
   Learn how to set up action buttons like "All," "Active," and "Completed" within a list component. For example, learn how to apply filters to display specific items based on their status using custom CSS and the built-in filter functionalities.
3. Custom Component with CSS Styling (Time: 22:18)
   Learn about the custom design changes with custom CSS implementation.

---

Transcript Summary

Introduction

Hey everybody, and welcome back to Build It with Tadabase. In this week's episode, we're going back to our family planner application, and we're getting creative with the pages and the custom component.

Overview and Goals

The goal today is to take our family planner app and start to stylize it by adding custom code using the custom component. We're going to take the list that we have per family—such as grocery lists or to-do lists—and transform it from how it looked in part one to a more stylized version.

We'll break this into three main pieces:

1. Applying a theme to the family planner app.
2. Using the custom component to stylize and creatively display list items.
3. Applying CSS to configure the page for a unified checklist appearance.

Applying a Theme

We start by applying a new theme. Currently, we're using the Atlas custom theme, but we're going to switch to the Luna theme. After applying the Luna theme, the app's appearance changes accordingly.

Menu Placement

Next, we move the menu to the left-hand side of the app to create a sidebar navigation. This pushes the main app content over to the right, providing a more structured layout.

Stylizing the To-Do List

By default, the to-do list displays one item per row in a basic format. We want to make this list look more like an actual checklist—interactive and easier to use. To achieve this, we'll start from scratch by deleting everything on the page and rebuilding the components.

Setting Up the Page Structure

We begin with a blank page, adding a new row with one column. We'll build three components for this page: a detailed view of the list, a form to add new items, and a custom component to display the list items.

Creating the List Detail View

We add a custom component to create a detailed view of the list. This component loops through records using the each helper, displaying the list title, which is connected to a list type (e.g., grocery, to-do, homework). We create the structure using div elements and paragraphs, but we'll add the CSS styling later.

Adding a Form for New Items

Next, we add a form for adding new list items. This form is kept incredibly basic, with placeholder text guiding the user on what the form is for. We've removed all unnecessary labels and titles to keep the form clean and minimal.

Customizing the List Items Display

The most complex component is the display of list items. Using another custom component, we list out records related to the list. We also add filter tabs (All, Active, Completed) to allow users to view different sets of list items.

Building and Previewing the Components

With the components in place, we preview the application. Initially, the page only shows basic elements, but after configuring the filter tabs and adding the record display logic, the app starts to take shape.

Enhancing User Interaction

We add interactivity by implementing action links that allow users to mark items as completed. When an item is completed, it displays a checkmark, changes color, and crosses off the list item. We also conditionally hide the action button once an item is marked as completed.

Finalizing the Layout and Styling

Now that the HTML structure is built, we move on to CSS. We style various elements such as the list header, list items, and action buttons. The CSS is added to the page, creating a cohesive and responsive layout.

Combining Components

Finally, we combine all three components (detail view, form, and list display) into one column, giving the appearance of a single unified component. This layout is further enhanced with background colors, border radius, and padding to make the app look polished and professional.

Conclusion

That's it for today's episode of Build It with Tadabase. We've taken our family planner app to the next level by stylizing the form and page content using the custom component. Stay tuned for part three, where we'll integrate the family calendar and Google Calendar.