From 2cce20db1099248e6137a380d0eefedf142a18ba Mon Sep 17 00:00:00 2001
From: Patrick Walton <pcwalton@mimiga.net>
Date: Wed, 6 Sep 2017 18:47:14 -0700
Subject: [PATCH] Swap the locations of the FPS meter and the settings button
 in preparation for more UI

---
 demo/client/css/pathfinder.css      | 12 +++++++++---
 demo/client/html/3d-demo.html.hbs   |  4 ++--
 demo/client/html/svg-demo.html.hbs  |  4 ++--
 demo/client/html/text-demo.html.hbs |  4 ++--
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/demo/client/css/pathfinder.css b/demo/client/css/pathfinder.css
index a174eebb..0db2e533 100644
--- a/demo/client/css/pathfinder.css
+++ b/demo/client/css/pathfinder.css
@@ -3,7 +3,13 @@
     left: 1em;
     margin: 0;
 }
+#pf-settings-container {
+    margin-right: 1rem;
+    pointer-events: none;
+    text-align: right;
+}
 #pf-settings {
+    text-align: initial;
     user-select: none;
     -moz-user-select: none;
     opacity: 1.0;
@@ -56,7 +62,7 @@ button > svg path {
 
 .pf-arrow-box:after, .pf-arrow-box:before {
 	top: 100%;
-	left: 22px;
+	right: 22px;
 	border: solid transparent;
 	content: " ";
 	height: 0;
@@ -68,13 +74,13 @@ button > svg path {
 	border-color: rgba(0, 0, 0, 0);
 	border-top-color: white;
 	border-width: 14px;
-	margin-left: -14px;
+	margin-right: -14px;
 }
 .pf-arrow-box:before {
 	border-color: rgba(0, 0, 0, 0);
 	border-top-color: rgba(0, 0, 0, 0.125);
 	border-width: 15px;
-	margin-left: -15px;
+	margin-right: -15px;
 }
 
 .github-corner > svg {
diff --git a/demo/client/html/3d-demo.html.hbs b/demo/client/html/3d-demo.html.hbs
index 98de0b9b..07dc506c 100644
--- a/demo/client/html/3d-demo.html.hbs
+++ b/demo/client/html/3d-demo.html.hbs
@@ -10,7 +10,8 @@
         {{>partials/navbar.html isDemo=true}}
         <canvas id="pf-canvas" width="400" height="300"></canvas>
         <div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
-            <div class="ml-3 pf-pointer-events-none">
+            <div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
+            <div id="pf-settings-container">
                 <div id="pf-settings" class="card mb-4 pf-invisible">
                     <div class="card-body">
                         <button id="pf-settings-close-button" type="button" class="close"
@@ -36,7 +37,6 @@
                     {{octicon "gear"}}
                 </button>
             </div>
-            <div class="rounded py-1 px-3 mr-3" id="pf-fps-label">0 ms</div>
         </div>
     </body>
 </html>
diff --git a/demo/client/html/svg-demo.html.hbs b/demo/client/html/svg-demo.html.hbs
index 614c1bc8..95e31fcb 100644
--- a/demo/client/html/svg-demo.html.hbs
+++ b/demo/client/html/svg-demo.html.hbs
@@ -11,7 +11,8 @@
         <canvas id="pf-canvas" width="400" height="300"></canvas>
         <svg id="pf-svg" xmlns="http://www.w3.org/2000/svg" width="400" height="300"></svg>
         <div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
-            <div class="ml-3 pf-pointer-events-none">
+            <div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
+            <div id="pf-settings-container">
                 <div id="pf-settings" class="card mb-4 pf-invisible">
                     <div class="card-body">
                         <button id="pf-settings-close-button" type="button" class="close"
@@ -45,7 +46,6 @@
                     {{octicon "gear"}}
                 </button>
             </div>
-            <div class="rounded py-1 px-3 mr-3" id="pf-fps-label">0 ms</div>
         </div>
     </body>
 </html>
diff --git a/demo/client/html/text-demo.html.hbs b/demo/client/html/text-demo.html.hbs
index cb5183f5..4a67b605 100644
--- a/demo/client/html/text-demo.html.hbs
+++ b/demo/client/html/text-demo.html.hbs
@@ -10,7 +10,8 @@
         {{>partials/navbar.html isDemo=true}}
         <canvas id="pf-canvas" width="400" height="300"></canvas>
         <div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
-            <div class="ml-3 pf-pointer-events-none">
+            <div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
+            <div id="pf-settings-container">
                 <div id="pf-settings" class="card mb-4 pf-invisible">
                     <div class="card-body">
                         <button id="pf-settings-close-button" type="button" class="close"
@@ -51,7 +52,6 @@
                 <button id="pf-settings-button" type="button" class="btn btn-outline-secondary"
                  aria-expanded="false" aria-controls="#pf-settings">{{octicon "gear"}}</button>
             </div>
-            <div class="rounded py-1 px-3 mr-3" id="pf-fps-label">0 ms</div>
         </div>
         <div class="modal fade" id="pf-edit-text-modal" tabindex="-1" role="dialog"
          aria-labelledby="pf-edit-text-label" aria-hidden="true">