Bootstrap3: Final Grade Modal Contents

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">
<input type="hidden" name="grade" id="grade_input" value="">
<div class="panel panel-default">
    <div class="panel-heading">
         <h3 class="panel-title">Grade (Required)</h3>

    </div>
    <div class="panel-body text-center">
        <div class="btn-group">
            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button" id="btnGroupGradeSelectDropdown"> <span class="btnGradeSelectDropdownText">Grade</span>  <span class="caret"></span>

            </button>
            <ul aria-labelledby="btnGroupGradeSelectDropdown" role="menu" class="dropdown-menu">
                <li class="text-left"><a class="linkToChangeGrade" data-value="fail" href="#">You FAIL!</a>

                </li>
                <li class="text-left"><a class="linkToChangeGrade" data-value="pass" href="#">You PASS!</a>

                </li>
            </ul>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
         <h3 class="panel-title">Patient Care</h3>

    </div>
    <div class="panel-body ">
        <div class="row ">
            <div class="col-sm-12">
                <table class="table table-curved ">
                    <thead>
                        <tr class="dark-grey-bg">
                            <th>Evaluator</th>
                            <th>Date</th>
                            <th class="width-100-percent">Comment</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="white-space-nowrap">Dr. Daniel's Sister</td>
                            <td class="white-space-nowrap">June 15, 2014</td>
               ...

CSS

.white-bg {
    background: #fff;
}
.white-space-nowrap {
    white-space: nowrap;
}
.width-100-percent {
    width: 100%;
}
.no-padding-right {
    padding-right: 0px;
}
.padding-sides-20 {
    padding-right: 20px;
    padding-left: 20px;
}
.padding-8 {
    padding-top: 8px;
}
.margin-20 {
    margin:20px;
}
.maergin-15 {
    margin:15px;
}
.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 >...

JavaScript

var resizeTextarea = function () {
    this.style.height = "";

    var
    $this = $(this),
        outerHeight = $this.outerHeight(),
        scrollHeight = this.scrollHeight,
        innerHeight = $this.innerHeight(),
        magic = outerHeight - innerHeight;
    this.style.height = scrollHeight + magic + "px";
};

// keydown is too soon and keyup only happens AFTER the character is inserted,
// so the screen would have updated already.
// So just set overflow: hidden on the textarea.
// not sure about cut/paste events.
$('.resizable-textarea')
    .keydown(resizeTextarea)
    .keyup(resizeTextarea)
    .change(resizeTextarea)
    .focus(resizeTextarea);

$(".linkToChangeGrade").click(function (e) {
    //do something
    $('.btnGradeSelectDropdownText').html($(this).attr('data-value'));
    $('#grade_input').val($(this).attr('data-value'));
    e.preventDefault();
});