Commit cb8bfc2c authored by Dave Lane's avatar Dave Lane

introduced fluid responsive layout for mobile screens...

parent d8c96769
......@@ -71,8 +71,8 @@ article.ore-form .container .entry-content > div.ore {
border-radius: 10px;
box-shadow: 0 5px 15px rgb(0,0,0,0.5);
overflow-x: hidden;
overflow-y: hidden;
padding: 10px 0px 0px 0px;
overflow-y: auto;
padding: 0px 0px 0px 0px;
}
.ore-form .ore-detail {
......@@ -272,7 +272,7 @@ button.ore-processing {
#ore-login-status .ore-trigger:focus {
color: black;
}
#ore-container .ore-button {
.ore-dialog .ore-button {
color: black;
}
/* end accessibility styles */
......@@ -282,48 +282,44 @@ button.ore-processing {
#ore-login-status {
margin-top: 30px;
}
#ore-container .ore-modal {
width: 700px;
/*.ore-dialog .ore-modal {
max-width: 700px;
margin: 0 auto;
}
}*/
}
@media (max-width: 768px) {
#ore-container {
/*.ore-dialog {
margin-top: 28px;
margin-bottom: 20px;
}
#ore-container .ore-modal { width: 600px; }
width: 600px;
}*/
}
@media (max-width: 600px) {
#ore-container {
/*.ore-dialog {
margin: 0 auto;
margin-top: 28px;
margin-bottom: 20px;
}
#ore-container .ore-modal {
width: 100%;
margin: 0 auto;
}
}*/
}
@media (max-width: 500px) {
.ore-menu {
width: 100%;
width: 100vw;
right: -17px;
.ore-dialog {
padding: 0;
top: 20px;
max-width: 320px;
margin: 0 auto;
}
#ore-container .modal-body { padding: 0; }
#ore-container .ore-modal { top: 0; }
}
@media (max-width: 320px) {
#ore-label { display: none; }
.ore-spacer { display: none; }
.ore-menu {
width: 100%;
width: 100vw;
right: -17px;
.ore-dialog {
top: 20px;
max-width: 280px;
margin: 0 auto;
}
#ore-container .ore-modal { top: 20px; }
}
......@@ -25,7 +25,7 @@ $dialog_definitions = array(
'markup' => '<div class="ore-spacer">&nbsp;</div><div class="ore-menu-block ore-left"><p>'.
__('Don\'t have an account? We invite you to', 'oeru-register-enrol').'</p>'.
'<p style="text-align: center;">&nbsp;<button id="ore-register-menu-action" class="button ore-button">'.
__('Create account', 'oeru-register-enrol').'</button></p></div>'.
__('Create an account', 'oeru-register-enrol').'</button></p></div>'.
'<div class="ore-menu-block ore-right"><p>'.
__('Already have an account? Please', 'oeru-register-enrol').'</p>'.
'<p style="text-align: center;"><button id="ore-login-menu-action" class="button ore-button">'.
......
......@@ -426,12 +426,13 @@ jQuery(document).ready(function() {
dialog.dialog({
modal: true,
title: title,
fluid: true,
dialogClass: classes['ui-dialog']
});
// updating created dialog with a width, if set
if (data.hasOwnProperty('width')) {
LOG('setting width to ', data.width);
dialog.dialog('option', 'width', data.width);
dialog.dialog('option', 'maxWidth', data.width);
}
// enable validation
form = dialog.find(form_class);
......@@ -1176,4 +1177,52 @@ jQuery(document).ready(function() {
* End hash stuff
*/
/*
* Dynamic dialog resizing
*/
// adapt to the current viewport
$(window).load(function() {
LOG("document loaded");
viewport_width = $(document).width();
viewport_height = $(document).height();
LOG('current viewport: '+viewport_width+'x'+viewport_height+'...');
fluid_dialog();
});
// adapt to a resized viewport
$(window).resize(function() {
LOG("viewport resized!");
viewport_width = $(document).width();
viewport_height = $(document).height();
LOG('current viewport: '+viewport_width+'x'+viewport_height+'...');
fluid_dialog();
});
function fluid_dialog() {
LOG('running fluid_dialog');
var $visible = $(".ui-dialog:visible");
// each open dialog
$visible.each(function () {
var $this = $(this);
var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
// if fluid option == true
if (dialog.options.fluid) {
var w_width = $(window).width();
LOG('window width = '+w_width+' and dialog maxWidth = '+dialog.options.maxWidth);
// check window width against dialog width
if (w_width < (parseInt(dialog.options.maxWidth) + 50)) {
// keep dialog from filling entire screen
$this.css("max-width", "90%");
} else {
// fix maxWidth bug
$this.css("max-width", dialog.options.maxWidth + "px");
}
//reposition dialog
dialog.option("position", dialog.options.position);
}
});
}
/*
* End dynamic dialog resizing
*/
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment