{"action":"created","comment":{"url":"https://api.github.com/repos/civicrm/civihr/pulls/comments/84856640","pull_request_review_id":5604812,"id":84856640,"diff_hunk":"@@ -0,0 +1,62 @@\n+/*\n+Prevent Popups to overflow tables.\n+*/\n+CRM.$(function($) {\n+  'use strict';\n+\n+  (function($) {\n+    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;\n+\n+    $.fn.attrchange = function(callback) {\n+      if (MutationObserver) {\n+        var options = {\n+          subtree: false,\n+          attributes: true\n+        };\n+\n+        var observer = new MutationObserver(function(mutations) {\n+          mutations.forEach(function(e) {\n+            callback.call(e.target, e);\n+          });\n+        });\n+\n+        return this.each(function() {\n+          observer.observe(this, options);\n+        });\n+      }\n+    }\n+  })($);\n+\n+  // .btn-slide is a continer of popup and a button triggering it\n+  $('.btn-slide').attrchange(function(e) {\n+    var $button = $(this),\n+        $popup,\n+        button_offset;\n+\n+    if($button.hasClass('btn-slide-active')) {\n+      // check if popup is open\n+      $popup = $button.children('ul.panel');\n+\n+      $popup.appendTo('body')\n+        .addClass('civihr-popup');\n+\n+      button_offset = $button.offset();\n+\n+      $popup.css('position', 'absolute')\n+        .css('top', parseInt(button_offset.top, 10) + 24) // 24 is the fontsize + paddings\n+        .css('left', parseInt(button_offset.left, 10) - ($popup.width() - 57)); // 57 is the width of more button","path":"org.civicrm.bootstrapcivicrm/js/civihr-popup.js","position":47,"original_position":47,"commit_id":"b41cab03145e3e09778cf753f9eccd1a73da538e","original_commit_id":"b41cab03145e3e09778cf753f9eccd1a73da538e","user":{"login":"AkA84","id":6400898,"avatar_url":"https://avatars.githubusercontent.com/u/6400898?v=3","gravatar_id":"","url":"https://api.github.com/users/AkA84","html_url":"https://github.com/AkA84","followers_url":"https://api.github.com/users/AkA84/followers","following_url":"https://api.github.com/users/AkA84/following{/other_user}","gists_url":"https://api.github.com/users/AkA84/gists{/gist_id}","starred_url":"https://api.github.com/users/AkA84/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AkA84/subscriptions","organizations_url":"https://api.github.com/users/AkA84/orgs","repos_url":"https://api.github.com/users/AkA84/repos","events_url":"https://api.github.com/users/AkA84/events{/privacy}","received_events_url":"https://api.github.com/users/AkA84/received_events","type":"User","site_admin":false},"body":"`24` and `57` seem magic numbers, isn't there a way to get the more programmatically, or avoid using them altogether?","created_at":"2016-10-25T08:53:24Z","updated_at":"2016-10-25T08:53:24Z","html_url":"https://github.com/civicrm/civihr/pull/1173#discussion_r84856640","pull_request_url":"https://api.github.com/repos/civicrm/civihr/pulls/1173","_links":{"self":{"href":"https://api.github.com/repos/civicrm/civihr/pulls/comments/84856640"},"html":{"href":"https://github.com/civicrm/civihr/pull/1173#discussion_r84856640"},"pull_request":{"href":"https://api.github.com/repos/civicrm/civihr/pulls/1173"}}},"pull_request":{"url":"https://api.github.com/repos/civicrm/civihr/pulls/1173","id":86116323,"html_url":"https://github.com/civicrm/civihr/pull/1173","diff_url":"https://github.com/civicrm/civihr/pull/1173.diff","patch_url":"https://github.com/civicrm/civihr/pull/1173.patch","issue_url":"https://api.github.com/repos/civicrm/civihr/issues/1173","number":1173,"state":"open","locked":false,"title":"PCHR-1566: Administer Subitems Redesign","user":{"login":"kkalamarski","id":5514826,"avatar_url":"https://avatars.githubusercontent.com/u/5514826?v=3","gravatar_id":"","url":"https://api.github.com/users/kkalamarski","html_url":"https://github.com/kkalamarski","followers_url":"https://api.github.com/users/kkalamarski/followers","following_url":"https://api.github.com/users/kkalamarski/following{/other_user}","gists_url":"https://api.github.com/users/kkalamarski/gists{/gist_id}","starred_url":"https://api.github.com/users/kkalamarski/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kkalamarski/subscriptions","organizations_url":"https://api.github.com/users/kkalamarski/orgs","repos_url":"https://api.github.com/users/kkalamarski/repos","events_url":"https://api.github.com/users/kkalamarski/events{/privacy}","received_events_url":"https://api.github.com/users/kkalamarski/received_events","type":"User","site_admin":false},"body":"# What has been changed\r\nThe goal of this PR is to \"update civicrm styles to match civihr styles\". Therefore I was asked not to change any layout structure (that's why this PR consists only of CSS). The biggest problem was that the page structure is very different in most of the cases. It was impossible to write only one - global - css rule, that's why there's many page-specific stylesheets. To keep the code clean and \"DRY\" i used mixins for common parts. \r\n\r\nThere were made changes to almost all screens under `Administer` menu - it's not possible to include all screenshots here, that's why I'll leave screenshots for specific types of components:\r\n\r\n## [Tabs] CiviCRM System Status Styles \r\n### before\r\n![civicrm system status - before](https://cloud.githubusercontent.com/assets/5514826/18702982/b31b1036-7fec-11e6-93c4-2ca003e7fdc5.png)\r\n\r\n### after \r\n![civicrm system status](https://cloud.githubusercontent.com/assets/5514826/18779419/ab5d6376-8181-11e6-8934-932f8af676c8.png)\r\n\r\n## [Table] Custom Data Fields\r\n### before\r\n![custom data fields - before](https://cloud.githubusercontent.com/assets/5514826/18705087/7ddbcbbe-7ff5-11e6-9a0c-04788ab8c16d.png)\r\n\r\n### after\r\n![custom data fields](https://cloud.githubusercontent.com/assets/5514826/18779708/d7cb2744-8182-11e6-876c-6842f89e2e57.png)\r\n\r\n\r\n## [Tabs & Tables] Profiles\r\n### before\r\n![profiles - before](https://cloud.githubusercontent.com/assets/5514826/18709813/ab3f14a2-800a-11e6-902c-c1174c56e6ac.png)\r\n\r\n### after\r\n![profiles](https://cloud.githubusercontent.com/assets/5514826/18779757/09195e42-8183-11e6-8a65-60d4eb0ae8c8.png)\r\n\r\n## [Forms with nested tables] Display Prefetences\r\n### before \r\n![display settings - before](https://cloud.githubusercontent.com/assets/5514826/18780385/fb56e9ac-8185-11e6-8886-84de207138a3.png)\r\n\r\n### after \r\n![display settings](https://cloud.githubusercontent.com/assets/5514826/18780394/028c6152-8186-11e6-8632-50d56ae49b23.png)\r\n\r\n## [Nested tables inside Tabs] Extensions\r\n### before\r\n![extensions - before](https://cloud.githubusercontent.com/assets/5514826/18780461/5f4f84aa-8186-11e6-8a2a-99a366090be8.png)\r\n\r\n### after\r\n![extensions](https://cloud.githubusercontent.com/assets/5514826/18780470/64f87fce-8186-11e6-8701-988a8b0a9283.png)\r\n\r\n# Update 19.10.2016\r\n\r\n## Tables are responsive now\r\n### before\r\n![resp_tables_before](https://cloud.githubusercontent.com/assets/5514826/19528758/f3384558-9635-11e6-9313-63c7b5f57f5a.png)\r\n\r\n### after (horizontal scroll possible)\r\n![resp_tables_after](https://cloud.githubusercontent.com/assets/5514826/19528765/fb4758ce-9635-11e6-9f70-b9e63881c899.png)\r\n\r\n## Popup is not truncated anymore\r\nThis is a regression issue caused by setting table wrapper overflow to scroll.\r\nThis is fixed by adding extra `padding-bottom` to container, and cutting it using `margin-bottom` which equals negative value of `padding-bottom`.\r\n\r\n```css\r\noverflow: scroll;\r\npadding-bottom: 150px;\r\nmargin-bottom: -150px;\r\n```\r\n### before\r\n![popup_before](https://cloud.githubusercontent.com/assets/5514826/19528773/0597fa9a-9636-11e6-8fd0-195a9e6e5539.png)\r\n\r\n### after\r\n![popup_after](https://cloud.githubusercontent.com/assets/5514826/19528783/0e727b86-9636-11e6-8911-0abcb6645c8d.png)\r\n\r\n# Update 24.10.2016 \r\nFixing issues pointed by @JonScreat after design testing. \r\nCommits include following changes:\r\n* Fixed few overflowing tables to be scrollable.\r\n* To avoid overflowing tables in vertical axis by popup, decided to change the look pf popup itself, rather than changing it's parent table. Result is seen below (compare with above screenshots).\r\n\r\n### 'More' Popup - after:\r\n![more-popup](https://cloud.githubusercontent.com/assets/5514826/19638658/954e2e7a-99dd-11e6-84f7-f8dc4a0ccf3e.png)\r\n\r\n@JonScreat *justifying choice of horizontal popup* - I was facing the problem, tables would either overflow or would truncate the popup. The problem was caused by CSS not allowing me to scroll content horizontally, while vertically content would still be visible. Tried many solutions, but all of them had some side effects (i.e. scrollbar overflowing over footer). The only solution that does not break anything is setting popup into horizontal layout. \r\n\r\n# Update 25.10.2016 \r\n\r\nFixed popup to be vertical again + applied styles to match civihr design. The solution I chose was to write simple JS plugin displaying popup in right place with `position: absolute`.\r\nResult seen below:\r\n\r\n![new popup](https://cloud.githubusercontent.com/assets/5514826/19677809/b7ca5bba-9aa3-11e6-80ef-94d95493f851.png)\r\n\r\n![popup-gif](https://cloud.githubusercontent.com/assets/5514826/19677848/e18b7a92-9aa3-11e6-8eea-85289475365c.gif)\r\n\r\n\r\n## Attrchange Plugin\r\n`$.fn.attrchange` This plugin creates `MutationObserver` which listens to all changes to DOM Node. If change has been done to it's attributes callback will be called.\r\n\r\n```javascript\r\n\r\n$(<selector>).attrchange(function(e) {\r\n  // attrubite changed\r\n});\r\n```\r\n\r\n### attrchange with civihr popup\r\nPlugin is bound to `$('.btn-slide')` - container and button triggering popup. When button is clicked a class `btn-slide-active` is added to it, which triggers `attrchange`.\r\n\r\n`attrchange` checks if class `btn-slide-active` is present and if so it calculates button offset, moves popup under `body` element and sets it's position to absolute. Later applies properties `top` and `left` according to button offset.\r\n\r\nWhen popup close `btn-slide-active` class is removed from button. This triggers `attrchange` again. This time this class is no longer present and popup is moved back under button and it's position is set to static.","created_at":"2016-09-21T08:16:09Z","updated_at":"2016-10-25T08:57:40Z","closed_at":null,"merged_at":null,"merge_commit_sha":"75845518e4d62bd0a6083a51b86120fc93777c52","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/civicrm/civihr/pulls/1173/commits","review_comments_url":"https://api.github.com/repos/civicrm/civihr/pulls/1173/comments","review_comment_url":"https://api.github.com/repos/civicrm/civihr/pulls/comments{/number}","comments_url":"https://api.github.com/repos/civicrm/civihr/issues/1173/comments","statuses_url":"https://api.github.com/repos/civicrm/civihr/statuses/b41cab03145e3e09778cf753f9eccd1a73da538e","head":{"label":"civicrm:PCHR-1566-administer-subitems-redesign","ref":"PCHR-1566-administer-subitems-redesign","sha":"b41cab03145e3e09778cf753f9eccd1a73da538e","user":{"login":"civicrm","id":136373,"avatar_url":"https://avatars.githubusercontent.com/u/136373?v=3","gravatar_id":"","url":"https://api.github.com/users/civicrm","html_url":"https://github.com/civicrm","followers_url":"https://api.github.com/users/civicrm/followers","following_url":"https://api.github.com/users/civicrm/following{/other_user}","gists_url":"https://api.github.com/users/civicrm/gists{/gist_id}","starred_url":"https://api.github.com/users/civicrm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/civicrm/subscriptions","organizations_url":"https://api.github.com/users/civicrm/orgs","repos_url":"https://api.github.com/users/civicrm/repos","events_url":"https://api.github.com/users/civicrm/events{/privacy}","received_events_url":"https://api.github.com/users/civicrm/received_events","type":"Organization","site_admin":false},"repo":{"id":10086903,"name":"civihr","full_name":"civicrm/civihr","owner":{"login":"civicrm","id":136373,"avatar_url":"https://avatars.githubusercontent.com/u/136373?v=3","gravatar_id":"","url":"https://api.github.com/users/civicrm","html_url":"https://github.com/civicrm","followers_url":"https://api.github.com/users/civicrm/followers","following_url":"https://api.github.com/users/civicrm/following{/other_user}","gists_url":"https://api.github.com/users/civicrm/gists{/gist_id}","starred_url":"https://api.github.com/users/civicrm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/civicrm/subscriptions","organizations_url":"https://api.github.com/users/civicrm/orgs","repos_url":"https://api.github.com/users/civicrm/repos","events_url":"https://api.github.com/users/civicrm/events{/privacy}","received_events_url":"https://api.github.com/users/civicrm/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/civicrm/civihr","description":"CiviHR","fork":false,"url":"https://api.github.com/repos/civicrm/civihr","forks_url":"https://api.github.com/repos/civicrm/civihr/forks","keys_url":"https://api.github.com/repos/civicrm/civihr/keys{/key_id}","collaborators_url":"https://api.github.com/repos/civicrm/civihr/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/civicrm/civihr/teams","hooks_url":"https://api.github.com/repos/civicrm/civihr/hooks","issue_events_url":"https://api.github.com/repos/civicrm/civihr/issues/events{/number}","events_url":"https://api.github.com/repos/civicrm/civihr/events","assignees_url":"https://api.github.com/repos/civicrm/civihr/assignees{/user}","branches_url":"https://api.github.com/repos/civicrm/civihr/branches{/branch}","tags_url":"https://api.github.com/repos/civicrm/civihr/tags","blobs_url":"https://api.github.com/repos/civicrm/civihr/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/civicrm/civihr/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/civicrm/civihr/git/refs{/sha}","trees_url":"https://api.github.com/repos/civicrm/civihr/git/trees{/sha}","statuses_url":"https://api.github.com/repos/civicrm/civihr/statuses/{sha}","languages_url":"https://api.github.com/repos/civicrm/civihr/languages","stargazers_url":"https://api.github.com/repos/civicrm/civihr/stargazers","contributors_url":"https://api.github.com/repos/civicrm/civihr/contributors","subscribers_url":"https://api.github.com/repos/civicrm/civihr/subscribers","subscription_url":"https://api.github.com/repos/civicrm/civihr/subscription","commits_url":"https://api.github.com/repos/civicrm/civihr/commits{/sha}","git_commits_url":"https://api.github.com/repos/civicrm/civihr/git/commits{/sha}","comments_url":"https://api.github.com/repos/civicrm/civihr/comments{/number}","issue_comment_url":"https://api.github.com/repos/civicrm/civihr/issues/comments{/number}","contents_url":"https://api.github.com/repos/civicrm/civihr/contents/{+path}","compare_url":"https://api.github.com/repos/civicrm/civihr/compare/{base}...{head}","merges_url":"https://api.github.com/repos/civicrm/civihr/merges","archive_url":"https://api.github.com/repos/civicrm/civihr/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/civicrm/civihr/downloads","issues_url":"https://api.github.com/repos/civicrm/civihr/issues{/number}","pulls_url":"https://api.github.com/repos/civicrm/civihr/pulls{/number}","milestones_url":"https://api.github.com/repos/civicrm/civihr/milestones{/number}","notifications_url":"https://api.github.com/repos/civicrm/civihr/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/civicrm/civihr/labels{/name}","releases_url":"https://api.github.com/repos/civicrm/civihr/releases{/id}","deployments_url":"https://api.github.com/repos/civicrm/civihr/deployments","created_at":"2013-05-15T20:06:06Z","updated_at":"2016-06-29T20:52:22Z","pushed_at":"2016-10-25T08:50:46Z","git_url":"git://github.com/civicrm/civihr.git","ssh_url":"git@github.com:civicrm/civihr.git","clone_url":"https://github.com/civicrm/civihr.git","svn_url":"https://github.com/civicrm/civihr","homepage":null,"size":39909,"stargazers_count":4,"watchers_count":4,"language":"PHP","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":25,"mirror_url":null,"open_issues_count":17,"forks":25,"open_issues":17,"watchers":4,"default_branch":"staging"}},"base":{"label":"civicrm:staging","ref":"staging","sha":"ea5f72d70b1442b11459f1ab74f072d9696efbe8","user":{"login":"civicrm","id":136373,"avatar_url":"https://avatars.githubusercontent.com/u/136373?v=3","gravatar_id":"","url":"https://api.github.com/users/civicrm","html_url":"https://github.com/civicrm","followers_url":"https://api.github.com/users/civicrm/followers","following_url":"https://api.github.com/users/civicrm/following{/other_user}","gists_url":"https://api.github.com/users/civicrm/gists{/gist_id}","starred_url":"https://api.github.com/users/civicrm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/civicrm/subscriptions","organizations_url":"https://api.github.com/users/civicrm/orgs","repos_url":"https://api.github.com/users/civicrm/repos","events_url":"https://api.github.com/users/civicrm/events{/privacy}","received_events_url":"https://api.github.com/users/civicrm/received_events","type":"Organization","site_admin":false},"repo":{"id":10086903,"name":"civihr","full_name":"civicrm/civihr","owner":{"login":"civicrm","id":136373,"avatar_url":"https://avatars.githubusercontent.com/u/136373?v=3","gravatar_id":"","url":"https://api.github.com/users/civicrm","html_url":"https://github.com/civicrm","followers_url":"https://api.github.com/users/civicrm/followers","following_url":"https://api.github.com/users/civicrm/following{/other_user}","gists_url":"https://api.github.com/users/civicrm/gists{/gist_id}","starred_url":"https://api.github.com/users/civicrm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/civicrm/subscriptions","organizations_url":"https://api.github.com/users/civicrm/orgs","repos_url":"https://api.github.com/users/civicrm/repos","events_url":"https://api.github.com/users/civicrm/events{/privacy}","received_events_url":"https://api.github.com/users/civicrm/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/civicrm/civihr","description":"CiviHR","fork":false,"url":"https://api.github.com/repos/civicrm/civihr","forks_url":"https://api.github.com/repos/civicrm/civihr/forks","keys_url":"https://api.github.com/repos/civicrm/civihr/keys{/key_id}","collaborators_url":"https://api.github.com/repos/civicrm/civihr/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/civicrm/civihr/teams","hooks_url":"https://api.github.com/repos/civicrm/civihr/hooks","issue_events_url":"https://api.github.com/repos/civicrm/civihr/issues/events{/number}","events_url":"https://api.github.com/repos/civicrm/civihr/events","assignees_url":"https://api.github.com/repos/civicrm/civihr/assignees{/user}","branches_url":"https://api.github.com/repos/civicrm/civihr/branches{/branch}","tags_url":"https://api.github.com/repos/civicrm/civihr/tags","blobs_url":"https://api.github.com/repos/civicrm/civihr/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/civicrm/civihr/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/civicrm/civihr/git/refs{/sha}","trees_url":"https://api.github.com/repos/civicrm/civihr/git/trees{/sha}","statuses_url":"https://api.github.com/repos/civicrm/civihr/statuses/{sha}","languages_url":"https://api.github.com/repos/civicrm/civihr/languages","stargazers_url":"https://api.github.com/repos/civicrm/civihr/stargazers","contributors_url":"https://api.github.com/repos/civicrm/civihr/contributors","subscribers_url":"https://api.github.com/repos/civicrm/civihr/subscribers","subscription_url":"https://api.github.com/repos/civicrm/civihr/subscription","commits_url":"https://api.github.com/repos/civicrm/civihr/commits{/sha}","git_commits_url":"https://api.github.com/repos/civicrm/civihr/git/commits{/sha}","comments_url":"https://api.github.com/repos/civicrm/civihr/comments{/number}","issue_comment_url":"https://api.github.com/repos/civicrm/civihr/issues/comments{/number}","contents_url":"https://api.github.com/repos/civicrm/civihr/contents/{+path}","compare_url":"https://api.github.com/repos/civicrm/civihr/compare/{base}...{head}","merges_url":"https://api.github.com/repos/civicrm/civihr/merges","archive_url":"https://api.github.com/repos/civicrm/civihr/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/civicrm/civihr/downloads","issues_url":"https://api.github.com/repos/civicrm/civihr/issues{/number}","pulls_url":"https://api.github.com/repos/civicrm/civihr/pulls{/number}","milestones_url":"https://api.github.com/repos/civicrm/civihr/milestones{/number}","notifications_url":"https://api.github.com/repos/civicrm/civihr/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/civicrm/civihr/labels{/name}","releases_url":"https://api.github.com/repos/civicrm/civihr/releases{/id}","deployments_url":"https://api.github.com/repos/civicrm/civihr/deployments","created_at":"2013-05-15T20:06:06Z","updated_at":"2016-06-29T20:52:22Z","pushed_at":"2016-10-25T08:50:46Z","git_url":"git://github.com/civicrm/civihr.git","ssh_url":"git@github.com:civicrm/civihr.git","clone_url":"https://github.com/civicrm/civihr.git","svn_url":"https://github.com/civicrm/civihr","homepage":null,"size":39909,"stargazers_count":4,"watchers_count":4,"language":"PHP","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":25,"mirror_url":null,"open_issues_count":17,"forks":25,"open_issues":17,"watchers":4,"default_branch":"staging"}},"_links":{"self":{"href":"https://api.github.com/repos/civicrm/civihr/pulls/1173"},"html":{"href":"https://github.com/civicrm/civihr/pull/1173"},"issue":{"href":"https://api.github.com/repos/civicrm/civihr/issues/1173"},"comments":{"href":"https://api.github.com/repos/civicrm/civihr/issues/1173/comments"},"review_comments":{"href":"https://api.github.com/repos/civicrm/civihr/pulls/1173/comments"},"review_comment":{"href":"https://api.github.com/repos/civicrm/civihr/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/civicrm/civihr/pulls/1173/commits"},"statuses":{"href":"https://api.github.com/repos/civicrm/civihr/statuses/b41cab03145e3e09778cf753f9eccd1a73da538e"}}}}
{"actor":{"display_login":"AkA84"}}