Bootstrap3: CLTP numbers and evaluator comments

by Steve Coffman

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="panel panel-primary margin-10">
    <div class="panel-heading">CLTP</div>
    <div class="panel-body">
        <p class="text-muted">Your Clinical Learning and Tracking Portfolio (CLTP) patient encounter numbers are:</p>
        <div class="row">
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">
                        <div class="row">
                            <div class="text-center">
                                 <h4 class="padding-8">Core Conditions</h4>

                            </div>
                        </div>
                        <hr class="black-rule" />
                        <div class="row">
                            <div class="text-center">
                                 <h2><strong>0</strong></h2>

                            </div>
                        </div>
                        <div class="row">
                            <div class="text-center">
                                 <h4>out of</h4>

                            </div>
                        </div>
                        <div class="row">
                            <div class="text-center">
                                 <h2><strong>12</strong></h2>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">
                        <div class="row">
                           ...

CSS

.padding-8 {
    padding-top: 8px;
}
.margin-20 {
    margin:20px;
}
.margin-10 {
    margin:10px;
}
.padded-panel {
    padding:20px !important;
}
.black-rule {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.table-curved {
    border-collapse: separate;
    border: solid #ddd 1px;
    border-radius: 6px;
    border-left: 0px;
    border-top: 0px;
}
.table-curved > thead:first-child > tr:first-child > th {
    border-bottom: 0px;
    border-top: solid #ddd 1px;
}
.table-curved td, .table-curved th {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}
.table-curved > :first-child > :first-child > :first-child {
    border-top-left-radius: 6px;
}
.table-curved > :first-child > :first-child > :last-child {
    border-top-right-radius: 6px;
}
.table-curved > :last-child > :last-child > :first-child {
    border-bottom-left-radius: 6px;
}
.table-curved > :last-child > :last-child > :last-child {
    border-bottom-right-radius: 6px;
}
.table > thead > tr > td.dark-grey-bg, .table > tbody > tr > td.dark-grey-bg, .table > tfoot > tr > td.dark-grey-bg, .table > thead > tr > th.dark-grey-bg, .table > tbody > tr > th.dark-grey-bg, .table > tfoot > tr > th.dark-grey-bg, .table > thead > tr.dark-grey-bg > td, .table > tbody > tr.dark-grey-bg > td, .table > tfoot > tr.dark-grey-bg > td, .table > thead > tr.dark-grey-bg > th, .table > tbody > tr.dark-grey-bg > th, .table > tfoot > tr.dark-grey-bg > th {
    background-color: #ccc;
}
.table > thead > tr > td.grey-bg, .table > tbody > tr > td.grey-bg, .table...

JavaScript

function toggleChevron(event) {
    'use strict';
    $(event.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('fa-chevron-right fa-chevron-down');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);