mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
newgrid: progress on fullscreen/edit view modes
This commit is contained in:
Torkel Ödegaard
parent
df61558018
commit
087b55aece
@ -110,6 +110,7 @@
|
||||
"angular-sanitize": "^1.6.6",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"brace": "^0.10.0",
|
||||
"classnames": "^2.2.5",
|
||||
"clipboard": "^1.7.1",
|
||||
"eventemitter3": "^2.0.2",
|
||||
"file-saver": "^1.3.3",
|
||||
|
||||
@ -19,7 +19,7 @@ function (_, $, coreModule) {
|
||||
});
|
||||
|
||||
var lastHideControlsVal;
|
||||
$scope.$watch('dashboard.hideControls', function() {
|
||||
$scope.$watch('ctrl.dashboard.hideControls', function() {
|
||||
if (!$scope.dashboard) {
|
||||
return;
|
||||
}
|
||||
@ -31,7 +31,7 @@ function (_, $, coreModule) {
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$watch('playlistSrv', function(newValue) {
|
||||
$scope.$watch('ctrl.playlistSrv', function(newValue) {
|
||||
elem.toggleClass('playlist-active', _.isObject(newValue));
|
||||
});
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ import {PanelModel} from './PanelModel';
|
||||
import sortByKeys from 'app/core/utils/sort_by_keys';
|
||||
|
||||
export const CELL_HEIGHT = 30;
|
||||
export const CELL_VMARGIN = 15;
|
||||
export const CELL_VMARGIN = 10;
|
||||
|
||||
export class DashboardModel {
|
||||
id: any;
|
||||
@ -148,6 +148,15 @@ export class DashboardModel {
|
||||
return copy;
|
||||
}
|
||||
|
||||
setViewMode(panel: PanelModel, fullscreen: boolean, isEditing: boolean) {
|
||||
this.meta.fullscreen = fullscreen;
|
||||
this.meta.isEditing = isEditing && this.meta.canEdit;
|
||||
|
||||
panel.setViewMode(fullscreen, this.meta.isEditing);
|
||||
|
||||
this.events.emit('view-mode-changed', panel);
|
||||
}
|
||||
|
||||
private ensureListExist(data) {
|
||||
if (!data) { data = {}; }
|
||||
if (!data.list) { data.list = []; }
|
||||
@ -9,6 +9,8 @@ export interface GridPos {
|
||||
|
||||
const notPersistedProperties: {[str: string]: boolean} = {
|
||||
"events": true,
|
||||
"fullscreen": true,
|
||||
"isEditing": true,
|
||||
};
|
||||
|
||||
export class PanelModel {
|
||||
@ -16,6 +18,10 @@ export class PanelModel {
|
||||
gridPos: GridPos;
|
||||
type: string;
|
||||
title: string;
|
||||
|
||||
// non persisted
|
||||
fullscreen: boolean;
|
||||
isEditing: boolean;
|
||||
events: Emitter;
|
||||
|
||||
constructor(model) {
|
||||
@ -40,6 +46,11 @@ export class PanelModel {
|
||||
return model;
|
||||
}
|
||||
|
||||
setViewMode(fullscreen: boolean, isEditing: boolean) {
|
||||
this.fullscreen = fullscreen;
|
||||
this.isEditing = isEditing;
|
||||
}
|
||||
|
||||
updateGridPos(newPos: GridPos) {
|
||||
let sizeChanged = false;
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import config from 'app/core/config';
|
||||
|
||||
import coreModule from 'app/core/core_module';
|
||||
import {PanelContainer} from './dashgrid/PanelContainer';
|
||||
import {DashboardModel} from './model';
|
||||
import {DashboardModel} from './DashboardModel';
|
||||
|
||||
export class DashboardCtrl implements PanelContainer {
|
||||
dashboard: DashboardModel;
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import coreModule from 'app/core/core_module';
|
||||
import {DashboardModel} from './model';
|
||||
import {DashboardModel} from './DashboardModel';
|
||||
|
||||
export class DashboardSrv {
|
||||
dash: any;
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React from 'react';
|
||||
import coreModule from 'app/core/core_module';
|
||||
import ReactGridLayout from 'react-grid-layout';
|
||||
import {CELL_HEIGHT, CELL_VMARGIN} from '../model';
|
||||
import {CELL_HEIGHT, CELL_VMARGIN} from '../DashboardModel';
|
||||
import {DashboardPanel} from './DashboardPanel';
|
||||
import {DashboardModel} from '../model';
|
||||
import {DashboardModel} from '../DashboardModel';
|
||||
import {PanelContainer} from './PanelContainer';
|
||||
import {PanelModel} from '../PanelModel';
|
||||
import classNames from 'classnames';
|
||||
import sizeMe from 'react-sizeme';
|
||||
|
||||
const COLUMN_COUNT = 12;
|
||||
@ -104,8 +105,9 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
|
||||
const panelElements = [];
|
||||
|
||||
for (let panel of this.dashboard.panels) {
|
||||
const panelClasses = classNames({panel: true, 'panel--fullscreen': panel.fullscreen});
|
||||
panelElements.push(
|
||||
<div key={panel.id.toString()} className="panel">
|
||||
<div key={panel.id.toString()} className={panelClasses}>
|
||||
<DashboardPanel panel={panel} getPanelContainer={this.props.getPanelContainer} />
|
||||
</div>,
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {DashboardModel} from '../model';
|
||||
import {DashboardModel} from '../DashboardModel';
|
||||
import {PanelLoader} from './PanelLoader';
|
||||
|
||||
export interface PanelContainer {
|
||||
|
||||
@ -4,7 +4,7 @@ import _ from 'lodash';
|
||||
import moment from 'moment';
|
||||
import angular from 'angular';
|
||||
import {appEvents, NavModel} from 'app/core/core';
|
||||
import {DashboardModel} from '../model';
|
||||
import {DashboardModel} from '../DashboardModel';
|
||||
|
||||
export class DashNavCtrl {
|
||||
dashboard: DashboardModel;
|
||||
|
||||
@ -6,7 +6,7 @@ import _ from 'lodash';
|
||||
import angular from 'angular';
|
||||
import moment from 'moment';
|
||||
|
||||
import {DashboardModel} from '../model';
|
||||
import {DashboardModel} from '../DashboardModel';
|
||||
import {HistoryListOpts, RevisionsModel, CalculateDiffOptions, HistorySrv} from './history_srv';
|
||||
|
||||
export class HistoryListCtrl {
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import _ from 'lodash';
|
||||
import coreModule from 'app/core/core_module';
|
||||
import {DashboardModel} from '../model';
|
||||
import {DashboardModel} from '../DashboardModel';
|
||||
|
||||
export interface HistoryListOpts {
|
||||
limit: number;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import {describe, beforeEach, it, expect} from 'test/lib/common';
|
||||
|
||||
import _ from 'lodash';
|
||||
import {DashboardModel} from '../model';
|
||||
import {DashboardModel} from '../DashboardModel';
|
||||
|
||||
describe('DashboardModel', function() {
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
|
||||
import _ from 'lodash';
|
||||
import config from 'app/core/config';
|
||||
import {DashboardExporter} from '../export/exporter';
|
||||
import {DashboardModel} from '../model';
|
||||
import {DashboardModel} from '../DashboardModel';
|
||||
|
||||
describe('given dashboard with repeated panels', function() {
|
||||
var dash, exported;
|
||||
|
||||
@ -27,8 +27,8 @@ function (angular, _, $, config) {
|
||||
}
|
||||
});
|
||||
|
||||
$scope.onAppEvent('panel-change-view', function(evt, payload) {
|
||||
self.update(payload);
|
||||
self.dashboard.on('view-mode-changed', function(panel) {
|
||||
self.update({fullscreen: panel.fullscreen, edit: panel.isEditing});
|
||||
});
|
||||
|
||||
$scope.onAppEvent('panel-initialized', function(evt, payload) {
|
||||
@ -154,9 +154,6 @@ function (angular, _, $, config) {
|
||||
|
||||
ctrl.editMode = false;
|
||||
ctrl.fullscreen = false;
|
||||
ctrl.dashboard.editMode = this.oldDashboardEditMode;
|
||||
|
||||
this.$scope.appEvent('panel-fullscreen-exit', {panelId: ctrl.panel.id});
|
||||
|
||||
if (!render) { return false;}
|
||||
|
||||
@ -176,14 +173,8 @@ function (angular, _, $, config) {
|
||||
ctrl.editMode = this.state.edit && this.dashboard.meta.canEdit;
|
||||
ctrl.fullscreen = true;
|
||||
|
||||
this.oldDashboardEditMode = this.dashboard.editMode;
|
||||
this.oldTimeRange = ctrl.range;
|
||||
this.fullscreenPanel = panelScope;
|
||||
this.dashboard.editMode = false;
|
||||
|
||||
$(window).scrollTop(0);
|
||||
|
||||
this.$scope.appEvent('panel-fullscreen-enter', {panelId: ctrl.panel.id});
|
||||
|
||||
$timeout(function() {
|
||||
ctrl.render();
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import {DashboardModel} from '../dashboard/model';
|
||||
import {DashboardModel} from '../dashboard/DashboardModel';
|
||||
import Remarkable from 'remarkable';
|
||||
|
||||
export class MetricsTabCtrl {
|
||||
|
||||
@ -3,7 +3,7 @@ import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import {profiler} from 'app/core/profiler';
|
||||
import Remarkable from 'remarkable';
|
||||
import {CELL_HEIGHT, CELL_VMARGIN} from '../dashboard/model';
|
||||
import {CELL_HEIGHT, CELL_VMARGIN} from '../dashboard/DashboardModel';
|
||||
|
||||
const TITLE_HEIGHT = 25;
|
||||
const EMPTY_TITLE_HEIGHT = 9;
|
||||
@ -72,9 +72,7 @@ export class PanelCtrl {
|
||||
}
|
||||
|
||||
changeView(fullscreen, edit) {
|
||||
this.publishAppEvent('panel-change-view', {
|
||||
fullscreen: fullscreen, edit: edit, panelId: this.panel.id
|
||||
});
|
||||
this.dashboard.setViewMode(this.panel, fullscreen, edit);
|
||||
}
|
||||
|
||||
viewPanel() {
|
||||
|
||||
@ -222,8 +222,8 @@ $btn-border-radius: 3px;
|
||||
$side-menu-width: 60px;
|
||||
|
||||
// dashboard
|
||||
$panel-margin: 0.4rem;
|
||||
$dashboard-padding: ($panel-margin * 2) $panel-margin $panel-margin $panel-margin;
|
||||
$panel-margin: 10px;
|
||||
$dashboard-padding: $panel-margin * 2;
|
||||
|
||||
// tabs
|
||||
$tabs-padding-top: 0.6rem;
|
||||
|
||||
@ -1,2 +1,6 @@
|
||||
@import "~react-grid-layout/css/styles.css";
|
||||
@import "~react-resizable/css/styles.css";
|
||||
|
||||
.panel-in-fullscreen {
|
||||
|
||||
}
|
||||
|
||||
@ -1,325 +0,0 @@
|
||||
.grid-stack-item > .ui-resizable-handle {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.grid-stack {
|
||||
position: relative;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.grid-stack.grid-stack-rtl {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.grid-stack.grid-stack-rtl > .grid-stack-item {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.grid-stack .grid-stack-placeholder > .placeholder-content {
|
||||
background: $input-label-bg;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8);
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item {
|
||||
min-width: 8.3333333333%;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item > .grid-stack-item-content {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 7px;
|
||||
right: 7px;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item > .ui-resizable-handle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
font-size: 10px;
|
||||
color: $text-color-weak;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
|
||||
.grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
|
||||
.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
|
||||
.grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
|
||||
box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item > .ui-resizable-se,
|
||||
.grid-stack > .grid-stack-item > .ui-resizable-sw {
|
||||
font-family: 'grafana-icons' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
&::before {
|
||||
content: "\e90b";
|
||||
}
|
||||
}
|
||||
.grid-stack > .grid-stack-item > .ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
right: 6px;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='1'] {
|
||||
width: 8.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='1'] {
|
||||
left: 8.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='1'] {
|
||||
min-width: 8.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='1'] {
|
||||
max-width: 8.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='2'] {
|
||||
width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='2'] {
|
||||
left: 16.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='2'] {
|
||||
min-width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='2'] {
|
||||
max-width: 16.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='3'] {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='3'] {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='3'] {
|
||||
min-width: 25%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='3'] {
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='4'] {
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='4'] {
|
||||
left: 33.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='4'] {
|
||||
min-width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='4'] {
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='5'] {
|
||||
width: 41.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='5'] {
|
||||
left: 41.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='5'] {
|
||||
min-width: 41.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='5'] {
|
||||
max-width: 41.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='6'] {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='6'] {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='6'] {
|
||||
min-width: 50%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='6'] {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='7'] {
|
||||
width: 58.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='7'] {
|
||||
left: 58.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='7'] {
|
||||
min-width: 58.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='7'] {
|
||||
max-width: 58.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='8'] {
|
||||
width: 66.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='8'] {
|
||||
left: 66.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='8'] {
|
||||
min-width: 66.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='8'] {
|
||||
max-width: 66.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='9'] {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='9'] {
|
||||
left: 75%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='9'] {
|
||||
min-width: 75%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='9'] {
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='10'] {
|
||||
width: 83.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='10'] {
|
||||
left: 83.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='10'] {
|
||||
min-width: 83.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='10'] {
|
||||
max-width: 83.3333333333%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='11'] {
|
||||
width: 91.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='11'] {
|
||||
left: 91.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='11'] {
|
||||
min-width: 91.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='11'] {
|
||||
max-width: 91.6666666667%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-width='12'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-x='12'] {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-min-width='12'] {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.grid-stack > .grid-stack-item[data-gs-max-width='12'] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.grid-stack.grid-stack-animate,
|
||||
.grid-stack.grid-stack-animate .grid-stack-item {
|
||||
-webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
|
||||
-moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
|
||||
-ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
|
||||
-o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
|
||||
transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
|
||||
}
|
||||
|
||||
.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
|
||||
.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
|
||||
.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
|
||||
-webkit-transition: left 0s, top 0s, height 0s, width 0s;
|
||||
-moz-transition: left 0s, top 0s, height 0s, width 0s;
|
||||
-ms-transition: left 0s, top 0s, height 0s, width 0s;
|
||||
-o-transition: left 0s, top 0s, height 0s, width 0s;
|
||||
transition: left 0s, top 0s, height 0s, width 0s;
|
||||
}
|
||||
|
||||
.grid-stack.grid-stack-one-column-mode {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.grid-stack.grid-stack-one-column-mode > .grid-stack-item {
|
||||
position: relative !important;
|
||||
width: auto !important;
|
||||
left: 0 !important;
|
||||
top: auto !important;
|
||||
margin-bottom: 20px;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.grid-stack.grid-stack-one-column-mode > .grid-stack-item > .ui-resizable-handle {
|
||||
display: none;
|
||||
}
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
.sidemenu-open {
|
||||
.navbar {
|
||||
padding-left: 0;
|
||||
padding-left: $panel-margin;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
flex-direction: column;
|
||||
width: $side-menu-width;
|
||||
background: $navbarBackground;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
|
||||
a:focus {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
margin: 0 $panel-margin ($panel-margin*2) $panel-margin;
|
||||
margin: 0 0 $panel-margin 0;
|
||||
}
|
||||
|
||||
.annotation-disabled, .annotation-disabled a {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user