Fix render issues in Safari

* remove text shadow on node labels (left artifacts on zoom)
* wrap details header to avoid background color using padding

Fixes #439
This commit is contained in:
David Kaltschmidt
2015-11-18 13:00:28 +01:00
parent 03c3bf292d
commit bfd633fe85
2 changed files with 17 additions and 12 deletions

View File

@@ -30,11 +30,13 @@ const NodeDetails = React.createClass({
return (
<div className="node-details">
<div className="node-details-header node-details-header-notavailable">
<h2 className="node-details-header-label">
n/a
</h2>
<div className="node-details-header-label-minor truncate">
{this.props.nodeId}
<div className="node-details-header-wrapper">
<h2 className="node-details-header-label">
n/a
</h2>
<div className="node-details-header-label-minor truncate">
{this.props.nodeId}
</div>
</div>
</div>
<div className="node-details-content">
@@ -72,11 +74,13 @@ const NodeDetails = React.createClass({
return (
<div className="node-details">
<div className="node-details-header" style={styles.header}>
<h2 className="node-details-header-label truncate" title={details.label_major}>
{details.label_major}
</h2>
<div className="node-details-header-label-minor truncate" title={details.label_minor}>
{details.label_minor}
<div className="node-details-header-wrapper">
<h2 className="node-details-header-label truncate" title={details.label_major}>
{details.label_major}
</h2>
<div className="node-details-header-label-minor truncate" title={details.label_minor}>
{details.label_minor}
</div>
</div>
</div>

View File

@@ -219,7 +219,6 @@ h2 {
text {
font-family: Roboto;
fill: @text-secondary-color;
text-shadow: 0 2px 0 @white, 2px 0 0 @white, 0 -2px 0 @white, -2px 0 0 @white;
&.node-label {
fill: @text-color;
@@ -354,7 +353,9 @@ h2 {
&-header {
padding: 36px 36px 16px 36px;
&-wrapper {
padding: 36px 36px 16px 36px;
}
&-row {
display: flex;