From dbc69ab8742edb86e2ed27dd2cb96684b2a7ec9a Mon Sep 17 00:00:00 2001
From: hppeng <hppeng>
Date: Mon, 25 Jul 2022 00:41:02 -0700
Subject: [PATCH] Compactify level/reset/copy box, touch up mobile UI

---
 builder/index_full.html | 10 ++++++----
 css/sq2bs.css           | 27 +++++++++++++++++++--------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/builder/index_full.html b/builder/index_full.html
index 31a2019..1280b6e 100644
--- a/builder/index_full.html
+++ b/builder/index_full.html
@@ -45,7 +45,7 @@
             <div class="col-xl-6">
                 <div class="row row-cols-1 mb-3 gy-3">
                     <div class="col">
-                        <div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 gy-2 justify-content-center">
+                        <div class="row row-cols-1 row-cols-xl-2 dark-shadow dark-6 justify-content-center equipment-input">
                             <div class="col-auto rounded order-xl-0 order-0">
                                 <div class="row h-100 px-1" id="helmet-dropdown">
                                     <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc">
@@ -286,7 +286,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto order-xl-0 order-1">
+                            <div class="col-auto order-xl-0 order-1 level-input">
                                 <div class="row h-100 px-1">
                                     <div class="col">
                                         <div class="row align-items-center justify-content-left">
@@ -301,8 +301,10 @@
                                             </div>
                                         </div>
                                         <div class="row align-items-left justify-content-left my-1">
-                                            <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=copy-button onclick="copyBuild()">Copy short</button>
-                                            <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button" id=share-button onclick="shareBuild(player_build)">Copy for sharing</button>
+                                            <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button"
+                                                    id=copy-button onclick="copyBuild()">Copy short</button>
+                                            <button class="col-auto mx-1 px-1 py-0 border-info text-light dark-5 scaled-font rounded fake-button"
+                                                    id=share-button onclick="shareBuild(player_build)">Copy for sharing</button>
                                         </div>
                                     </div>
                                 </div>
diff --git a/css/sq2bs.css b/css/sq2bs.css
index c5ac672..1e5751f 100644
--- a/css/sq2bs.css
+++ b/css/sq2bs.css
@@ -106,11 +106,9 @@ input.equipment-input {
     font-size: var(--scaled-fontsize);
 }
 
-.my-container {
-    position: fixed; /* Stay in place */
-    left: var(--sidebar-width);
-    overflow-y: scroll;
-    height: 100%;
+.equipment-input {
+    --bs-gutter-y: 1rem;
+    --bs-gutter-x: 3rem
 }
 
 .text-right {
@@ -176,7 +174,7 @@ input.equipment-input {
 }
 
 .scaled-item-icon img {
-    width: 5.5rem;
+    width: 6rem;
 }
 
 .scaled-bckgrd {
@@ -185,7 +183,7 @@ input.equipment-input {
 }
 
 .scaled-bckgrd img {
-    width: 6.5rem;
+    width: 7rem;
 }
 
 .overall-box {
@@ -200,6 +198,13 @@ input.equipment-input {
         padding-left: var(--sidebar-width);
         max-width: 100%;
     }
+    .equipment-input {
+        --bs-gutter-y: 0.5rem;
+        --bs-gutter-x: 1.5rem;
+    }
+    .level-input {
+        margin-top: 0
+    }
     .scaled-font {
         font-size: 1rem;
     }
@@ -258,7 +263,13 @@ input.equipment-input {
         padding-left: var(--sidebar-width);
         max-width: 100%;
     }
-
+    .equipment-input {
+        --bs-gutter-y: 0.5rem;
+        --bs-gutter-x: 1.5rem
+    }
+    .level-input {
+        margin-top: 0
+    }
     .scaled-font { 
         font-size: 1rem;
     }