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

Problems: truncate long problem description

Browse Source
This commit is contained in:
Alexander Zobnin
2020-05-18 16:18:15 +03:00
parent 6e2f28670e
commit a34b72c2b6
2 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/panel-triggers/components/Problems/ProblemDetails.tsx
View File

@@ -160,9 +160,11 @@ export default class ProblemDetails extends PureComponent<ProblemDetailsProps, P
}
</div>
{problem.comments &&
<div className="problem-description">
<span className="description-label">Description:&nbsp;</span>
<span>{problem.comments}</span>
<div className="problem-description-row">
<div className="problem-description">
<span className="description-label">Description:&nbsp;</span>
<span>{problem.comments}</span>
</div>
</div>
}
{problem.tags && problem.tags.length > 0 &&

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

@@ -251,10 +251,30 @@
flex-direction: column;
}
.description-label {
font-weight: 500;
font-style: italic;
color: $text-muted;
.problem-description-row {
.problem-description {
position: relative;
height: 4.5rem;
overflow: hidden;
&:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.5rem;
background: linear-gradient(to right, rgba($problem-details-background, 0), rgba($problem-details-background, 1) 50%);
}
}
.description-label {
font-weight: 500;
font-style: italic;
color: $text-muted;
}
}
.problem-age {