dashboard.component.scss

[psalm119]

Hello, can you please post the SCSS for the dashboard component that's shown in the video "Adding Responsive Toolbar | Part 3 | Responsive Sidenav"? It can be seen here... @50:30

Actually, I was able to piece the code together somewhat by freeze-framing the video but there's a chuck of code, lines 54-76, that are not able to be shown in the video since it moves too fast :).

Kind regards. Ben Williams

[Angular-istic]

h2 { color: #495057; }

.row { display: flex; flex-direction: row;

.col-left {
    width: 65%;
}

.col {
    margin: 20px 0 0 20px;
    width: 35%;
}

}

.row-md { display: flex; flex-direction: column;

.col-left {
    width: 100%;
}

}

.task-col { .task { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 15px; display: flex; color: #495057; box-shadow: 0 .25rem .5rem #e6edef;

    .edit {
        margin: auto 0 auto auto;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .bar {
        width: 5px;
        height: 45px;
        border-radius: 15px;
        margin-right: 15px;

        &.completed {
            background: rgb(238, 139, 9);
        }

        &.active {
            background: rgb(9, 127, 238);
        }

        &.new {
            background: rgb(130, 189, 243);
        }
    }

    .details {
        display: flex;
        flex-direction: column;
        justify-content: center;

        p {
            color: #74788d;
            font-size: 14px;
            margin-top: 2px;
        }
    }
}

button {
    cursor: pointer;
    border: none;
    outline: 0;
    color: #fff;
    background-color: #556ee6;
    padding: 12px 17px;
    border-radius: 5px;
    width: 100%;

    margin-right: 10px;
}

}

.welcome-card { border-radius: 0.25rem; max-width: 740px;

.welcome-head-container {
    background-color: #556ee640;
    color: #556ee6;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;

    .col-left {
        flex: 0 0 auto;
        width: 58.33333333%;

        p {
            font-size: 14px;
            margin-top: 7px;
            font-weight: normal;
        }
    }

    .col-right {
        flex: 0 0 auto;
        width: 41.66666667%;

        img {
            width: 65%;
            height: auto;
        }
    }
}

.welcome-body-container {
    display: flex;
    flex-wrap: wrap;

    .col-left {
        flex: 0 0 auto;
        width: 33.33333333%;

        .avatar {
            margin-top: -36px;
            margin-bottom: 1.5rem;
            height: 4.5rem;
            width: 4.5rem;

            img {
                border-radius: 50%;
                padding: 0.25rem;
                background-color: #f8f8fb;
                border: 1px solid #f6f6f6;
                max-width: 100%;
                height: auto;
            }
        }

        .name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: .5rem;
        }

        p {
            color: #74788d;
            font-size: 14px;
        }
    }

    .col-right {
        flex: 0 0 auto;
        width: 66.66666667%;

        .performance-container {

            .performance {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                font-size: 14px;
                font-weight: 400;
                color: #74788d;
            }

            .progress {
                display: flex;
                height: 7px;
                overflow: hidden;
                font-size: .75rem;
                background-color: #e9ecef;
                border-radius: 0.25rem;
                .progress-bar {
                    width: 80%;
                    background-color: rgb(50, 248, 60);
                }
            }
        }

        .view-profile {
            margin-top: 1rem;

            button {
                cursor: pointer;
                border: none;
                outline: 0;
                color: #fff;
                background-color: #556ee6;
                padding: 12px 17px;
                border-radius: 5px;

                .fa-arrow-right {
                    margin-left: 10px;
                }
            }
        }
    }
}

}

[psalm119]

Thank you.

[Akhilmanikandan47]

can you please post the code for dashboard html as well?

[gatchang-stephen]

can you please post the code for dashboard html as well?

<h2>Dashboard</h2>

<div [ngClass]="getClass()">

Welcome Back !

Angular Dashboard

John Doe

Web Developer

Performance

80%

View Profile

Completed

6 tasks

Active

1 task

Assigned

12 tasks

Create New Group