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