CATL-1927: Fix modal fullscreen height issue

[deb1990]

Overview

jQuery UI modals do not take the full height of the screen, when making it fullscreen. But now we want the popups to take full height also. So this PR implements that.

Before

After

Technical Details

1. Added a js/jquery-ui-popup.js file, which

   • Adds a fullscreen class when expand button is pressed.
   • Also assigns the height of the ui-dialog-content dynamically.

     
     var menuHeight = $('#civicrm-menu').outerHeight();
     var titleBarHeight = $el.parent().find('.ui-dialog-titlebar').outerHeight();
     var buttonContainerHeight = $el.parent().find('.ui-dialog-buttonpane').outerHeight();
     var windowHeight = $(window).outerHeight();

   // this is the height we are setting var contentHeight = windowHeight - (titleBarHeight + menuHeight + buttonContainerHeight);

2. In scss/jquery/overrides/_ui-dialog.scss, added styles specific to fullscreen class, to apply full height.

Comment

Backstop JS tests were not run, because currently we dont have any scenarios written for expanding modals.

[swastikpareek]

@deb1990 : Could we please mention in the technical details why we need to add js/jquery-ui-popup.js? Do you think we should add details how are we doing this Also assigning the height of the ui-dialog-content dynamically ?

Few other things.

1. I think the overview needs to be refactored to follow PR guidelines
2. Did we run backstop for this? If yes, please add it to testing section in the PR details as done here