Contact summary - adjust block width when editing

civicrm · Aug 21, 2018 · d401f50 · d401f50
1 parent 3afc47d
commit d401f50
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/css/contactSummary.css b/css/contactSummary.css
@@ -35,7 +35,10 @@ div#crm-contact-thumbnail {
 #crm-container div.crm-inline-edit.form {
   cursor: default;
   border: 2px dashed #6665BF;
-  overflow: auto;
+  box-shadow: white 0 0 10px 5px;
+  position: relative;
+  background-color: white;
+  z-index: 101;
 }
 
 #crm-container .crm-inline-edit.add-new {

diff --git a/templates/CRM/Contact/Page/View/Summary.js b/templates/CRM/Contact/Page/View/Summary.js
@@ -26,13 +26,27 @@
           o.unblock();
           o.css('overflow', 'hidden').wrapInner('<div class="inline-edit-hidden-content" style="display:none" />').append(response.content);
           // Smooth resizing
-          var newHeight = $('.crm-container-snippet', o).height();
-          var diff = newHeight - parseInt(o.css('height'), 10);
-          if (diff < 0) {
-            diff = 0 - diff;
+          $('.crm-container-snippet', o).css('display', 'inline-block');
+          var newHeight = $('.crm-container-snippet', o).height(),
+            width = o.width(),
+            speed = newHeight - parseInt(o.css('height'), 10),
+            animation = {height: '' + newHeight + 'px'};
+          if (speed < 0) {
+            speed = 0 - speed;
           }
-          o.animate({height: '' + newHeight + 'px'}, diff * 2, function() {
-            o.removeAttr('style');
+          var newWidth = $('.crm-container-snippet', o).width() + 10;
+          if (newWidth > width) {
+            animation.width = '' + newWidth + 'px';
+            if (o.is('.contactCardRight div')) {
+              animation.left = '' + (width - newWidth) + 'px';
+            }
+            if (newWidth - width > speed) {
+              speed = newWidth - width;
+            }
+          }
+          $('.crm-container-snippet', o).css('display', '');
+          o.animate(animation, speed, function() {
+            o.css('height', '');
           });
           $('form', o).validate(CRM.validate.params);
           ajaxFormParams.data = data;
@@ -57,7 +71,7 @@
     $('form', o).ajaxFormUnbind();
 
     if (response.status == 'success' || response.status == 'cancel') {
-      o.trigger('crmFormSuccess', [response]);
+      o.trigger('crmFormSuccess', [response]).removeAttr('style');
       $('.crm-inline-edit-container').addClass('crm-edit-ready');
       var data = o.data('edit-params');
       var dependent = $((o.data('dependent-fields') || []).join(','));
@@ -207,7 +221,7 @@
         $('form', container).ajaxFormUnbind();
         $('.inline-edit-hidden-content', container).nextAll().remove();
         $('.inline-edit-hidden-content > *:first-child', container).unwrap();
-        container.removeClass('form');
+        container.removeClass('form').removeAttr('style');
         $('.crm-inline-edit-container').addClass('crm-edit-ready');
         $('a.ui-notify-close', '#crm-notification-container').click();
         return false;