Gainsight/Custom_Templates/customer_templates/BirchStreet Academy/_activity_overview.html.liquid

<div class="activity-overview">
    <div class="activity-overview-headline">
        Activity Overview
    </div>

    <div class="overview-body">
        <div class="overview-blurb col-xs-12 col-md-5">
            <img
                alt="{{ current_person.name }}"
                class="np-header-avatar-image overview-blurb-image np-hidden-mobile"
                src="{{ current_person.avatar_url }}"
            >
            <div class="np-dashboard-header">
                <div class="np-resource-title">Hi {{current_person.first_name}},</div>
                <div class="np-resource-subtitle">This is what's relevant to you right now in Birchstreet Academy</div>
            </div>
        </div>

        <div class="overview-data col-xs-12 col-md-5">
            {% assign countComplete = 0 %}
            {% assign countInProgress = 0 %}
            {% assign countNotStarted = 0 %}
            {% assign countTotal = 0 | times: 1.0 %}

            {% for course in courses.enrolled %}
                {% assign countTotal = countTotal | plus: 1 %}

                {% if course.progress == 100 %}
                    {% assign countComplete = countComplete | plus: 1 %}
                {% endif %}

                {% if course.progress > 0 and course.progress < 100 %}
                    {% assign countInProgress = countInProgress | plus: 1 %}
                {% endif %}

                {% if course.progress == 0 %}
                    {% assign countNotStarted = countNotStarted | plus: 1 %}
                {% endif %}
            {% endfor %}

            {% assign calculated_IP = countInProgress | plus : countComplete %}

            {%  include "progress_circle", 
                countIP: calculated_IP,
                countCM: countComplete,
                total: countTotal,
                size: "330",
                r: "150",
                cx: "165",
                cy: "165",
                stroke_color_NS: "#7EBBF8", 
                stroke_color_IP: "#FFC000",
                stroke_color_CM: "#78A240",
                stroke_width: 25
            %}

            <div class="overview-stats">
                <span class="overview-stats-header">Courses</span>
                <span class="overview-stats-complete">
                    <div class="overview-stats-complete-marker"></div>
                    {{countComplete}} Completed
                </span>
                <span class="overview-stats-in-progress">
                    <div class="overview-stats-in-progress-marker"></div>
                    {{countInProgress}} In Progress
                </span>
                <span class="overview-stats-not-started">
                    <div class="overview-stats-not-started-marker"></div>
                    {{countNotStarted}} Not Started 
                </span>
            </div>
        </div>
    </div>
</div>

<style>
    .activity-overview{
        margin-bottom: 50px;
    }
    
    .activity-overview-headline{
        font-size: 3rem;
        font-weight: 900;
        margin-bottom: 30px;
        text-align: center;
    }

    .overview-body{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .overview-blurb{
        display: flex;
        flex-direction: column;
    }

    .overview-blurb-image{
        height: 75px;
        width: 75px;
    }

    .overview-data{
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .overview-stats{
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        min-width: 140px;
        position: absolute;
    }

    .overview-stats-header{
        color: #1b3e4f;
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 30px;
    }

    .overview-stats-complete, 
    .overview-stats-in-progress,
    .overview-stats-not-started{
        align-items: center;
        color: #1b3e4f;
        display: flex;
        flex-direction: row;
        font-size: 1.1rem;
        font-weight: 500;
        justify-content: flex-start;
        margin-bottom: 5px;
        width: 100%;
    }

    .overview-stats-complete-marker,
    .overview-stats-in-progress-marker,
    .overview-stats-not-started-marker{
        border-radius: 50%;
        display: flex;
        margin-right: 10px;
        min-height: 10px;
        min-width: 10px;
        opacity: 0.75;
        padding: 0;
    }

    .overview-stats-complete-marker{
        background: #9ACAA1;
    } 
    .overview-stats-in-progress-marker{
        background: #FFC45D
    }
    .overview-stats-not-started-marker{
        background: #7EBBF8;
    }
  .bqUfwS{
  display:none !important;
  }
    @media screen and (min-width: 768px){
        .overview-body{
            flex-direction: row;
            align-items: center;
        }

        .overview-blurb{
            height: 250px;
            justify-content: space-evenly;
        }

        .overview-stats{
            position: initial;
        }
    }
</style>