Просмотр исходного кода

Small html markup/css simplification

Torkel Ödegaard 11 лет назад
Родитель
Сommit
061d1262d4
3 измененных файлов с 98 добавлено и 102 удалено
  1. 96 100
      src/app/partials/dashboard.html
  2. 1 1
      src/css/less/grafana.less
  3. 1 1
      src/css/less/overrides.less

+ 96 - 100
src/app/partials/dashboard.html

@@ -7,112 +7,108 @@
   </div>
 
   <div class="clearfix"></div>
-  <div class="container-fluid main">
-    <div>
-      <div class="grafana-container container">
-        <!-- Rows -->
-        <div class="grafana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
-          <div class="row-control">
-            <div class="row-control-inner" style="padding:0px;margin:0px;position:relative;">
-              <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
-								<div class="row-close-buttons">
-									<span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
-										<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
-									</span>
-									<span class="row-button bgPrimary" ng-click="toggle_row(row)">
-										<i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
-									</span>
-								</div>
-                <span class="row-text pointer" ng-click="toggle_row(row)" ng-bind="row.title"></span>
-              </div>
-              <div class="row-open" ng-show="!row.collapse">
-                <div class='row-tab bgPrimary' ng-click="toggle_row(row)">
-                  <span class="row-tab-button">
-                    <i class="icon-caret-right"></i>
-                  </span>
-                </div>
-                <div class='row-tab bgSuccess dropdown' ng-show="row.editable">
-                  <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
-                    <i class="icon-th-list"></i>
-                  </span>
-                  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
-                    <li class="dropdown-submenu">
-                    <a href="javascript:void(0);">Add Panel</a>
-                      <ul class="dropdown-menu">
-												<li bindonce ng-repeat="name in panelNames">
-													<a ng-click="add_panel_default(name)" bo-text="name"></a>
-												</li>
-                      </ul>
-                    </li>
-                    <li class="dropdown-submenu">
-                    <a href="javascript:void(0);">Set height</a>
-                      <ul class="dropdown-menu">
-                      <li><a ng-click="set_height('100px')">100 px</a></li>
-                      <li><a ng-click="set_height('150px')">150 px</a></li>
-                      <li><a ng-click="set_height('200px')">200 px</a></li>
-                      <li><a ng-click="set_height('250px')">250 px</a></li>
-                      <li><a ng-click="set_height('300px')">300 px</a></li>
-                      <li><a ng-click="set_height('350px')">350 px</a></li>
-                      <li><a ng-click="set_height('450px')">450 px</a></li>
-                      <li><a ng-click="set_height('500px')">500 px</a></li>
-                      <li><a ng-click="set_height('600px')">600 px</a></li>
-                      <li><a ng-click="set_height('700px')">700 px</a></li>
-                      </ul>
-                    </li>
-                    <li class="dropdown-submenu">
-                    <a href="javascript:void(0);">Move</a>
-                      <ul class="dropdown-menu">
-                      <li><a ng-click="move_row(-1)">Up</a></li>
-                      <li><a ng-click="move_row(1)">Down</a></li>
-                      </ul>
-                    </li>
-                    <li>
-                      <a config-modal="app/partials/roweditor.html">Row editor</a>
-                    </li>
-                    <li>
-                      <a ng-click="delete_row()">Delete row</a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
 
