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

Fixed responsive display for mobile devices.

Browse source
This commit is contained in:
Alex Tselegidis 2016-01-06 21:56:22 +01:00
parent 9918631c0f
commit 7cdccf1d27
3 changed files with 245 additions and 205 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

182
src/application/views/appointments/message.php
View file

@ -1,91 +1,91 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#35A768"> <meta name="theme-color" content="#35A768">
<title><?php echo $message_title ?></title> <title><?php echo $message_title ?></title>
<?php <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
// INCLUDE CSS FILES // INCLUDE CSS FILES
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="<?php echo $this->config->item('base_url'); ?>/assets/ext/bootstrap/css/bootstrap.css"> href="<?php echo $this->config->item('base_url'); ?>/assets/ext/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="<?php echo $this->config->item('base_url'); ?>/assets/css/frontend.css"> href="<?php echo $this->config->item('base_url'); ?>/assets/css/frontend.css">
<?php <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
// SET PAGE FAVICON // SET PAGE FAVICON
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<link rel="icon" type="image/x-icon" <link rel="icon" type="image/x-icon"
href="<?php echo $this->config->item('base_url'); ?>/assets/img/favicon.ico"> href="<?php echo $this->config->item('base_url'); ?>/assets/img/favicon.ico">
<link rel="icon" sizes="192x192" <link rel="icon" sizes="192x192"
href="<?php echo $this->config->item('base_url'); ?>/assets/img/logo.png"> href="<?php echo $this->config->item('base_url'); ?>/assets/img/logo.png">
<?php <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
// CUSTOM PAGE JS // CUSTOM PAGE JS
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<script type="text/javascript"> <script type="text/javascript">
var EALang = <?php echo json_encode($this->lang->language); ?>; var EALang = <?php echo json_encode($this->lang->language); ?>;
</script> </script>
<?php <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
// INCLUDE JS FILES // INCLUDE JS FILES
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<script <script
type="text/javascript" type="text/javascript"
src="<?php echo $this->config->item('base_url'); ?>/assets/ext/jquery/jquery.min.js"></script> src="<?php echo $this->config->item('base_url'); ?>/assets/ext/jquery/jquery.min.js"></script>
<script <script
type="text/javascript" type="text/javascript"
src="<?php echo $this->config->item('base_url'); ?>/assets/ext/bootstrap/js/bootstrap.min.js"></script> src="<?php echo $this->config->item('base_url'); ?>/assets/ext/bootstrap/js/bootstrap.min.js"></script>
<script <script
type="text/javascript" type="text/javascript"
src="<?php echo $this->config->item('base_url'); ?>/assets/ext/datejs/date.js"></script> src="<?php echo $this->config->item('base_url'); ?>/assets/ext/datejs/date.js"></script>
<script <script
type="text/javascript" type="text/javascript"
src="<?php echo $this->config->item('base_url'); ?>/assets/js/general_functions.js"></script> src="<?php echo $this->config->item('base_url'); ?>/assets/js/general_functions.js"></script>
</head> </head>
<body> <body>
<div id="main" class="container"> <div id="main" class="container">
<div class="wrapper row"> <div class="wrapper row">
<div id="message-frame" class="frame-container <div id="message-frame" class="frame-container
col-xs-12 col-xs-12
col-sm-offset-1 col-sm-10 col-sm-offset-1 col-sm-10
col-md-offset-2 col-md-8 col-md-offset-2 col-md-8
col-lg-offset-2 col-lg-8"> col-lg-offset-2 col-lg-8">
<div class="col-xs-12 col-sm-2"> <div class="col-xs-12 col-sm-2">
<img id="message-icon" src="<?php echo $message_icon; ?>" /> <img id="message-icon" src="<?php echo $message_icon; ?>" />
</div> </div>
<div class="col-xs-12 col-sm-10"> <div class="col-xs-12 col-sm-10">
<?php <?php
echo '<h3>' . $message_title . '</h3>'; echo '<h3>' . $message_title . '</h3>';
echo '<p>' . $message_text . '</p>'; echo '<p>' . $message_text . '</p>';
// Display exceptions (if any). // Display exceptions (if any).
if (isset($exceptions)) { if (isset($exceptions)) {
echo '<div style="margin: 10px">'; echo '<div style="margin: 10px">';
echo '<h4>Unexpected Errors</h4>'; echo '<h4>Unexpected Errors</h4>';
foreach($exceptions as $exception) { foreach($exceptions as $exception) {
echo exceptionToHtml($exception); echo exceptionToHtml($exception);
} }
echo '</div>'; echo '</div>';
} }
?> ?>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

231
src/application/views/general/error404.php
View file

