Repository: zeppelin Updated Branches: refs/heads/master 1c7d8fb0f -> cc39f85a7
[ZEPPELIN-1820] Fix action bar layout broken issue ### What is this PR for? Action bar buttons and paragraph are overlapped when the browser width is small. To fix this issue, this PR replaces `height` css property for action bar with `min-height` and adds a binding code for `window resize` to dynamically change the paragraph position based on the height of action bar. ### What type of PR is it? Bug Fix ### Todos ### What is the Jira issue? https://issues.apache.org/jira/browse/ZEPPELIN-1820 ### How should this be tested? Change browser width ### Screenshots (if appropriate) [Before]  [After]  ### Questions: * Does the licenses files need update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Author: Sangwoo Lee <[email protected]> Closes #1771 from marchpig/ZEPPELIN-1820 and squashes the following commits: 01e2a98 [Sangwoo Lee] Fix action bar layout broken issue Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/cc39f85a Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/cc39f85a Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/cc39f85a Branch: refs/heads/master Commit: cc39f85a7adea2ded192dd49dd4105c2183fff5c Parents: 1c7d8fb Author: Sangwoo Lee <[email protected]> Authored: Fri Dec 16 01:27:49 2016 +0900 Committer: Lee moon soo <[email protected]> Committed: Fri Dec 16 06:28:40 2016 -0800 ---------------------------------------------------------------------- zeppelin-web/src/app/notebook/notebook.controller.js | 5 +++++ zeppelin-web/src/app/notebook/notebook.css | 2 +- zeppelin-web/src/app/notebook/notebook.html | 4 ++-- 3 files changed, 8 insertions(+), 3 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/cc39f85a/zeppelin-web/src/app/notebook/notebook.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/notebook.controller.js b/zeppelin-web/src/app/notebook/notebook.controller.js index 8bec1aa..09d1878 100644 --- a/zeppelin-web/src/app/notebook/notebook.controller.js +++ b/zeppelin-web/src/app/notebook/notebook.controller.js @@ -910,6 +910,11 @@ document.removeEventListener('click', $scope.focusParagraphOnClick); document.removeEventListener('keydown', $scope.keyboardShortcut); }); + + angular.element(window).bind('resize', function() { + const actionbarHeight = document.getElementById('actionbar').lastElementChild.clientHeight; + angular.element(document.getElementById('content')).css('padding-top', actionbarHeight - 20); + }); } })(); http://git-wip-us.apache.org/repos/asf/zeppelin/blob/cc39f85a/zeppelin-web/src/app/notebook/notebook.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css index 1f78a7e..8c48528 100644 --- a/zeppelin-web/src/app/notebook/notebook.css +++ b/zeppelin-web/src/app/notebook/notebook.css @@ -133,7 +133,7 @@ position: fixed; top: 50px; width: 100%; - height: 54px; + min-height: 54px; z-index: 10001; } http://git-wip-us.apache.org/repos/asf/zeppelin/blob/cc39f85a/zeppelin-web/src/app/notebook/notebook.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/notebook.html b/zeppelin-web/src/app/notebook/notebook.html index 9717ba0..78a556b 100644 --- a/zeppelin-web/src/app/notebook/notebook.html +++ b/zeppelin-web/src/app/notebook/notebook.html @@ -12,8 +12,8 @@ See the License for the specific language governing permissions and limitations under the License. --> <!-- Here the controller <NotebookCtrl> is not needed because explicitly set in the app.js (route) --> -<div ng-include src="'app/notebook/notebook-actionBar.html'"></div> -<div class="notebookContent"> +<div id="actionbar" ng-include src="'app/notebook/notebook-actionBar.html'"></div> +<div id="content" class="notebookContent"> <!-- settings --> <div ng-if="showSetting" class="setting"> <div>
