fixed #manage-appointment modal

This commit is contained in:
Alex Tselegidis 2015-07-22 22:14:03 +02:00
parent 8a9a21d9eb
commit cdb14b5c95
2 changed files with 253 additions and 218 deletions

View file

@ -97,26 +97,29 @@
// //
// -------------------------------------------------------------------- // --------------------------------------------------------------------
?> ?>
<div id="manage-appointment" class="modal hidden fade" data-keyboard="true" tabindex="-1"> <div id="manage-appointment" class="modal fade full-screen" data-keyboard="true" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="wrapper">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3><?php echo $this->lang->line('edit_appointment_title'); ?></h3> <h3 class="modal-title"><?php echo $this->lang->line('edit_appointment_title'); ?></h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="modal-message alert" style="display: none;"></div> <div class="modal-message alert hidden"></div>
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset class="container">
<legend><?php echo $this->lang->line('appointment_details_title'); ?></legend> <legend><?php echo $this->lang->line('appointment_details_title'); ?></legend>
<input id="appointment-id" type="hidden" /> <input id="appointment-id" type="hidden" />
<div class="control-group"> <div class="form-group">
<label for="select-service" class="control-label"><?php echo $this->lang->line('service'); ?> *</label> <label for="select-service" class="col-sm-3 control-label"><?php echo $this->lang->line('service'); ?> *</label>
<div class="controls"> <div class="col-sm-7">
<select id="select-service" class="required span4"> <select id="select-service" class="required form-control">
<?php <?php
// Group services by category, only if there is at least one service // Group services by category, only if there is at least one service
// with a parent category. // with a parent category.
@ -173,43 +176,43 @@
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="select-provider" class="control-label"><?php echo $this->lang->line('provider'); ?> *</label> <label for="select-provider" class="col-sm-3 control-label"><?php echo $this->lang->line('provider'); ?> *</label>
<div class="controls"> <div class="col-md-7">
<select id="select-provider" class="required span4"></select> <select id="select-provider" class="required form-control"></select>
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="start-datetime" class="control-label"><?php echo $this->lang->line('start_date_time'); ?></label> <label for="start-datetime" class="col-sm-3 control-label" ><?php echo $this->lang->line('start_date_time'); ?></label>
<div class="controls"> <div class="col-sm-7">
<input type="text" id="start-datetime" /> <input type="text" id="start-datetime" class="form-control" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="end-datetime" class="control-label"><?php echo $this->lang->line('end_date_time'); ?></label> <label for="end-datetime" class="control-label col-sm-3" ><?php echo $this->lang->line('end_date_time'); ?></label>
<div class="controls"> <div class="col-sm-7">
<input type="text" id="end-datetime" /> <input type="text" id="end-datetime" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="appointment-notes" class="control-label"><?php echo $this->lang->line('notes'); ?></label> <label for="appointment-notes" class="control-label col-sm-3" ><?php echo $this->lang->line('notes'); ?></label>
<div class="controls"> <div class="col-sm-7">
<textarea id="appointment-notes" class="span4" rows="3"></textarea> <textarea id="appointment-notes" class="form-control" rows="3"></textarea>
</div> </div>
</div> </div>
</fieldset> </fieldset>
<fieldset class="row-fluid"> <fieldset class="container">
<legend> <legend>
<?php echo $this->lang->line('customer_details_title'); ?> <?php echo $this->lang->line('customer_details_title'); ?>
<button id="new-customer" class="btn btn-mini" <button id="new-customer" class="btn btn-xs"
title="<?php echo $this->lang->line('clear_fields_add_existing_customer_hint'); ?>" title="<?php echo $this->lang->line('clear_fields_add_existing_customer_hint'); ?>"
type="button"><?php echo $this->lang->line('new'); ?> type="button"><?php echo $this->lang->line('new'); ?>
</button> </button>
<button id="select-customer" class="btn btn-primary btn-mini" <button id="select-customer" class="btn btn-primary btn-xs"
title="<?php echo $this->lang->line('pick_existing_customer_hint'); ?>" title="<?php echo $this->lang->line('pick_existing_customer_hint'); ?>"
type="button"><?php echo $this->lang->line('select'); ?> type="button"><?php echo $this->lang->line('select'); ?>
</button> </button>
@ -221,72 +224,69 @@
<input id="customer-id" type="hidden" /> <input id="customer-id" type="hidden" />
<div class="span5"> <div class="col-md-6">
<div class="control-group"> <div class="form-group">
<label for="first-name" class="control-label"> <label for="first-name" class="control-label col-sm-2">
<?php echo $this->lang->line('first_name'); ?> *</label> <?php echo $this->lang->line('first_name'); ?> *</label>
<div class="controls"> <div class="col-sm-8">
<input type="text" id="first-name" class="required" /> <input type="text" id="first-name" class="required form-control" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="last-name" class="control-label"> <label for="last-name" class="control-label col-sm-2">
<?php echo $this->lang->line('last_name'); ?>*</label> <?php echo $this->lang->line('last_name'); ?>*</label>
<div class="controls"> <div class="col-sm-8">
<input type="text" id="last-name" class="required" /> <input type="text" id="last-name" class="required form-control" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="email" class="control-label"> <label for="email" class="control-label col-sm-2">
<?php echo $this->lang->line('email'); ?>*</label> <?php echo $this->lang->line('email'); ?>*</label>
<div class="controls"> <div class="col-sm-8">
<input type="text" id="email" class="required" /> <input type="text" id="email" class="required form-control" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="phone-number" class="control-label"> <label for="phone-number" class="control-label col-sm-3">
<?php echo $this->lang->line('phone_number'); ?>*</label> <?php echo $this->lang->line('phone_number'); ?>*</label>
<div class="controls"> <div class="col-sm-8">
<input type="text" id="phone-number" class="required" /> <input type="text" id="phone-number" class="required form-control" />
</div> </div>
</div> </div>
</div> </div>
<div class="span6"> <div class="col-md-6">
<div class="control-group"> <div class="form-group">
<label for="address" class="control-label"> <label for="address" class="control-label col-sm-3">
<?php echo $this->lang->line('address'); ?> <?php echo $this->lang->line('address'); ?></label>
</label> <div class="col-md-8">
<div class="controls"> <input type="text" id="address" class="form-control" />
<input type="text" id="address" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="city" class="control-label"> <label for="city" class="control-label col-sm-3">
<?php echo $this->lang->line('city'); ?> <?php echo $this->lang->line('city'); ?></label>
</label> <div class="col-md-8">
<div class="controls"> <input type="text" id="city" class="form-control" />
<input type="text" id="city" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="zip-code" class="control-label"> <label for="zip-code" class="control-label col-sm-3">
<?php echo $this->lang->line('zip_code'); ?> <?php echo $this->lang->line('zip_code'); ?></label>
</label> <div class="col-md-8">
<div class="controls"> <input type="text" id="zip-code" class="form-control" />
<input type="text" id="zip-code" />
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="customer-notes" class="control-label"> <label for="customer-notes" class="control-label col-sm-3">
<?php echo $this->lang->line('notes'); ?></label> <?php echo $this->lang->line('notes'); ?></label>
<div class="controls"> <div class="col-md-8">
<textarea id="customer-notes" rows="3"></textarea> <textarea id="customer-notes" rows="3" class="form-control"></textarea>
</div> </div>
</div> </div>
</div> </div>
@ -294,16 +294,20 @@
</form> </form>
</div> </div>
<div class="modal-footer"> </div>
<div class="modal-footer footer">
<button id="save-appointment" class="btn btn-primary"> <button id="save-appointment" class="btn btn-primary">
<?php echo $this->lang->line('save'); ?> <?php echo $this->lang->line('save'); ?>
</button> </button>
<button id="cancel-appointment" class="btn"> <button id="cancel-appointment" class="btn" data-dismiss="modal">
<?php echo $this->lang->line('cancel'); ?> <?php echo $this->lang->line('cancel'); ?>
</button> </button>
</div> </div>
</div> </div>
</div>
</div>
<?php <?php
// -------------------------------------------------------------------- // --------------------------------------------------------------------
// //
@ -311,14 +315,14 @@
// //
// -------------------------------------------------------------------- // --------------------------------------------------------------------
?> ?>
<div id="manage-unavailable" class="modal hidden fade"> <div id="manage-unavailable" class="modal fade">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3><?php echo $this->lang->line('new_unavailable_title'); ?></h3> <h3 class="modal-title"><?php echo $this->lang->line('new_unavailable_title'); ?></h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -328,8 +332,8 @@
<fieldset> <fieldset>
<input id="unavailable-id" type="hidden" /> <input id="unavailable-id" type="hidden" />
<div class="control-group"> <div class="form-group">
<label for="unavailable-start" class="control-label"> <label for="unavailable-start" >
<?php echo $this->lang->line('start'); ?> <?php echo $this->lang->line('start'); ?>
</label> </label>
<div class="controls"> <div class="controls">
@ -337,8 +341,8 @@
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="unavailable-end" class="control-label"> <label for="unavailable-end" >
<?php echo $this->lang->line('end'); ?> <?php echo $this->lang->line('end'); ?>
</label> </label>
<div class="controls"> <div class="controls">
@ -346,8 +350,8 @@
</div> </div>
</div> </div>
<div class="control-group"> <div class="form-group">
<label for="unavailable-notes" class="control-label"> <label for="unavailable-notes" >
<?php echo $this->lang->line('notes'); ?> <?php echo $this->lang->line('notes'); ?>
</label> </label>
<div class="controls"> <div class="controls">
@ -362,10 +366,11 @@
<button id="save-unavailable" class="btn btn-primary"> <button id="save-unavailable" class="btn btn-primary">
<?php echo $this->lang->line('save'); ?> <?php echo $this->lang->line('save'); ?>
</button> </button>
<button id="cancel-unavailable" class="btn"> <button id="cancel-unavailable" class="btn" data-dismiss="modal">
<?php echo $this->lang->line('cancel'); ?> <?php echo $this->lang->line('cancel'); ?>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -377,13 +382,14 @@
// //
// -------------------------------------------------------------------- // --------------------------------------------------------------------
?> ?>
<div id="select-google-calendar" class="modal hidden fade"> <div id="select-google-calendar" class="modal fade">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button> aria-hidden="true">&times;</button>
<h3><?php echo $this->lang->line('select_google_calendar'); ?></h3> <h3 class="modal-title"><?php echo $this->lang->line('select_google_calendar'); ?></h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -397,10 +403,11 @@
<button id="select-calendar" class="btn btn-primary"> <button id="select-calendar" class="btn btn-primary">
<?php echo $this->lang->line('select'); ?> <?php echo $this->lang->line('select'); ?>
</button> </button>
<button id="close-calendar" class="btn"> <button id="close-calendar" class="btn" data-dismiss="modal">
<?php echo $this->lang->line('close'); ?> <?php echo $this->lang->line('close'); ?>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -120,18 +120,51 @@ root {
margin: 10px; margin: 10px;
} }
body .modal .modal-title {
color: white;
}
body .modal-header { body .modal-header {
padding: 12px 15px; padding: 12px 15px;
background: #3DD481; background: #3DD481;
border-bottom: 4px solid #3A8154; border-bottom: 4px solid #3A8154;
color: #FFF;
} }
body .modal-header h3 { body .modal-header h3 {
color: #FFF;
font-size: 20px; font-size: 20px;
text-shadow: 1px 1px 1px #134D13; text-shadow: 1px 1px 1px #134D13;
} }
/* Full screen modal */
body .modal.full-screen .modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body .modal.full-screen .modal-content {
height: 100%;
border: none;
box-shadow: none;
overflow-y: auto;
}
body .modal.full-screen .wrapper {
min-height: 100%;
margin-bottom: -67px; /* modal-footer height */
}
body .modal.full-screen .modal-footer {
background-color: #f5f5f5;
position: absolute;
bottom: 0;
width: 100%;
height: 67px;
}
body .jspDrag { body .jspDrag {
background: #D3D3D3; background: #D3D3D3;
} }
@ -225,11 +258,6 @@ body .jspTrack {
color: #555; color: #555;
} }
#manage-appointment {
width: 860px;
margin-left: -430px;
}
#existing-customers-list { #existing-customers-list {
height: 110px; height: 110px;
overflow-y: auto; overflow-y: auto;