@ -1,113 +1,118 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#35A768"> <meta name="theme-color" content="#35A768">
<title><?php echo $this->lang->line('page_not_found') . ' - ' . $company_name; ?></title> <title><?php echo $this->lang->line('page_not_found') . ' - ' . $company_name; ?></title>
<?php <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
// INCLUDE CSS FILES // INCLUDE CSS FILES
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
href="<?php echo $this->config->item('base_url'); ?>/assets/ext/bootstrap/css/bootstrap.min.css"> href="<?php echo $this->config->item('base_url'); ?>/assets/ext/bootstrap/css/bootstrap.min.css">
<?php <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
// SET PAGE FAVICON // SET PAGE FAVICON
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<link <link
rel="icon" rel="icon"
type="image/x-icon" type="image/x-icon"
href="<?php echo $this->config->item('base_url'); ?>/assets/img/favicon.ico"> href="<?php echo $this->config->item('base_url'); ?>/assets/img/favicon.ico">
<?php <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
// CUSTOM PAGE JS // CUSTOM PAGE JS
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<script type="text/javascript"> <script type="text/javascript">
var EALang = <?php echo json_encode($this->lang->language); ?>; var EALang = <?php echo json_encode($this->lang->language); ?>;
</script> </script>
<?php <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
// INCLUDE JS FILES // INCLUDE JS FILES
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<script <script
type="text/javascript" type="text/javascript"
src="<?php echo $this->config->item('base_url'); ?>/assets/ext/jquery/jquery.min.js"></script> src="<?php echo $this->config->item('base_url'); ?>/assets/ext/jquery/jquery.min.js"></script>
<script <script
type="text/javascript" type="text/javascript"
src="<?php echo $this->config->item('base_url'); ?>/assets/ext/bootstrap/js/bootstrap.min.js"></script> src="<?php echo $this->config->item('base_url'); ?>/assets/ext/bootstrap/js/bootstrap.min.js"></script>
<script <script
type="text/javascript" type="text/javascript"
src="<?php echo $this->config->item('base_url'); ?>/assets/ext/datejs/date.js"></script> src="<?php echo $this->config->item('base_url'); ?>/assets/ext/datejs/date.js"></script>
<script <script
type="text/javascript" type="text/javascript"
src="<?php echo $this->config->item('base_url'); ?>/assets/js/general_functions.js"></script> src="<?php echo $this->config->item('base_url'); ?>/assets/js/general_functions.js"></script>
<?php <?php
// ------------------------------------------------------------ // ------------------------------------------------------------
// CUSTOM PAGE CSS // CUSTOM PAGE CSS
// ------------------------------------------------------------ ?> // ------------------------------------------------------------ ?>
<style> <style>
body { body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background-color: #CAEDF3; background-color: #CAEDF3;
} }
#message-frame { #message-frame {
width: 630px; width: 630px;
margin: auto; margin: auto;
background: #FFF; background: #FFF;
border: 1px solid #DDDADA; border: 1px solid #DDDADA;
padding: 70px; padding: 70px;
} }
.btn { .btn {
margin-right: 10px; margin-right: 10px;
} }
@media(max-width: 640px) { @media(max-width: 640px) {
#message-frame { body {
width: 100%; display: block;
padding: 20px; }
}
#message-frame {
.btn { width: 100%;
width: 100%; height: 100%;
margin-bottom: 20px; padding: 20px;
} }
}
</style> .btn {
</head> width: 100%;
<body> margin-bottom: 20px;
<div id="message-frame" class="frame-container"> }
<h3><?php echo $this->lang->line('page_not_found') }
. ' - ' . $this->lang->line('error') . ' 404' ?></h3> </style>
<p> </head>
<?php echo $this->lang->line('page_not_found_message'); ?> <body>
</p> <div id="message-frame" class="frame-container">
<h3><?php echo $this->lang->line('page_not_found')
<br> . ' - ' . $this->lang->line('error') . ' 404' ?></h3>
<p>
<a href="<?php echo $this->config->item('base_url'); ?>" class="btn btn-primary btn-large"> <?php echo $this->lang->line('page_not_found_message'); ?>
<span class="glyphicon glyphicon-calendar"></span> </p>
<?php echo $this->lang->line('book_appointment_title'); ?>
</a> <br>
<a href="<?php echo $this->config->item('base_url'); ?>/index.php/backend" class="btn btn-danger btn-large"> <a href="<?php echo $this->config->item('base_url'); ?>" class="btn btn-primary btn-large">
<span class="glyphicon glyphicon-wrench"></span> <span class="glyphicon glyphicon-calendar"></span>
<?php echo $this->lang->line('backend_section'); ?> <?php echo $this->lang->line('book_appointment_title'); ?>
</a> </a>
</div> <a href="<?php echo $this->config->item('base_url'); ?>/index.php/backend" class="btn btn-danger btn-large">
</body> <span class="glyphicon glyphicon-wrench"></span>
</html> <?php echo $this->lang->line('backend_section'); ?>
</a>
</div>
</body>
</html>

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

@ -257,7 +257,7 @@ body {
#main { #main {
min-height: 100%; min-height: 100%;
display: block; /* reset display */ display: block; /* reset display */
padding: 0; padding: 5vw;
} }
#main .wrapper { #main .wrapper {
@ -303,6 +303,9 @@ body {
#book-appointment-wizard .wizard-frame .command-buttons #button-next-1 { #book-appointment-wizard .wizard-frame .command-buttons #button-next-1 {
width: 100%; width: 100%;
max-width: 300px;
margin: auto;
display: block;
} }
#book-appointment-wizard .wizard-frame #select-date { #book-appointment-wizard .wizard-frame #select-date {
@ -381,3 +384,35 @@ body {
font-size: 1.2em; font-size: 1.2em;
} }
} }
@media(max-width:480px) {
body {
background-color: #FAFAFA;
}
#main {
padding: 0;
}
#main .wrapper {
width: 100vw;
margin: 0;
display: block;
}
#book-appointment-wizard {
box-shadow: none;
}
#book-appointment-wizard .captcha-title {
margin: 7px 0 10px 0
}
#book-appointment-wizard .captcha-image {
float: left;
}
#book-appointment-wizard #frame-footer {
}
}