Calendar Patient Details

Playing around with a patient details - version 2.

by secretgspot

HTML

<ul>
    <li data-date="9/6/2011: 0800-0830" data-name="John Smith" data-provider="Matthew Sanders, M.D." data-type="Established" data-reason="Asthmatic with flu like symptoms">J. Smith - M.S.</li>
    <li data-date="9/6/2011: 0830-0900" data-name="Daniel Mathers" data-provider="Paul Stewart, M.D." data-type="Established" data-reason="Broken pelvis">D. Mathers - D.T.</li>
    <li data-date="9/6/2011: 0900-0930" data-name="Lucas Smith" data-provider="Matthew Sanders, M.D." data-type="Established" data-reason="Blurry vision and poor balance">L. Smith - M.S.</li>
</ul><!--
--><ul>
    <li data-date="10/6/2011: 0800-0830" data-name="Robert Raines" data-provider="Paul Stewart, M.D." data-type="Established" data-reason="Low blood oxygen level">R. Raines - M.S.</li>
    <li data-date="10/6/2011: 0830-0900" data-name="Kevin Klim" data-provider="Matthew Sanders, M.D." data-type="Established" data-reason="Severe coughing">K. Klim - D.T.</li>
    <li data-date="10/6/2011: 0900-0930" data-name="George Harry" data-provider="Paul Stewart, M.D." data-type="Established" data-reason="Intense drowsiness">G. Harry - M.S.</li>
</ul>

CSS

html,
body {
    background: #eee;
    height: 100%;
    text-align: right;
}
div.lightbox {
    background: hsla(0,0%,0%,.5);
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 500;
}
ul {
    background-color: #F6F6F6;
    border: 1px solid #BBB;
    box-shadow: inset 1px 1px 0 #fff;
    color: gray;
    display: inline-block;
    font: 14px/1.5 sans-serif;
    margin: 75px 75px 0 0;
    padding: 5px 0;
    text-align: left;
    width: 150px;
}
ul:first-child {
    margin: 75px -1px 0;
}
ul li {
    cursor: default;
    padding-left: 5px;
    position: relative;
}
ul li:hover {
    background: #ddd;
}
ul li.active {
    background: #ddd;
}
ul li:before {
    content: '✔ ';
    color: #ddd;
}
ul li:hover:before,
ul li.active:before {
    color: #f6f6f6;
}
ul li.patientCheckedIn:before {
    color: #57a957;
}
div.patientDetails {
    background: #eee;
    border: 3px solid #333;
    border-radius: 5px;
    box-shadow: 0 1px 5px hsla(0,0%,0%,.25);
    color: #444;
    display: none;
    padding: 10px;
    position: absolute;
    right: 105%;
    text-align: center;
    top: -53px;
    width: 300px;
    z-index: 999;
}
div.patientDetails:before {
    border-bottom: 7px solid transparent;
    border-left: 7px solid #333;
    border-top: 7px solid transparent;
    content: '';
    height: 0;
    position: absolute;
    right: -10px;
    top: 53px;
    width: 0;
}
div.patientDetails:after {
    border-bottom: 5px solid transparent;
    border-left: 5px solid #eee;
    border-top: 5px solid transparent;
    content: '';
    height: 0;
    position: absolute;
    right: -5px;
    top: 55px;
    width: 0;
}
div.patientDetails h5 {
    background: #ddd;
    border-bottom: 1px solid #aaa;
    border-radius: 5px 5px 0 0;
    color: #333;
    font: bold 16px/1.5 sans-serif;
    margin: -10px -10px 10px;
    padding: 11px 0 9px;
    text-shadow: 0 1px 1px #fff;
}
div.patientDetails a.exit {
    color: #666;
   ...

JavaScript

var patient = $('ul li');

patient.closest('body').append('<div class="lightbox"></div>');

patient.click( function(e) {
    e.stopPropagation();
    var date = $(this).data('date'),
        name = $(this).data('name'),
        provider = $(this).data('provider'),
        type = $(this).data('type'),
        reason = $(this).data('reason');
    
    $(this).append('<div class="patientDetails"><h5>' + date + '</h5><a class="exit" href="#">&times;</a><dl><dt>Patient:</dt><dd>' + name + '</dd><dt>Provider:</dt><dd>' + provider + '</dd><dt>Type:</dt><dd>' + type + '</dd><dt>Reason:</dt><dd>' + reason + '</dd></dl><a class="btn" href="#">Edit Appt.</a><a class="btn success checkIn" href="#">Check Pt. In</a></div>');
    $(this).children('div.patientDetails').fadeIn();
    $(this).closest('body').find('div.lightbox').fadeIn();
    $(this).addClass('active');

// Still haven't got this toggle quite right, possibly use if/else statement...
    
    $(this).find('a.checkIn').click( function() {
        $(this).closest('li').toggleClass('patientCheckedIn');
    })
        .toggle( function() {
            $(this).text('Check Pt. Out').addClass('error').removeClass('success');
        }, function() {
            $(this).text('Check Pt. In').addClass('success').removeClass('error');
        });
    
    $(this).find('a.exit').click( function(e) {
        e.stopPropagation();
        $('body').find('div.patientDetails').fadeOut();
        $('body').find('div.lightbox').fadeOut();
        $('body').find('div.patientDetails').closest('li').removeClass('active');
    });

});

$('body').click( function() {
    $(this).find('div.patientDetails').fadeOut();
    $(this).find('div.lightbox').fadeOut();
    $(this).find('div.patientDetails').closest('li').removeClass('active');
});