5.9: Layout and Styling Member Profiles

Adding the Left Panel

In member-detail.component.html, add the following layout:

We'll improve the way the dates display later on.

In member-detail.component.scss, add the following styles:

.container {
    margin-top: 1rem;
}

.btn {
    flex-grow: 1;
}

.card {
    width: 23rem;
}

.card-image-top {
    width: 100%;
    height: 100%;
}

.card-header {
    font-size: 2rem;
    font-weight: bold;
}

.card-body {
    padding: 0 25px;
}

Adding the Right Panel

For the right panel, we'll use a tabbed panel with the ngx-bootstrap library we added to our project earlier.

First, we need to import it into our app.module.ts file:

//  ...
imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
//  ...

We'll add the next panel inside of the empty <div class="col-sm-8"> from the last section.

To customize the styling of the ngx-bootstrap tabs, we'll have to do it in our main styles.scss file.

.tab-panel {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
}

.nav-tabs > li.open, .member-tabset > .nav-tabs > li:hover {
    border-bottom: 4px solid #d1e2ff;
}

.member-tabset > .nav-tabs > li.open > a, .member-tabset > .nav-tabs > li:hover > a {
    border: 0;
    background: none !important;
    color: #333333;
}

.member-tabset > .nav-tabs > li.open > a > i, .member-tabset > .nav-tabs > li:hover > a > i {
    color: #a6a6a6;
}

.member-tabset > .nav-tabs > li.open .dropdown-menu, .member-tabset > .nav-tabs > li:hover .dropdown-menu {
    margin-top: 0px;
}

.member-tabset > .nav-tabs > li.active {
    border-bottom: 4px solid $cyan;
    position: relative;
}

.member-tabset > .nav-tabs > li.active > a {
    border: 0 !important;
    color: #333333;
}

.member-tabset > .nav-tabs > li.active > a > i {
    color: #404040;
}

.member-tabset > .tab-content {
    margin-top: -3px;
    background-color: #fff;
    border: 0;
    border-top: 1px solid #eee;
    padding: 15px 0;
}