big improvement to fullscreen edit/view mode

src/app/panels/graphite/module.html

@@ -1,7 +1,7 @@
 <div  ng-controller='graphite'
       ng-init="init()"
       style="min-height:{{panel.height || row.height}}"
-      ng-class='{"panel-fullscreen": showFullscreen}'>
+      ng-class='{"panel-fullscreen": fullscreen}'>
 
   <style>
     .histogram-legend {

src/app/panels/graphite/module.js

@@ -240,7 +240,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     };
 
     $scope.remove_panel_from_row = function(row, panel) {
-      if ($scope.showFullscreen) {
+      if ($scope.fullscreen) {
         $rootScope.$emit('panel-fullscreen-exit');
       }
       else {
@@ -385,7 +385,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
       var closeEditMode = $rootScope.$on('panel-fullscreen-exit', function() {
         $scope.inEditMode = false;
-        $scope.showFullscreen = false;
+        $scope.fullscreen = false;
         $scope.row.height = oldHeight;
 
         closeEditMode();
@@ -395,8 +395,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         });
       });
 
+      $(window).scrollTop(0);
+
       $scope.inEditMode = options.edit;
-      $scope.showFullscreen = true;
+      $scope.fullscreen = true;
       $rootScope.$emit('panel-fullscreen-enter');
 
       $timeout(function() {
@@ -405,7 +407,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     };
 
     $scope.openConfigureModal = function() {
-      if ($scope.showFullscreen) {
+      if ($scope.fullscreen) {
         $rootScope.$emit('panel-fullscreen-exit');
         return;
       }
@@ -457,7 +459,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     };
 
     $scope.toggleFullscreen = function(evt) {
-      if ($scope.showFullscreen) {
+      if ($scope.fullscreen) {
         $rootScope.$emit('panel-fullscreen-exit');
         return;
       }

src/app/partials/dashboard.html

@@ -12,8 +12,6 @@
 <div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
   <div class="row-fluid">
     <div class="row-fluid container" style="margin-top:10px; width:98%">
-      <div ng-show="fullscreenPanelExists" class="modal-backdrop fade in"></div>
-
       <!-- Rows -->
       <div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
         <div class="row-control">

src/index.html

@@ -41,7 +41,7 @@
       </div>
     </div>
 
-    <div ng-view></div>
+    <div ng-view ng-class="{'dashboard-fullscreen': fullscreenPanelExists}"></div>
 
   </body>
 </html>

src/vendor/bootstrap/less/grafana.less

@@ -122,18 +122,25 @@
 
 .panel-fullscreen {
   z-index: 1500;
-  display: block;
+  display: block important;
   position: fixed;
-  left: 20px;
-  right: 20px;
-  top: 25px;
-  bottom: 25px;
+  left: 0px;
+  right: 0px;
+  top: 49px;
+  bottom: 0px;
   outline: 1px solid #101214;
   border-top: 1px solid #3e444c;
   padding: 0 10px;
   background: @kibanaPanelBackground;
 }
 
+.dashboard-fullscreen .container-fluid.main {
+  height: 0px;
+  width: 0px;
+  position: fixed;
+  right: -10000px;
+}
+
 .grafana-legend-container {
   margin: 4px 15px;
   text-align: left;