Skip to content

N
nexpie-grafana-theme
Commit 48ae9304 by Torkel Ödegaard Committed by GitHub
Options

Panels: No title will no longer make panel header take up space (#16884) 

* Panels: Initial poc of no panel titles

* moving panel-container to DashboardPanel

* Starting to work

* Gauge fix

* Panels: tweaked panel padding and title z-index stuff

* Panels: changed panel padding a bit and simplified it by having same padding in vertical and horizontal

* Lots of tweaks to panel padding related stuff

* Updated snapshot

* Added test dashboard

* Final refactorings

* Trim title befgor applying panel-container--no-title class

* Remove unnecessary type annotation

* Panels: hasTitle no need to trim

* Gauge: fixed font family
parent 32a45077
Showing with 273 additions and 236 deletions
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
...@@ -182,10 +182,8 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -182,10 +182,8 @@ exports[`Render should render with base threshold 1`] = `
"sm": "24px", "sm": "24px",
}, },
"name": "Grafana Dark", "name": "Grafana Dark",
"panelPadding": Object { "panelHeaderHeight": 28,
"horizontal": 16, "panelPadding": 8,
"vertical": 8,
},
"spacing": Object { "spacing": Object {
"d": "14px", "d": "14px",
"gutter": "30px", "gutter": "30px",
...@@ -345,10 +343,8 @@ exports[`Render should render with base threshold 1`] = ` ...@@ -345,10 +343,8 @@ exports[`Render should render with base threshold 1`] = `
"sm": "24px", "sm": "24px",
}, },
"name": "Grafana Dark", "name": "Grafana Dark",
"panelPadding": Object { "panelHeaderHeight": 28,
"horizontal": 16, "panelPadding": 8,
"vertical": 8,
},
"spacing": Object { "spacing": Object {
"d": "14px", "d": "14px",
"gutter": "30px", "gutter": "30px",
......
packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
...@@ -74,12 +74,12 @@ export class VizRepeater<T> extends PureComponent<Props<T>, State<T>> { ...@@ -74,12 +74,12 @@ export class VizRepeater<T> extends PureComponent<Props<T>, State<T>> {
if (orientation === VizOrientation.Horizontal) { if (orientation === VizOrientation.Horizontal) {
repeaterStyle.flexDirection = 'column'; repeaterStyle.flexDirection = 'column';
itemStyles.margin = `${itemSpacing / 2}px 0`; itemStyles.marginBottom = `${itemSpacing}px`;
vizWidth = width; vizWidth = width;
vizHeight = height / values.length - itemSpacing; vizHeight = height / values.length - itemSpacing;
} else { } else {
repeaterStyle.flexDirection = 'row'; repeaterStyle.flexDirection = 'row';
itemStyles.margin = `0 ${itemSpacing / 2}px`; itemStyles.marginRight = `${itemSpacing}px`;
vizHeight = height; vizHeight = height;
vizWidth = width / values.length - itemSpacing; vizWidth = width / values.length - itemSpacing;
} }
......
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
...@@ -197,9 +197,9 @@ $side-menu-width: 60px; ...@@ -197,9 +197,9 @@ $side-menu-width: 60px;
// dashboard // dashboard
$dashboard-padding: $space-md; $dashboard-padding: $space-md;
$panel-padding: 0 ${theme.panelPadding.horizontal}px ${theme.panelPadding.vertical}px ${ $panel-padding: ${theme.panelPadding}px;
theme.panelPadding.horizontal $panel-header-height: ${theme.panelHeaderHeight}px;
}px; $panel-header-z-index: 10;
// tabs // tabs
$tabs-padding: 10px 15px 9px; $tabs-padding: 10px 15px 9px;
......
packages/grafana-ui/src/themes/default.ts
...@@ -72,10 +72,8 @@ const theme: GrafanaThemeCommons = { ...@@ -72,10 +72,8 @@ const theme: GrafanaThemeCommons = {
md: '32px', md: '32px',
lg: '48px', lg: '48px',
}, },
panelPadding: { panelPadding: 8,
horizontal: 16, panelHeaderHeight: 28,
vertical: 8,
},
zIndex: { zIndex: {
dropdown: '1000', dropdown: '1000',
navbarFixed: '1020', navbarFixed: '1020',
......
packages/grafana-ui/src/types/theme.ts
...@@ -77,10 +77,8 @@ export interface GrafanaThemeCommons { ...@@ -77,10 +77,8 @@ export interface GrafanaThemeCommons {
md: string; md: string;
lg: string; lg: string;
}; };
panelPadding: { panelPadding: number;
horizontal: number; panelHeaderHeight: number;
vertical: number;
};
zIndex: { zIndex: {
dropdown: string; dropdown: string;
navbarFixed: string; navbarFixed: string;
......
public/app/core/constants.ts
...@@ -9,8 +9,4 @@ export const MIN_PANEL_HEIGHT = GRID_CELL_HEIGHT * 3; ...@@ -9,8 +9,4 @@ export const MIN_PANEL_HEIGHT = GRID_CELL_HEIGHT * 3;
export const LS_PANEL_COPY_KEY = 'panel-copy'; export const LS_PANEL_COPY_KEY = 'panel-copy';
export const DASHBOARD_TOOLBAR_HEIGHT = 55;
export const DASHBOARD_TOP_PADDING = 20;
export const PANEL_HEADER_HEIGHT = 27;
export const PANEL_BORDER = 2; export const PANEL_BORDER = 2;
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
...@@ -129,16 +129,21 @@ export class DashboardPanel extends PureComponent<Props, State> { ...@@ -129,16 +129,21 @@ export class DashboardPanel extends PureComponent<Props, State> {
this.props.dashboard.setPanelFocus(0); this.props.dashboard.setPanelFocus(0);
}; };
renderReactPanel() { renderPanel() {
const { dashboard, panel, isFullscreen, isInView } = this.props; const { dashboard, panel, isFullscreen, isInView } = this.props;
const { plugin } = this.state; const { plugin } = this.state;
if (plugin.angularPanelCtrl) {
return <div ref={element => (this.element = element)} className="panel-height-helper" />;
}
return ( return (
<AutoSizer> <AutoSizer>
{({ width, height }) => { {({ width, height }) => {
if (width === 0) { if (width === 0) {
return null; return null;
} }
return ( return (
<PanelChrome <PanelChrome
plugin={plugin} plugin={plugin}
...@@ -155,10 +160,6 @@ export class DashboardPanel extends PureComponent<Props, State> { ...@@ -155,10 +160,6 @@ export class DashboardPanel extends PureComponent<Props, State> {
); );
} }
renderAngularPanel() {
return <div ref={element => (this.element = element)} className="panel-height-helper" />;
}
render() { render() {
const { panel, dashboard, isFullscreen, isEditing } = this.props; const { panel, dashboard, isFullscreen, isEditing } = this.props;
const { plugin, angularPanel, isLazy } = this.state; const { plugin, angularPanel, isLazy } = this.state;
...@@ -177,7 +178,11 @@ export class DashboardPanel extends PureComponent<Props, State> { ...@@ -177,7 +178,11 @@ export class DashboardPanel extends PureComponent<Props, State> {
return null; return null;
} }
const containerClass = classNames({ 'panel-editor-container': isEditing, 'panel-height-helper': !isEditing }); const editorContainerClasses = classNames({
'panel-editor-container': isEditing,
'panel-height-helper': !isEditing,
});
const panelWrapperClass = classNames({ const panelWrapperClass = classNames({
'panel-wrapper': true, 'panel-wrapper': true,
'panel-wrapper--edit': isEditing, 'panel-wrapper--edit': isEditing,
...@@ -185,7 +190,7 @@ export class DashboardPanel extends PureComponent<Props, State> { ...@@ -185,7 +190,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
}); });
return ( return (
<div className={containerClass}> <div className={editorContainerClasses}>
<PanelResizer <PanelResizer
isEditing={isEditing} isEditing={isEditing}
panel={panel} panel={panel}
...@@ -196,7 +201,7 @@ export class DashboardPanel extends PureComponent<Props, State> { ...@@ -196,7 +201,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
onMouseLeave={this.onMouseLeave} onMouseLeave={this.onMouseLeave}
style={styles} style={styles}
> >
{plugin.angularPanelCtrl ? this.renderAngularPanel() : this.renderReactPanel()} {this.renderPanel()}
</div> </div>
)} )}
/> />
......
public/app/features/dashboard/dashgrid/PanelChrome.tsx
// Libraries // Libraries
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classnames';
// Services import { Unsubscribable } from 'rxjs';
import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
// Components // Components
import { PanelHeader } from './PanelHeader/PanelHeader'; import { PanelHeader } from './PanelHeader/PanelHeader';
import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary'; import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
// Utils // Utils & Services
import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel'; import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
import { PANEL_HEADER_HEIGHT } from 'app/core/constants'; import { applyPanelTimeOverrides, calculateInnerPanelHeight } from 'app/features/dashboard/utils/panel';
import { profiler } from 'app/core/profiler'; import { profiler } from 'app/core/profiler';
import { getProcessedSeriesData } from '../state/PanelQueryState';
import templateSrv from 'app/features/templating/template_srv';
import config from 'app/core/config'; import config from 'app/core/config';
// Types // Types
...@@ -19,11 +20,6 @@ import { DashboardModel, PanelModel } from '../state'; ...@@ -19,11 +20,6 @@ import { DashboardModel, PanelModel } from '../state';
import { LoadingState, PanelData, PanelPlugin } from '@grafana/ui'; import { LoadingState, PanelData, PanelPlugin } from '@grafana/ui';
import { ScopedVars } from '@grafana/ui'; import { ScopedVars } from '@grafana/ui';
import templateSrv from 'app/features/templating/template_srv';
import { getProcessedSeriesData } from '../state/PanelQueryState';
import { Unsubscribable } from 'rxjs';
const DEFAULT_PLUGIN_ERROR = 'Error in plugin'; const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
export interface Props { export interface Props {
...@@ -232,7 +228,7 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -232,7 +228,7 @@ export class PanelChrome extends PureComponent<Props, State> {
renderPanel(width: number, height: number): JSX.Element { renderPanel(width: number, height: number): JSX.Element {
const { panel, plugin } = this.props; const { panel, plugin } = this.props;
const { renderCounter, data, isFirstLoad } = this.state; const { renderCounter, data, isFirstLoad } = this.state;
const PanelComponent = plugin.panel; const { theme } = config;
// This is only done to increase a counter that is used by backend // This is only done to increase a counter that is used by backend
// image rendering (phantomjs/headless chrome) to know when to capture image // image rendering (phantomjs/headless chrome) to know when to capture image
...@@ -246,6 +242,9 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -246,6 +242,9 @@ export class PanelChrome extends PureComponent<Props, State> {
return this.renderLoadingState(); return this.renderLoadingState();
} }
const PanelComponent = plugin.panel;
const innerPanelHeight = calculateInnerPanelHeight(panel, height);
return ( return (
<> <>
{loading === LoadingState.Loading && this.renderLoadingState()} {loading === LoadingState.Loading && this.renderLoadingState()}
...@@ -254,8 +253,8 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -254,8 +253,8 @@ export class PanelChrome extends PureComponent<Props, State> {
data={data} data={data}
timeRange={data.request ? data.request.range : this.timeSrv.timeRange()} timeRange={data.request ? data.request.range : this.timeSrv.timeRange()}
options={panel.getOptions(plugin.defaults)} options={panel.getOptions(plugin.defaults)}
width={width - 2 * config.theme.panelPadding.horizontal} width={width - theme.panelPadding * 2}
height={height - PANEL_HEADER_HEIGHT - config.theme.panelPadding.vertical} height={innerPanelHeight}
renderCounter={renderCounter} renderCounter={renderCounter}
replaceVariables={this.replaceVariables} replaceVariables={this.replaceVariables}
onOptionsChange={this.onOptionsChange} onOptionsChange={this.onOptionsChange}
...@@ -278,7 +277,13 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -278,7 +277,13 @@ export class PanelChrome extends PureComponent<Props, State> {
const { errorMessage, data } = this.state; const { errorMessage, data } = this.state;
const { transparent } = panel; const { transparent } = panel;
const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`; const containerClassNames = classNames({
'panel-container': true,
'panel-container--absolute': true,
'panel-container--no-title': !panel.hasTitle(),
'panel-transparent': transparent,
});
return ( return (
<div className={containerClassNames}> <div className={containerClassNames}>
<PanelHeader <PanelHeader
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
...@@ -72,10 +72,13 @@ export class PanelHeader extends Component<Props, State> { ...@@ -72,10 +72,13 @@ export class PanelHeader extends Component<Props, State> {
render() { render() {
const { panel, dashboard, timeInfo, scopedVars, error, isFullscreen } = this.props; const { panel, dashboard, timeInfo, scopedVars, error, isFullscreen } = this.props;
const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
const title = templateSrv.replaceWithText(panel.title, scopedVars); const title = templateSrv.replaceWithText(panel.title, scopedVars);
const panelHeaderClass = classNames({
'panel-header': true,
'grid-drag-handle': !isFullscreen,
});
return ( return (
<> <>
<PanelHeaderCorner <PanelHeaderCorner
......
public/app/features/dashboard/state/PanelModel.ts
...@@ -326,6 +326,10 @@ export class PanelModel { ...@@ -326,6 +326,10 @@ export class PanelModel {
return this.queryRunner; return this.queryRunner;
} }
hasTitle() {
return !!this.title.length;
}
destroy() { destroy() {
this.events.emit('panel-teardown'); this.events.emit('panel-teardown');
this.events.removeAllListeners(); this.events.removeAllListeners();
......
public/app/features/dashboard/utils/panel.ts
...@@ -11,12 +11,13 @@ import { isString as _isString } from 'lodash'; ...@@ -11,12 +11,13 @@ import { isString as _isString } from 'lodash';
import * as rangeUtil from '@grafana/ui/src/utils/rangeutil'; import * as rangeUtil from '@grafana/ui/src/utils/rangeutil';
import * as dateMath from '@grafana/ui/src/utils/datemath'; import * as dateMath from '@grafana/ui/src/utils/datemath';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import config from 'app/core/config';
// Services // Services
import templateSrv from 'app/features/templating/template_srv'; import templateSrv from 'app/features/templating/template_srv';
// Constants // Constants
import { LS_PANEL_COPY_KEY } from 'app/core/constants'; import { LS_PANEL_COPY_KEY, PANEL_BORDER } from 'app/core/constants';
export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: boolean) => { export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: boolean) => {
// confirm deletion // confirm deletion
...@@ -169,3 +170,12 @@ export function getResolution(panel: PanelModel): number { ...@@ -169,3 +170,12 @@ export function getResolution(panel: PanelModel): number {
return panel.maxDataPoints ? panel.maxDataPoints : Math.ceil(width * (panel.gridPos.w / 24)); return panel.maxDataPoints ? panel.maxDataPoints : Math.ceil(width * (panel.gridPos.w / 24));
} }
export function calculateInnerPanelHeight(panel: PanelModel, containerHeight: number): number {
return (
containerHeight -
(panel.hasTitle() ? config.theme.panelHeaderHeight : 0) -
config.theme.panelPadding * 2 -
PANEL_BORDER
);
}
public/app/features/panel/panel_ctrl.ts
...@@ -11,9 +11,10 @@ import { ...@@ -11,9 +11,10 @@ import {
copyPanel as copyPanelUtil, copyPanel as copyPanelUtil,
editPanelJson as editPanelJsonUtil, editPanelJson as editPanelJsonUtil,
sharePanel as sharePanelUtil, sharePanel as sharePanelUtil,
calculateInnerPanelHeight,
} from 'app/features/dashboard/utils/panel'; } from 'app/features/dashboard/utils/panel';
import { GRID_COLUMN_COUNT, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants'; import { GRID_COLUMN_COUNT } from 'app/core/constants';
export class PanelCtrl { export class PanelCtrl {
panel: any; panel: any;
...@@ -202,7 +203,7 @@ export class PanelCtrl { ...@@ -202,7 +203,7 @@ export class PanelCtrl {
calculatePanelHeight(containerHeight) { calculatePanelHeight(containerHeight) {
this.containerHeight = containerHeight; this.containerHeight = containerHeight;
this.height = this.containerHeight - (PANEL_BORDER + PANEL_HEADER_HEIGHT); this.height = calculateInnerPanelHeight(this.panel, containerHeight);
} }
render(payload?) { render(payload?) {
......
public/app/features/panel/panel_directive.ts
...@@ -6,7 +6,7 @@ import baron from 'baron'; ...@@ -6,7 +6,7 @@ import baron from 'baron';
const module = angular.module('grafana.directives'); const module = angular.module('grafana.directives');
const panelTemplate = ` const panelTemplate = `
<div class="panel-container"> <div class="panel-container" ng-class="{'panel-container--no-title': !ctrl.panel.title.length}">
<div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}"> <div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}">
<span class="panel-info-corner"> <span class="panel-info-corner">
<i class="fa"></i> <i class="fa"></i>
......
public/app/plugins/panel/singlestat/module.ts
...@@ -430,7 +430,7 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -430,7 +430,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
const plotCanvas = $('<div></div>'); const plotCanvas = $('<div></div>');
const plotCss = { const plotCss = {
top: '10px', top: '5px',
margin: 'auto', margin: 'auto',
position: 'relative', position: 'relative',
height: height * 0.9 + 'px', height: height * 0.9 + 'px',
...@@ -494,7 +494,7 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -494,7 +494,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
}, },
font: { font: {
size: fontSize, size: fontSize,
family: '"Helvetica Neue", Helvetica, Arial, sans-serif', family: config.theme.typography.fontFamily.sansSerif,
}, },
}, },
show: true, show: true,
...@@ -512,7 +512,7 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -512,7 +512,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
} }
function addSparkline() { function addSparkline() {
const width = elem.width() + 20; const width = elem.width();
if (width < 30) { if (width < 30) {
// element has not gotten it's width yet // element has not gotten it's width yet
// delay sparkline render // delay sparkline render
...@@ -524,17 +524,16 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -524,17 +524,16 @@ class SingleStatCtrl extends MetricsPanelCtrl {
const plotCanvas = $('<div></div>'); const plotCanvas = $('<div></div>');
const plotCss: any = {}; const plotCss: any = {};
plotCss.position = 'absolute'; plotCss.position = 'absolute';
plotCss.bottom = '0px';
if (panel.sparkline.full) { if (panel.sparkline.full) {
plotCss.bottom = '5px'; plotCss.left = '0px';
plotCss.left = '-5px'; plotCss.width = width + 'px';
plotCss.width = width - 10 + 'px';
const dynamicHeightMargin = height <= 100 ? 5 : Math.round(height / 100) * 15 + 5; const dynamicHeightMargin = height <= 100 ? 5 : Math.round(height / 100) * 15 + 5;
plotCss.height = height - dynamicHeightMargin + 'px'; plotCss.height = height - dynamicHeightMargin + 'px';
} else { } else {
plotCss.bottom = '0px'; plotCss.left = '0px';
plotCss.left = '-5px'; plotCss.width = width + 'px';
plotCss.width = width - 10 + 'px';
plotCss.height = Math.floor(height * 0.25) + 'px'; plotCss.height = Math.floor(height * 0.25) + 'px';
} }
......
public/sass/_grafana.scss
...@@ -99,6 +99,7 @@ ...@@ -99,6 +99,7 @@
@import 'components/page_loader'; @import 'components/page_loader';
@import 'components/toggle_button_group'; @import 'components/toggle_button_group';
@import 'components/popover-box'; @import 'components/popover-box';
@import 'components/panel_header';
// LOAD @grafana/ui components // LOAD @grafana/ui components
@import '../../packages/grafana-ui/src/index'; @import '../../packages/grafana-ui/src/index';
......
public/sass/_variables.generated.scss
...@@ -200,7 +200,9 @@ $side-menu-width: 60px; ...@@ -200,7 +200,9 @@ $side-menu-width: 60px;
// dashboard // dashboard
$dashboard-padding: $space-md; $dashboard-padding: $space-md;
$panel-padding: 0 16px 8px 16px; $panel-padding: 8px;
$panel-header-height: 28px;
$panel-header-z-index: 10;
// tabs // tabs
$tabs-padding: 10px 15px 9px; $tabs-padding: 10px 15px 9px;
......
public/sass/components/_panel_editor.scss
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
.panel-wrapper { .panel-wrapper {
height: 100%; height: 100%;
position: relative;
&--edit { &--edit {
height: 40%; height: 40%;
......
public/sass/components/_panel_graph.scss
...@@ -352,7 +352,7 @@ ...@@ -352,7 +352,7 @@
.left-yaxis-label { .left-yaxis-label {
top: 50%; top: 50%;
left: 2px; left: 8px;
transform: translateX(-50%) translateY(-50%) rotate(-90deg); transform: translateX(-50%) translateY(-50%) rotate(-90deg);
// this is needed for phantomsjs 2.1 // this is needed for phantomsjs 2.1
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
...@@ -360,7 +360,7 @@ ...@@ -360,7 +360,7 @@
.right-yaxis-label { .right-yaxis-label {
top: 50%; top: 50%;
right: 2px; right: 8px;
transform: translateX(50%) translateY(-50%) rotate(90deg); transform: translateX(50%) translateY(-50%) rotate(90deg);
// this is needed for phantomsjs 2.1 // this is needed for phantomsjs 2.1
-webkit-transform: translateX(50%) translateY(-50%) rotate(90deg); -webkit-transform: translateX(50%) translateY(-50%) rotate(90deg);
......
public/sass/components/_panel_header.scss 0 → 100644
$panel-header-no-title-zindex: 1;
.panel-header {
&:hover {
transition: background-color 0.1s ease-in-out;
background-color: $panel-header-hover-bg;
}
}
.panel-container--no-title {
.panel-header {
position: absolute;
width: 100%;
z-index: $panel-header-z-index;
}
.panel-content {
height: 100%;
}
}
.panel-title-container {
cursor: move;
word-wrap: break-word;
display: block;
}
.panel-title {
border: 0px;
font-weight: $font-weight-semi-bold;
position: relative;
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
height: $panel-header-height;
align-items: center;
}
.panel-title-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: calc(100% - 38px);
cursor: pointer;
font-weight: $font-weight-semi-bold;
&:hover {
color: $link-hover-color;
}
.panel-has-alert & {
max-width: calc(100% - 54px);
}
}
.panel-menu-container {
width: 1px;
height: 19px;
display: inline-block;
}
.panel-menu-toggle {
color: $text-color-weak;
cursor: pointer;
padding: 3px 5px;
visibility: hidden;
opacity: 0;
width: 16px;
height: 16px;
left: 1px;
top: 2px;
&:hover {
color: $link-hover-color;
}
}
.panel-loading {
position: absolute;
top: 4px;
right: 4px;
z-index: $panel-header-z-index + 1;
font-size: $font-size-sm;
color: $text-color-weak;
}
.panel-empty {
display: flex;
align-items: center;
height: 100%;
width: 100%;
p {
text-align: center;
color: $text-muted;
font-size: $font-size-lg;
width: 100%;
}
}
.panel-menu {
top: 25px;
left: -100px;
}
.panel-info-corner-inner {
width: 0;
height: 0;
position: absolute;
left: 0;
bottom: 0;
}
@mixin panel-corner-color($corner-bg) {
.panel-info-corner-inner {
border-left: $panel-header-height solid $corner-bg;
border-right: none;
border-bottom: $panel-header-height solid transparent;
}
}
.panel-info-corner {
color: $text-muted;
cursor: pointer;
position: absolute;
display: none;
left: 0;
width: $panel-header-height;
height: $panel-header-height;
top: 0;
.fa {
position: relative;
top: -2px;
left: 6px;
font-size: 75%;
z-index: $panel-header-no-title-zindex + 2;
}
&--info {
display: block;
@include panel-corner-color(lighten($panel-corner, 4%));
.fa:before {
content: '\f129';
}
}
&--links {
display: block;
@include panel-corner-color(lighten($panel-corner, 4%));
.fa {
left: 4px;
}
.fa:before {
content: '\f08e';
}
}
&--error {
display: block;
color: $white;
@include panel-corner-color($popover-error-bg);
.fa:before {
content: '\f12a';
}
}
}
.panel-time-info {
font-weight: $font-weight-semi-bold;
float: right;
margin-right: 8px;
color: $blue;
font-size: 85%;
position: absolute;
right: 0;
}
public/sass/components/_panel_singlestat.scss
...@@ -14,6 +14,15 @@ ...@@ -14,6 +14,15 @@
z-index: 1; z-index: 1;
font-size: 3em; font-size: 3em;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
// helps make the title feel more centered when there is a panel title
padding-bottom: $panel-padding;
}
// Helps
.panel-container--no-title {
.singlestat-panel-value-container {
padding-bottom: 0;
}
} }
.singlestat-panel-prefix { .singlestat-panel-prefix {
...@@ -21,5 +30,5 @@ ...@@ -21,5 +30,5 @@
} }
#flotGagueValue0 { #flotGagueValue0 {
font-weight: bold; //please dont hurt me for this! font-weight: $font-weight-semi-bold; //please dont hurt me for this!
} }
public/sass/pages/_dashboard.scss
...@@ -79,9 +79,9 @@ div.flot-text { ...@@ -79,9 +79,9 @@ div.flot-text {
.panel-content { .panel-content {
padding: $panel-padding; padding: $panel-padding;
height: calc(100% - 27px); height: calc(100% - #{$panel-header-height});
width: 100%;
position: relative; position: relative;
// Fixes scrolling on mobile devices // Fixes scrolling on mobile devices
overflow: auto; overflow: auto;
} }
...@@ -93,172 +93,6 @@ div.flot-text { ...@@ -93,172 +93,6 @@ div.flot-text {
} }
} }
.panel-title-container {
min-height: 9px;
cursor: move;
word-wrap: break-word;
display: block;
}
.panel-title {
border: 0px;
font-weight: $font-weight-semi-bold;
position: relative;
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
padding: 4px 0 4px;
}
.panel-title-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: calc(100% - 38px);
cursor: pointer;
font-weight: $font-weight-semi-bold;
&:hover {
color: $link-hover-color;
}
.panel-has-alert & {
max-width: calc(100% - 54px);
}
}
.panel-menu-container {
width: 1px;
height: 19px;
display: inline-block;
}
.panel-menu-toggle {
color: $text-color-weak;
cursor: pointer;
padding: 3px 5px;
visibility: hidden;
opacity: 0;
width: 16px;
height: 16px;
left: 1px;
top: 2px;
&:hover {
color: $link-hover-color;
}
}
.panel-loading {
position: absolute;
top: -3px;
right: 0px;
z-index: 800;
font-size: $font-size-sm;
color: $text-color-weak;
}
.panel-empty {
display: flex;
align-items: center;
height: 100%;
width: 100%;
p {
text-align: center;
color: $text-muted;
font-size: $font-size-lg;
width: 100%;
}
}
.panel-header {
&:hover {
transition: background-color 0.1s ease-in-out;
background-color: $panel-header-hover-bg;
}
}
.panel-menu {
top: 25px;
left: -100px;
}
.panel-info-corner-inner {
width: 0;
height: 0;
position: absolute;
left: 0;
bottom: 0;
}
@mixin panel-corner-color($corner-bg) {
.panel-info-corner-inner {
border-left: 27px solid $corner-bg;
border-right: none;
border-bottom: 27px solid transparent;
}
}
.panel-info-corner {
color: $text-muted;
cursor: pointer;
position: absolute;
display: none;
left: 0;
width: 27px;
height: 27px;
top: 0;
z-index: 1;
.fa {
position: relative;
top: -2px;
left: 6px;
font-size: 75%;
z-index: 1;
}
&--info {
display: block;
@include panel-corner-color(lighten($panel-corner, 4%));
.fa:before {
content: '\f129';
}
}
&--links {
display: block;
@include panel-corner-color(lighten($panel-corner, 4%));
.fa {
left: 4px;
}
.fa:before {
content: '\f08e';
}
}
&--error {
display: block;
color: $white;
@include panel-corner-color($popover-error-bg);
.fa:before {
content: '\f12a';
}
}
}
.panel-time-info {
font-weight: bold;
float: right;
margin-right: 15px;
color: $blue;
font-size: 85%;
position: absolute;
top: 4px;
right: 0;
}
.dashboard-header { .dashboard-header {
font-size: $font-size-h3; font-size: $font-size-h3;
text-align: center; text-align: center;
......
public/sass/pages/_explore.scss
...@@ -164,7 +164,6 @@ ...@@ -164,7 +164,6 @@
padding: $space-sm $space-md 0 $space-md; padding: $space-sm $space-md 0 $space-md;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
margin-bottom: $space-sm;
transition: all 0.1s linear; transition: all 0.1s linear;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment