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;
}