Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

problems: wide layout tweaks

Browse Source
This commit is contained in:
Alexander Zobnin
2018-12-26 13:01:49 +03:00
parent 5fd9630163
commit cf018b4876
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/panel-triggers/components/ProblemDetails.tsx
View File

@@ -69,8 +69,8 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
const problem = this.props.original as Trigger; const problem = this.props.original as Trigger;
const rootWidth = this.props.rootWidth; const rootWidth = this.props.rootWidth;
const displayClass = this.state.show ? 'show' : ''; const displayClass = this.state.show ? 'show' : '';
const wideLayout = rootWidth > 1000; const wideLayout = rootWidth > 1200;
const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1200; const compactStatusBar = rootWidth < 800 || problem.acknowledges && wideLayout && rootWidth < 1400;
return ( return (
<div className={`problem-details-container ${displayClass}`}> <div className={`problem-details-container ${displayClass}`}>
@@ -116,8 +116,10 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
</div> </div>
{problem.acknowledges && wideLayout && {problem.acknowledges && wideLayout &&
<div className="problem-details-middle"> <div className="problem-details-middle">
<h6><FAIcon icon="reply-all" /> Acknowledges</h6> <div className="problem-ack-container">
<AcknowledgesList acknowledges={problem.acknowledges} /> <h6><FAIcon icon="reply-all" /> Acknowledges</h6>
<AcknowledgesList acknowledges={problem.acknowledges} />
</div>
</div> </div>
} }
<div className="problem-details-right"> <div className="problem-details-right">

9
src/sass/_panel-problems.scss
View File

@@ -318,9 +318,14 @@
.problem-details-middle { .problem-details-middle {
flex: 1 0 auto; flex: 1 0 auto;
padding: 0.6rem 1rem; // padding: 0.6rem 1rem;
overflow: auto; overflow: auto;
box-shadow: 1px 0 10px $problem-container-shadow; // box-shadow: 1px 0 10px $problem-container-shadow;
.problem-ack-container {
margin: 0.5rem 0.4rem;
padding: 0.6rem 0.6rem;
}
} }
.problem-ack-container { .problem-ack-container {