"LKF Visit Planning"
Bootstrap 3.3.0 Snippet by juiceboxjoe

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section class="content"> <h1>Visit Planning</h1> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div style="margin-top:12px;margin-left:15px" class="col-md-5"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Service Region <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Veteran's Association</a></li> <li><a href="#">Department of Health</a></li> <li><a href="#">Private</a></li> </ul> </div> </div> <div style="margin-left" class="col-md-6"> <div class=""> <div class="btn-group"> <button type="button" class="btn btn-default btn-filter" data-target="all">All</button> <button type="button" class="btn btn-success btn-filter" data-target="pagado">Low Priority</button> <button type="button" class="btn btn-warning btn-filter" data-target="pendiente">Med Priority</button> <button type="button" class="btn btn-danger btn-filter" data-target="cancelado">High Priority</button> </div> </div> </div> </div> <div class="row"> <div style="margin-left:15px;margin-top:0px" class="col-md-6"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-filter" ><i class="glyphicon glyphicon-list"></i></button> <button type="button" class="btn btn-default btn-filter" ><i class="glyphicon glyphicon-globe"></i></button> </div> </div> <div style="margin-left:15px;margin-top:18px" class="col-md-4"> <div><button type="button" class="btn btn-primary btn-filter">Create Route With Selected</button></div> </div> </div> <div class="table-container"> <table class="table table-filter"> <tbody> <tr data-status="cancelado" data-toggle="modal" data-target="#VAModal"> <td> <div class="ckbox"> <input type="checkbox" id="checkbox2"> <label for="checkbox2"></label> </div> </td> <td> <!--<a href="javascript:;" class="star">--> <!-- <i class="glyphicon glyphicon-star"></i>--> <!--</a>--> </td> <td> <div class="media"> <!--<a href="#" class="pull-left">--> <!-- <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">--> <!--</a>--> <div class="media-body"> <h4 class="title"> John Smith <span class="pull-right cancelado">(High Priority)</span> <span class="pull-right" style="margin-right:32%;color:black">San Juan Region</span> </h4> <p style="margin-bottom:0px;" class="summary">Male </p> <p class="summary">Bayamón </p> </div> </div> </td> </tr> <tr data-status="pendiente"> <td> <div class="ckbox"> <input type="checkbox" id="checkbox3"> <label for="checkbox3"></label> </div> </td> <td> <!--<a href="javascript:;" class="star">--> <!-- <i class="glyphicon glyphicon-star"></i>--> <!--</a>--> </td> <td> <div class="media"> <!--<a href="#" class="pull-left">--> <!-- <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">--> <!--</a>--> <div class="media-body"> <h4 class="title"> Jane Doe <span class="pull-right pendiente">(Med Priority)</span> <span class="pull-right" style="margin-right:31.75%;color:black">Caguas Region</span> </h4> <p style="margin-bottom:0px;" class="summary">Female </p> <p class="summary">Coamo </p> </div> </div> </td> </tr> <tr data-status="pagado"> <td> <div class="ckbox"> <input type="checkbox" id="checkbox1"> <label for="checkbox1"></label> </div> </td> <td> <!--<a href="javascript:;" class="star">--> <!-- <i class="glyphicon glyphicon-star"></i>--> <!--</a>--> </td> <td> <div class="media"> <div class="media-body"> <h4 class="title"> Peter Thompson <span class="pull-right pagado">(Low Priority)</span> <span class="pull-right" style="margin-right:35%;color:black">Ponce Region</span> </h4> <p style="margin-bottom:0px;" class="summary">Male </p> <p class="summary">Lajas </p> </div> </div> </td> </tr> <tr data-status="pagado" class="selected"> <td> <div class="ckbox"> <input type="checkbox" id="checkbox4" checked> <label for="checkbox4"></label> </div> </td> <td> <!--<a href="javascript:;" class="star star-checked">--> <!-- <i class="glyphicon glyphicon-star"></i>--> <!--</a>--> </td> <td> <div class="media"> <!--<a href="#" class="pull-left">--> <!-- <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">--> <!--</a>--> <div class="media-body"> <h4 class="title"> Janet Peterson <span class="pull-right pagado">(Low Priority)</span> <span class="pull-right" style="margin-right:35%;color:black">Ponce Region</span> </h4> <p style="margin-bottom:0px;" class="summary">Female </p> <p class="summary">Juana Diaz </p> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <div class="content-footer"> <p> Page © - 2016 <br> Powered By <a href="https://www.facebook.com/tavo.qiqe.lucero" target="_blank">TavoQiqe</a> </p> </div> </div> </section> </div> </div> <!-- Modal --> <div id="VAModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <div class="row"> <div class='col-md-4'> <h3 class="modal-title">Route Confirmation</h3> </div> <!--<div class='col-md-4'> <p style="text-align:center;">2/13/2016 7:55am</p> </div> <div class='col-md-4'> <p class="pull-right">89519-19-05242017-1</p> </div>--> </div> </div> <div class="modal-body"> <div class="row"> <div class='col-md-3'> </div> <div class='col-md-3'> <h4 style="text-align:center;">Assign Employee</h4> </div> <div class='col-md-3'> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Employee Name <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Veteran's Association</a></li> <li><a href="#">Department of Health</a></li> <li><a href="#">Private</a></li> </ul> </div> </div> <div class='col-md-3'> </div> </div><br> <div class="row"> <div class='col-md-3'> </div> <div class='col-md-6'> <h4 style="text-align:center;">Patients To Visit</h4> </div> <div class='col-md-3'> </div> </div> <div class="row"> <div class='col-md-1'> </div> <div class='col-md-3'> <p>1. Patient Name </p> </div> <div class='col-md-2'> <p> Claim </p> </div> <div class='col-md-3'> <p>8:30am - 9:00am </p> </div> <div class='col-md-3'> <span> <i class="glyphicon glyphicon-chevron-down"></i> </span> </div> </div> <div class="row"> <div class='col-md-1'> </div> <div class='col-md-3'> <p>2. Patient Name </p> </div> <div class='col-md-2'> <p> Follow-up </p> </div> <div class='col-md-3'> <p>9:30am - 9:45am </p> </div> <div class='col-md-3'> <span> <i class="glyphicon glyphicon-chevron-up"></i> <i class="glyphicon glyphicon-chevron-down"></i> </span> </div> </div> <div class="row"> <div class='col-md-1'> </div> <div class='col-md-3'> <p>3. Patient Name </p> </div> <div class='col-md-2'> <p> Claim </p> </div> <div class='col-md-3'> <p>10:15am - 10:45am </p> </div> <div class='col-md-3'> <span> <i class="glyphicon glyphicon-chevron-up"></i> <i class="glyphicon glyphicon-chevron-down"></i> </span> </div> </div> <div class="row"> <div class='col-md-1'> </div> <div class='col-md-3'> <p>4. Patient Name </p> </div> <div class='col-md-2'> <p> Follow-up </p> </div> <div class='col-md-3'> <p>11:15am - 11:30am </p> </div> <div class='col-md-3'> <span> <i class="glyphicon glyphicon-chevron-up"></i> <i class="glyphicon glyphicon-chevron-down"></i> </span> </div> </div> <div class="row"> <div class='col-md-1'> </div> <div class='col-md-3'> <p>5. Patient Name </p> </div> <div class='col-md-2'> <p> Follow-up </p> </div> <div class='col-md-3'> <p>1:15pm - 1:30pm </p> </div> <div class='col-md-3'> <span> <i class="glyphicon glyphicon-chevron-up"></i> <i class="glyphicon glyphicon-chevron-down"></i> </span> </div> </div> <div class="row"> <div class='col-md-1'> </div> <div class='col-md-3'> <p>6. Patient Name </p> </div> <div class='col-md-2'> <p> First Visit </p> </div> <div class='col-md-3'> <p>2:00pm - 2:30pm </p> </div> <div class='col-md-3'> <span> <i class="glyphicon glyphicon-chevron-up"></i> <i class="glyphicon glyphicon-chevron-down"></i> </span> </div> </div> <div class="row"> <div class='col-md-1'> </div> <div class='col-md-3'> <p>7. Patient Name </p> </div> <div class='col-md-2'> <p>First Visit </p> </div> <div class='col-md-3'> <p>3:00pm - 3:30pm </p> </div> <div class='col-md-3'> <span> <i class="glyphicon glyphicon-chevron-up"></i> <i class="glyphicon glyphicon-chevron-down"></i> </span> </div> </div> <div class="row"> <div class='col-md-1'> </div> <div class='col-md-3'> <p>8. Patient Name </p> </div> <div class='col-md-2'> <p> Follow-up </p> </div> <div class='col-md-3'> <p>4:00pm - 4:15pm </p> </div> <div class='col-md-3'> <span> <i class="glyphicon glyphicon-chevron-up"></i> </span> </div> </div> <div style="height:220px" class="row"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Create Route</button> </div> </div> </div> </div>
/* -------------------------------------------------- :: General -------------------------------------------------- */ body { font-family: 'Open Sans', sans-serif; color: #353535; } .content h1 { text-align: center; } .content .content-footer p { color: #6d6d6d; font-size: 12px; text-align: center; } .content .content-footer p a { color: inherit; font-weight: bold; } /* -------------------------------------------------- :: Table Filter -------------------------------------------------- */ .panel { border: 1px solid #ddd; background-color: #fcfcfc; } .panel .btn-group { margin: 15px 0 30px; } .panel .btn-group .btn { transition: background-color .3s ease; } .table-filter { background-color: #fff; border-bottom: 1px solid #eee; } .table-filter tbody tr:hover { cursor: pointer; background-color: #eee; } .table-filter tbody tr td { padding: 10px; vertical-align: middle; border-top-color: #eee; } .table-filter tbody tr.selected td { background-color: #eee; } .table-filter tr td:first-child { width: 38px; } .table-filter tr td:nth-child(2) { width: 35px; } .ckbox { position: relative; } .ckbox input[type="checkbox"] { opacity: 0; } .ckbox label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ckbox label:before { content: ''; top: 1px; left: 0; width: 18px; height: 18px; display: block; position: absolute; border-radius: 2px; border: 1px solid #bbb; background-color: #fff; } .ckbox input[type="checkbox"]:checked + label:before { border-color: #2BBCDE; background-color: #2BBCDE; } .ckbox input[type="checkbox"]:checked + label:after { top: 3px; left: 3.5px; content: '\e013'; color: #fff; font-size: 11px; font-family: 'Glyphicons Halflings'; position: absolute; } .table-filter .star { color: #ccc; text-align: center; display: block; } .table-filter .star.star-checked { color: #F0AD4E; } .table-filter .star:hover { color: #ccc; } .table-filter .star.star-checked:hover { color: #F0AD4E; } .table-filter .media-photo { width: 35px; } .table-filter .media-body { display: block; /* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */ } .table-filter .media-meta { font-size: 11px; color: #999; } .table-filter .media .title { color: #2BBCDE; font-size: 14px; font-weight: bold; line-height: normal; margin: 0; } .table-filter .media .title span { font-size: .8em; margin-right: 20px; } .table-filter .media .title span.pagado { color: #5cb85c; } .table-filter .media .title span.pendiente { color: #f0ad4e; } .table-filter .media .title span.cancelado { color: #d9534f; } .table-filter .media .summary { font-size: 14px; }
$(document).ready(function () { $('.star').on('click', function () { $(this).toggleClass('star-checked'); }); $('.ckbox label').on('click', function () { $(this).parents('tr').toggleClass('selected'); }); $('.btn-filter').on('click', function () { var $target = $(this).data('target'); if ($target != 'all') { $('.table tr').css('display', 'none'); $('.table tr[data-status="' + $target + '"]').fadeIn('slow'); } else { $('.table tr').css('display', 'none').fadeIn('slow'); } }); $('.input-daterange input').each(function() { $(this).datepicker('clearDates'); }); });

Related: See More

Datepicker

Questions / Comments: