commit d565d02ac18c72a0f095d2d994733c4c9e192a25
author Jack Zheng <jackzheng@google.com> Tue Jul 31 16:37:49 2018 -0700
committer Kasper Nilsson <kaspern@google.com> Wed Aug 01 19:13:52 2018 +0000
tree 2aed53c96a5a031b79c3f24f8e03cf140cf8008f
parent 8c6a42059b3e5e721bfff3b71d57253260b20e7f

Center the diff modes

Change-Id: I9b3e21dff88a8ce5e3380c51cd9d55f8ad45ff31

gr-image-diff-tool/gr-image-diff-tool.html

diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index 6d96b86..ff65062 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html
@@ -21,9 +21,9 @@
   <template>
     <style>
       :host {
-        background-color: #f5f5f5;
-        font-family: var(--font-family);
+        background-color: #fafafa;
         display: block;
+        font-family: var(--font-family);
       }
       #header {
         align-items: center;
@@ -44,6 +44,11 @@
         margin-left: 1em;
         padding: 0 .15em;
       }
+      .diffmode {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+      }
     </style>
     <div id="header">
       <h3>Image Diff</h3>
@@ -52,16 +57,20 @@
         <option value="opacity">Opacity Mode</option>
       </select>
     </div>
-    <template is="dom-if" if="[[_showResembleMode]]" restamp="true">
-      <gr-resemble-diff-mode
-          base-image="[[baseImage]]"
-          revision-image="[[revisionImage]]"></gr-resemble-diff-mode>
-    </template>
-    <template is="dom-if" if="[[_showOpacityMode]]" restamp="true">
-      <gr-opacity-diff-mode
-          base-image="[[baseImage]]"
-          revision-image="[[revisionImage]]"></gr-opacity-diff-mode>
-    </template>
+    <div class="diffmode">
+      <template is="dom-if" if="[[_showResembleMode]]" restamp="true">
+        <gr-resemble-diff-mode
+            base-image="[[baseImage]]"
+            revision-image="[[revisionImage]]"></gr-resemble-diff-mode>
+      </template>
+    </div>
+    <div class="diffmode">
+      <template is="dom-if" if="[[_showOpacityMode]]" restamp="true">
+        <gr-opacity-diff-mode
+            base-image="[[baseImage]]"
+            revision-image="[[revisionImage]]"></gr-opacity-diff-mode>
+      </template>
+    </div>
   </template>
   <script src="gr-image-diff-tool.js"></script>
 </dom-module>