-            <div style="padding-top:0px" ng-if="!row.collapse">
-							<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title">
-							</div>
+	<div class="main-view-container">
+		<!-- Rows -->
+		<div class="grafana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
+			<div class="row-control">
+				<div class="row-control-inner" style="padding:0px;margin:0px;position:relative;">
+					<div class="row-close" ng-show="row.collapse" data-placement="bottom" >
+						<div class="row-close-buttons">
+							<span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
+								<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
+							</span>
+							<span class="row-button bgPrimary" ng-click="toggle_row(row)">
+								<i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
+							</span>
+						</div>
+						<span class="row-text pointer" ng-click="toggle_row(row)" ng-bind="row.title"></span>
+					</div>
+					<div class="row-open" ng-show="!row.collapse">
+						<div class='row-tab bgPrimary' ng-click="toggle_row(row)">
+							<span class="row-tab-button">
+								<i class="icon-caret-right"></i>
+							</span>
+						</div>
+						<div class='row-tab bgSuccess dropdown' ng-show="row.editable">
+							<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
+								<i class="icon-th-list"></i>
+							</span>
+							<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
+								<li class="dropdown-submenu">
+									<a href="javascript:void(0);">Add Panel</a>
+									<ul class="dropdown-menu">
+										<li bindonce ng-repeat="name in panelNames">
+											<a ng-click="add_panel_default(name)" bo-text="name"></a>
+										</li>
+									</ul>
+								</li>
+								<li class="dropdown-submenu">
+									<a href="javascript:void(0);">Set height</a>
+									<ul class="dropdown-menu">
+										<li><a ng-click="set_height('100px')">100 px</a></li>
+										<li><a ng-click="set_height('150px')">150 px</a></li>
+										<li><a ng-click="set_height('200px')">200 px</a></li>
+										<li><a ng-click="set_height('250px')">250 px</a></li>
+										<li><a ng-click="set_height('300px')">300 px</a></li>
+										<li><a ng-click="set_height('350px')">350 px</a></li>
+										<li><a ng-click="set_height('450px')">450 px</a></li>
+										<li><a ng-click="set_height('500px')">500 px</a></li>
+										<li><a ng-click="set_height('600px')">600 px</a></li>
+										<li><a ng-click="set_height('700px')">700 px</a></li>
+									</ul>
+								</li>
+								<li class="dropdown-submenu">
+									<a href="javascript:void(0);">Move</a>
+									<ul class="dropdown-menu">
+										<li><a ng-click="move_row(-1)">Up</a></li>
+										<li><a ng-click="move_row(1)">Down</a></li>
+									</ul>
+								</li>
+								<li>
+									<a config-modal="app/partials/roweditor.html">Row editor</a>
+								</li>
+								<li>
+									<a ng-click="delete_row()">Delete row</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
 
-              <!-- Panels -->
-							<div ng-repeat="(name, panel) in row.panels"
-									 class="panel nospace"
-									 style="position:relative"
-									 data-drop="true"
-									 panel-width
-									 ng-model="panel"
-									 data-jqyoui-options
-									 jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}"
-									 ng-class="{'dragInProgress':dashboard.$$panelDragging}">
-                <grafana-panel type="panel.type" ng-cloak></grafana-panel>
-              </div>
+				<div style="padding-top:0px" ng-if="!row.collapse">
+					<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title">
+					</div>
 
-              <div panel-drop-zone class="panel dragInProgress" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
-              </div>
+					<!-- Panels -->
+					<div ng-repeat="(name, panel) in row.panels"
+						class="panel nospace"
+						style="position:relative"
+						data-drop="true"
+						panel-width
+						ng-model="panel"
+						data-jqyoui-options
+						jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}"
+						ng-class="{'dragInProgress':dashboard.$$panelDragging}">
+						<grafana-panel type="panel.type" ng-cloak></grafana-panel>
+					</div>
 
-              <div class="clearfix"></div>
-              </div>
-            </div>
-          </div>
-        </div>
+					<div panel-drop-zone class="panel dragInProgress" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
+					</div>
 
+					<div class="clearfix"></div>
+				</div>
+			</div>
+		</div>
+	</div>
 
-      <div ng-show='dashboard.editable' class="row-fluid add-row-panel-hint">
-        <div class="span12" style="text-align:right;">
-          <span style="margin-right: 10px;" ng-click="add_row_default()" class="pointer btn btn-info btn-mini">
-            <span><i class="icon-plus-sign"></i> ADD A ROW</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div ng-show='dashboard.editable' class="row-fluid add-row-panel-hint">
+		<div class="span12" style="text-align:right;">
+			<span style="margin-right: 10px;" ng-click="add_row_default()" class="pointer btn btn-info btn-mini">
+				<span><i class="icon-plus-sign"></i> ADD A ROW</span>
+			</span>
+		</div>
+	</div>
 
 	<div ng-include="'app/partials/console.html'" ng-if="consoleEnabled">
 	</div>

+ 1 - 1
src/css/less/grafana.less

@@ -179,7 +179,7 @@
   }
 }
 
-.dashboard-fullscreen .container-fluid.main {
+.dashboard-fullscreen .main-view-container {
   height: 0px;
   width: 0px;
   position: fixed;

+ 1 - 1
src/css/less/overrides.less

@@ -14,7 +14,7 @@
   padding-right: 0px;
 }
 
-.container.grafana-container {
+.main-view-container {
   padding: 5px 10px;
   width: 100%;
   box-sizing: border-box;