shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

Merge pull request #156 from mabashian/5225-responsive-workflow-editor

Browse Source 
Fixed workflow maker responsiveness
This commit is contained in:
Michael Abashian 2017-08-03 09:36:58 -04:00 committed by GitHub
commit ddb47c4e81
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
View File

@ -1,12 +1,9 @@
.WorkflowMaker-dialog { .WorkflowMaker-dialog {
padding: 0px; padding: 0px;
margin-bottom: 20px; margin-bottom: 20px;
position: fixed;
top: 0 !important;
bottom: 0;
width: 100vw !important; width: 100vw !important;
height: 100vh !important;
overflow: scroll; overflow: scroll;
.ui-dialog-buttonpane, .ui-dialog-titlebar { .ui-dialog-buttonpane, .ui-dialog-titlebar {
display:none; display:none;
} }
@ -274,6 +271,10 @@
.WorkflowMaker-formTab { .WorkflowMaker-formTab {
margin-right: 10px; margin-right: 10px;
} }
.WorkflowMaker-preventBodyScrolling {
height: 100%;
overflow: hidden;
}
.Key-list { .Key-list {
margin: 0; margin: 0;

11
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js
View File

@ -20,8 +20,8 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
let availableHeight = $(window).height(), let availableHeight = $(window).height(),
availableWidth = $(window).width(), availableWidth = $(window).width(),
minimumWidth = 1300, minimumWidth = 682,
minimumHeight = 550; minimumHeight = 400;
CreateDialog({ CreateDialog({
id: 'workflow-modal-dialog', id: 'workflow-modal-dialog',
@ -33,15 +33,15 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
position: ['center', 20], position: ['center', 20],
onClose: function() { onClose: function() {
$('#workflow-modal-dialog').empty(); $('#workflow-modal-dialog').empty();
$('body').removeClass('WorkflowMaker-preventBodyScrolling');
}, },
onOpen: function() { onOpen: function() {
Wait('stop'); Wait('stop');
$('body').addClass('WorkflowMaker-preventBodyScrolling');
// Let the modal height be variable based on the content // Let the modal height be variable based on the content
// and set a uniform padding // and set a uniform padding
$('#workflow-modal-dialog').css({ 'padding': '20px' }); $('#workflow-modal-dialog').css({ 'padding': '20px' });
$('#workflow-modal-dialog').parent('.ui-dialog').height(availableHeight > minimumHeight ? availableHeight : minimumHeight);
$('#workflow-modal-dialog').parent('.ui-dialog').width(availableWidth > minimumWidth ? availableWidth : minimumWidth);
$('#workflow-modal-dialog').outerHeight(availableHeight > minimumHeight ? availableHeight : minimumHeight); $('#workflow-modal-dialog').outerHeight(availableHeight > minimumHeight ? availableHeight : minimumHeight);
$('#workflow-modal-dialog').outerWidth(availableWidth > minimumWidth ? availableWidth : minimumWidth); $('#workflow-modal-dialog').outerWidth(availableWidth > minimumWidth ? availableWidth : minimumWidth);
@ -62,6 +62,7 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
scope.closeDialog = function() { scope.closeDialog = function() {
$('#workflow-modal-dialog').dialog('destroy'); $('#workflow-modal-dialog').dialog('destroy');
$('body').removeClass('WorkflowMaker-preventBodyScrolling');
$state.go('^'); $state.go('^');
}; };
@ -69,8 +70,6 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
function onResize(){ function onResize(){
availableHeight = $(window).height(); availableHeight = $(window).height();
availableWidth = $(window).width(); availableWidth = $(window).width();
$('#workflow-modal-dialog').parent('.ui-dialog').height(availableHeight > minimumHeight ? availableHeight : minimumHeight);
$('#workflow-modal-dialog').parent('.ui-dialog').width(availableWidth > minimumWidth ? availableWidth : minimumWidth);
$('#workflow-modal-dialog').outerHeight(availableHeight > minimumHeight ? availableHeight : minimumHeight); $('#workflow-modal-dialog').outerHeight(availableHeight > minimumHeight ? availableHeight : minimumHeight);
$('#workflow-modal-dialog').outerWidth(availableWidth > minimumWidth ? availableWidth : minimumWidth); $('#workflow-modal-dialog').outerWidth(availableWidth > minimumWidth ? availableWidth : minimumWidth);