mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-12 19:12:18 +03:00
Converted booking wizard to responsive (still needs to be polished)
This commit is contained in:
parent
5c9bed3ee5
commit
f822779a95
2 changed files with 100 additions and 6 deletions
|
@ -94,7 +94,7 @@
|
|||
<body>
|
||||
<div id="main" class="container">
|
||||
<div class="wrapper row">
|
||||
<div id="book-appointment-wizard" class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<div id="book-appointment-wizard" class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
|
||||
<?php
|
||||
// ------------------------------------------------------
|
||||
|
@ -162,7 +162,7 @@
|
|||
<div class="frame-container">
|
||||
<h3 class="frame-title"><?php echo $this->lang->line('step_one_title'); ?></h3>
|
||||
|
||||
<div class="frame-content" style="width:520px">
|
||||
<div class="frame-content">
|
||||
<div class="form-group">
|
||||
<label for="select-service">
|
||||
<strong><?php echo $this->lang->line('select_service'); ?></strong>
|
||||
|
@ -253,7 +253,7 @@
|
|||
|
||||
<h3 class="frame-title"><?php echo $this->lang->line('step_two_title'); ?></h3>
|
||||
|
||||
<div class="frame-content row" style="width:600px">
|
||||
<div class="frame-content row">
|
||||
<div class="col-md-6">
|
||||
<div id="select-date"></div>
|
||||
</div>
|
||||
|
@ -287,7 +287,7 @@
|
|||
|
||||
<h3 class="frame-title"><?php echo $this->lang->line('step_three_title'); ?></h3>
|
||||
|
||||
<div class="frame-content row" style="width:600px">
|
||||
<div class="frame-content row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="first-name" class="control-label"><?php echo $this->lang->line('first_name'); ?> *</label>
|
||||
|
@ -305,7 +305,6 @@
|
|||
<label for="phone-number" class="control-label"><?php echo $this->lang->line('phone_number'); ?> *</label>
|
||||
<input type="text" id="phone-number" class="required form-control" maxlength="60" />
|
||||
</div>
|
||||
<em id="form-message" class="text-danger"><?php echo $this->lang->line('fields_are_required'); ?></em>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
|
@ -326,6 +325,8 @@
|
|||
<textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<em id="form-message" class="text-danger"><?php echo $this->lang->line('fields_are_required'); ?></em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -349,7 +350,7 @@
|
|||
<div id="wizard-frame-4" class="wizard-frame" style="display:none;">
|
||||
<div class="frame-container">
|
||||
<h3 class="frame-title"><?php echo $this->lang->line('step_four_title'); ?></h3>
|
||||
<div class="frame-content row" style="width:600px">
|
||||
<div class="frame-content row">
|
||||
<div id="appointment-details" class="col-md-6"></div>
|
||||
<div id="customer-details" class="col-md-6"></div>
|
||||
</div>
|
||||
|
|
|
@ -213,4 +213,97 @@ body {
|
|||
|
||||
#cancel-appointment-frame form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Mobile Devices
|
||||
------------------------------------------------------------------------- */
|
||||
@media(max-width:400px) {
|
||||
html,
|
||||
body {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: block; /* reset display */
|
||||
}
|
||||
|
||||
#main .wrapper {
|
||||
height: auto;
|
||||
display: block; /* reset display */
|
||||
}
|
||||
|
||||
#book-appointment-wizard #header {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #company-name {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #steps {
|
||||
float: none;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame {
|
||||
padding: 0 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .frame-container {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .command-buttons {
|
||||
float: none;
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .command-buttons .btn {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #available-hours {
|
||||
overflow: auto;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #available-hours div {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #available-hours .available-hour {
|
||||
padding: 8px 3px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #form-message {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #book-appointment-form {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #book-appointment-form #book-appointment-submit{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popover .popover-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popover .popover-content #language-list .language {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue