Fix embedded logo size

* CSS transform is ignored in Safari, using SVG transform instead Fixes #1071
weaveworks · Mar 1, 2016 · 833b78c · 833b78c
1 parent 3e611f8
commit 833b78c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
@@ -227,7 +227,9 @@ export default class NodesChart extends React.Component {
         {errorEmpty}
         {errorMaxNodesExceeded}
         <svg width="100%" height="100%" id="nodes-chart-canvas" className={svgClassNames} onClick={this.handleMouseClick}>
-          <Logo/>
+          <g transform="translate(24,24) scale(0.25)">
+            <Logo/>
+          </g>
           <g className="canvas" transform={transform}>
             <g className="edges">
               {edgeElements}

diff --git a/client/app/styles/main.less b/client/app/styles/main.less
@@ -165,6 +165,12 @@ h2 {
   height: 80px;
   z-index: 20;
   display: flex;
+
+  .logo {
+    margin: -8px 0 0 64px;
+    height: 64px;
+    width: 250px;
+  }
 }
 
 .footer {
@@ -206,12 +212,6 @@ h2 {
   }
 }
 
-.logo {
-  margin: -8px 0 0 64px;
-  height: 64px;
-  width: 250px;
-}
-
 .topologies {
   margin: 4px 0 0 128px;
   display: flex;
@@ -297,7 +297,6 @@ h2 {
   svg.exported {
     .logo {
       display: inline;
-      transform: translate(24px, 24px) scale(0.25);
     }
   }