From 7caf62cf427ebe7cd1187bcd0652ce158e22e74e Mon Sep 17 00:00:00 2001
From: Matej Focko <mfocko@redhat.com>
Date: Tue, 17 May 2022 16:40:26 +0200
Subject: [PATCH] fix: move predefined scenarios

Fixes #12

Signed-off-by: Matej Focko <mfocko@redhat.com>
---
 comparator.html | 64 ++++++++++++++++++-------------------
 index.html      | 84 ++++++++++++++++++++++++-------------------------
 2 files changed, 72 insertions(+), 76 deletions(-)

diff --git a/comparator.html b/comparator.html
index 8bc75c6..d095c10 100755
--- a/comparator.html
+++ b/comparator.html
@@ -78,6 +78,37 @@
       </div>
     </div>
 
+    <div class="row py-3">
+      <h4 class="col-auto">Prepared scenarios</h4>
+
+      <div
+        class="col-auto btn-group"
+        role="group"
+        aria-label="Prepared scenarios"
+      >
+        <button
+          type="button"
+          class="btn btn-outline-primary"
+          onclick="prepareDifferentRanks()"
+          data-bs-toggle="tooltip"
+          data-bs-placement="auto"
+          title="This scenario shows differences in ranks between AVL and WAVL after a deletion of key 1 from the prepared trees."
+        >
+          Different ranks
+        </button>
+        <button
+          type="button"
+          class="btn btn-outline-primary"
+          onclick="prepareDifferentTrees()"
+          data-bs-toggle="tooltip"
+          data-bs-placement="auto"
+          title="This scenario shows differences in ranks between AVL and WAVL after a deletion of key -31 from the prepared trees."
+        >
+          Different trees after delete
+        </button>
+      </div>
+    </div>
+
     <div class="row py-3">
       <div class="col">
         <div class="row">
@@ -165,39 +196,6 @@
       <div class="row py-3">
         <div class="col px-3" style="text-align: center" id="left"></div>
         <div class="col px-3" style="text-align: center" id="right"></div>
-
-        <div class="col-2 px-1">
-          <div class="row">
-            <h6 class="row">Prepared scenarios</h6>
-
-            <div
-              class="btn-group-vertical"
-              role="group"
-              aria-label="Prepared scenarios"
-            >
-              <button
-                type="button"
-                class="btn btn-outline-primary"
-                onclick="prepareDifferentRanks()"
-                data-bs-toggle="tooltip"
-                data-bs-placement="right"
-                title="This scenario shows differences in ranks between AVL and WAVL after a deletion of key 1 from the prepared trees."
-              >
-                Different ranks
-              </button>
-              <button
-                type="button"
-                class="btn btn-outline-primary"
-                onclick="prepareDifferentTrees()"
-                data-bs-toggle="tooltip"
-                data-bs-placement="right"
-                title="This scenario shows differences in ranks between AVL and WAVL after a deletion of key -31 from the prepared trees."
-              >
-                Different trees after delete
-              </button>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
diff --git a/index.html b/index.html
index 1a209a7..5622dee 100755
--- a/index.html
+++ b/index.html
@@ -112,6 +112,47 @@
       </div>
     </div>
 
+    <div class="row py-3">
+      <h4 class="col-auto">Prepared scenarios</h4>
+
+      <div
+        class="col-auto btn-group"
+        role="group"
+        aria-label="Prepared scenarios"
+      >
+        <button
+          type="button"
+          class="btn btn-outline-primary"
+          onclick="prepareSingleRotationAfterDelete()"
+          data-bs-toggle="tooltip"
+          data-bs-placement="auto"
+          title="This scenario shows a single rotation being performed after a deletion of key 2 from the prepared tree."
+        >
+          Single rotation
+        </button>
+        <button
+          type="button"
+          class="btn btn-outline-primary"
+          onclick="prepareDoubleRotationAfterDelete()"
+          data-bs-toggle="tooltip"
+          data-bs-placement="auto"
+          title="This scenario shows a double rotation being performed after a deletion of key 1 from the prepared tree."
+        >
+          Double rotation
+        </button>
+        <button
+          type="button"
+          class="btn btn-outline-primary"
+          onclick="prepareDemotionOfBothNodesDuringDelete()"
+          data-bs-toggle="tooltip"
+          data-bs-placement="auto"
+          title="This scenario shows a demotion of both parent and sibling of the current node after a deletion of key 2 from the prepared tree."
+        >
+          Demotion of both parent and sibling
+        </button>
+      </div>
+    </div>
+
     <div class="row py-3">
       <div class="col-3"></div>
       <div class="col alert alert-info" role="alert">
@@ -123,49 +164,6 @@
 
     <div class="row py-3">
       <div class="col" id="graph" style="text-align: center"></div>
-
-      <div class="col-2 px-1">
-        <div class="row">
-          <h6 class="row">Prepared scenarios</h6>
-
-          <div
-            class="btn-group-vertical"
-            role="group"
-            aria-label="Prepared scenarios"
-          >
-            <button
-              type="button"
-              class="btn btn-outline-primary"
-              onclick="prepareSingleRotationAfterDelete()"
-              data-bs-toggle="tooltip"
-              data-bs-placement="right"
-              title="This scenario shows a single rotation being performed after a deletion of key 2 from the prepared tree."
-            >
-              Single rotation after delete
-            </button>
-            <button
-              type="button"
-              class="btn btn-outline-primary"
-              onclick="prepareDoubleRotationAfterDelete()"
-              data-bs-toggle="tooltip"
-              data-bs-placement="right"
-              title="This scenario shows a double rotation being performed after a deletion of key 1 from the prepared tree."
-            >
-              Double rotation after delete
-            </button>
-            <button
-              type="button"
-              class="btn btn-outline-primary"
-              onclick="prepareDemotionOfBothNodesDuringDelete()"
-              data-bs-toggle="tooltip"
-              data-bs-placement="right"
-              title="This scenario shows a demotion of both parent and sibling of the current node after a deletion of key 2 from the prepared tree."
-            >
-              Demotion of both parent and sibling during deletion
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
   </div>