From 9ff1fe0aae6bc91295be1c0885461a94891e13d9 Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Mon, 21 Mar 2016 11:21:41 -0700
Subject: [PATCH] Fix slight dashboard misalignment
---
.../src/dashboard/components/Dashboard.jsx | 2 +-
.../src/dashboard/components/DashboardGrid.jsx | 4 +++-
.../dashboard/components/grid/GridLayout.jsx | 18 +++++++++++++-----
3 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/frontend/src/dashboard/components/Dashboard.jsx b/frontend/src/dashboard/components/Dashboard.jsx
index 0d5789e0a77..840ef6e3e4b 100644
--- a/frontend/src/dashboard/components/Dashboard.jsx
+++ b/frontend/src/dashboard/components/Dashboard.jsx
@@ -189,7 +189,7 @@ export default class Dashboard extends Component {
<LoadingAndErrorWrapper style={{ minHeight: "100%" }} className={cx("Dashboard absolute top left right", { "Dashboard--fullscreen": isFullscreen, "Dashboard--night": isNightMode})} loading={!dashboard} error={error}>
{() =>
<div className="full" style={{ overflowX: "hidden" }}>
- <header className="DashboardHeader relative z2 px1">
+ <header className="DashboardHeader relative z2">
<DashboardHeader
{...this.props}
isFullscreen={this.state.isFullscreen}
diff --git a/frontend/src/dashboard/components/DashboardGrid.jsx b/frontend/src/dashboard/components/DashboardGrid.jsx
index 023dc6a7f74..b70daf35161 100644
--- a/frontend/src/dashboard/components/DashboardGrid.jsx
+++ b/frontend/src/dashboard/components/DashboardGrid.jsx
@@ -21,6 +21,8 @@ import {
import _ from "underscore";
import cx from "classnames";
+const MOBILE_ASPECT_RATIO = 3 / 2;
+
export default class DashboardGrid extends Component {
constructor(props, context) {
super(props, context);
@@ -204,7 +206,7 @@ export default class DashboardGrid extends Component {
style={{ margin: 0 }}
>
{dashcards && dashcards.map(dc =>
- <div key={dc.id} className="DashCard" style={{ left: 10, width: width - 20, marginTop: 10, marginBottom: 10, height: width / (6 / 4)}}>
+ <div key={dc.id} className="DashCard" style={{ width: width, marginTop: 10, marginBottom: 10, height: width / MOBILE_ASPECT_RATIO}}>
<DashCard
dashcard={dc}
cardData={this.props.cardData}
diff --git a/frontend/src/dashboard/components/grid/GridLayout.jsx b/frontend/src/dashboard/components/grid/GridLayout.jsx
index a9920203fb0..57f9d0e365e 100644
--- a/frontend/src/dashboard/components/grid/GridLayout.jsx
+++ b/frontend/src/dashboard/components/grid/GridLayout.jsx
@@ -157,8 +157,10 @@ export default class GridLayout extends Component {
}
getCellSize() {
+ let { margin } = this.props;
+ // add 1 margin to make it fill the full width
return {
- width: Math.floor(this.state.width / this.props.cols),
+ width: (this.state.width + margin) / this.props.cols,
height: this.props.rowHeight
};
}
@@ -216,13 +218,18 @@ export default class GridLayout extends Component {
}
getGridBackground() {
- let { margin } = this.props;
+ let { margin, cols } = this.props;
let cellSize = this.getCellSize();
- return `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='${cellSize.width}' height='${cellSize.height}'><rect stroke='rgba(0, 0, 0, 0.117647)' stroke-width='1' fill='none' x='${margin / 2 + 1.5}' y='${margin / 2 + 1.5}' width='${cellSize.width - margin - 3}' height='${cellSize.height - margin - 3}'/></svg>")`;
+ return (
+ `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='${cellSize.width * cols}' height='${cellSize.height}'>`+
+ _(cols).times((i) =>
+ `<rect stroke='rgba(0, 0, 0, 0.117647)' stroke-width='1' fill='none' x='${Math.round(margin / 2 + i * cellSize.width) + 1.5}' y='${margin / 2 + 1.5}' width='${Math.round(cellSize.width - margin - 3)}' height='${cellSize.height - margin - 3}'/>`).join("") +
+ `</svg>")`
+ );
}
render() {
- const { className, layout, cols, isEditing } = this.props;
+ const { className, layout, cols, margin, isEditing } = this.props;
let cellSize = this.getCellSize();
let bottom = Math.max(...layout.map(l => l.y + l.h));
@@ -238,8 +245,9 @@ export default class GridLayout extends Component {
let width = cellSize.width * cols;
let height = cellSize.height * bottom;
+ // subtract half of a margin to ensure it lines up with the edges
return (
- <div className={className} style={{ position: "relative", width, height, backgroundImage }}>
+ <div className={className} style={{ position: "relative", width, height, backgroundImage, marginLeft: -margin / 2, marginRight: -margin / 2 }}>
{this.props.children.map(child =>
this.renderChild(child)
)}
--
GitLab