maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Converted booking wizard to responsive (still needs to be polished)

Browse source
This commit is contained in:
Alex Tselegidis 2015-04-23 21:46:52 +02:00
parent 5c9bed3ee5
commit f822779a95
2 changed files with 100 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/application/views/appointments/book.php
View file

@ -94,7 +94,7 @@
<body> <body>
<div id="main" class="container"> <div id="main" class="container">
<div class="wrapper row"> <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 <?php
// ------------------------------------------------------ // ------------------------------------------------------
@ -162,7 +162,7 @@
<div class="frame-container"> <div class="frame-container">
<h3 class="frame-title"><?php echo $this->lang->line('step_one_title'); ?></h3> <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"> <div class="form-group">
<label for="select-service"> <label for="select-service">
<strong><?php echo $this->lang->line('select_service'); ?></strong> <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> <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 class="col-md-6">
<div id="select-date"></div> <div id="select-date"></div>
</div> </div>
@ -287,7 +287,7 @@
<h3 class="frame-title"><?php echo $this->lang->line('step_three_title'); ?></h3> <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="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="first-name" class="control-label"><?php echo $this->lang->line('first_name'); ?> *</label> <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> <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" /> <input type="text" id="phone-number" class="required form-control" maxlength="60" />
</div> </div>
<em id="form-message" class="text-danger"><?php echo $this->lang->line('fields_are_required'); ?></em>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
@ -326,6 +325,8 @@
<textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea> <textarea id="notes" maxlength="500" class="form-control" rows="3"></textarea>
</div> </div>
</div> </div>
<em id="form-message" class="text-danger"><?php echo $this->lang->line('fields_are_required'); ?></em>
</div> </div>
</div> </div>
@ -349,7 +350,7 @@
<div id="wizard-frame-4" class="wizard-frame" style="display:none;"> <div id="wizard-frame-4" class="wizard-frame" style="display:none;">
<div class="frame-container"> <div class="frame-container">
<h3 class="frame-title"><?php echo $this->lang->line('step_four_title'); ?></h3> <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="appointment-details" class="col-md-6"></div>
<div id="customer-details" class="col-md-6"></div> <div id="customer-details" class="col-md-6"></div>
</div> </div>

93
src/assets/css/frontend.css
View file

@ -214,3 +214,96 @@ body {
#cancel-appointment-frame form { #cancel-appointment-frame form {
display: inline; 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;
}
}