(change): MM revamp, scroll behavior

webapp/src/lib/components/FormHeader.svelte

@@ -28,7 +28,12 @@
             <input type="number" bind:value={pagerForm.id_from}>
             <div style="font-size: 22pt">-</div>
             <input type="number" bind:value={pagerForm.id_to}>
-            <button class="styled" onclick={functions.refreshPage}>Refresh</button>
+            <button class="styled" onclick={() => {
+                if (Math.abs(pagerForm.id_to - pagerForm.id_from) > 800) {
+                    pagerForm.id_to = pagerForm.id_from + 799;
+                }
+                setTimeout(functions.refreshPage, 50);
+            }}>Refresh</button>
         </div>
         <div class="flex-row">
             <button class="styled" title="Alt + B" tabindex="-1" onclick={functions.prevPage}>Prev Page</button>

webapp/src/routes/+page.svelte

@@ -40,14 +40,19 @@
     <a href="/counts" target="_blank" class="styled">Counts</a>
   </div>
   <div>
-    <h2>Select Prefix:</h2>
+    <h2>Current Prefix: {current_prefix.name}</h2>
   </div>
-  <div class="prefix-selector">
-    <select style="width: 100%; box-sizing: border-box;" bind:value={prefix_name}>
+  <div class="change_title">
+    <h2>Change Prefix:</h2>
+  </div>
+  <div class="prefix-selector flex-row">
     {#each all_prefixes as prefix}
-      <option value={prefix.name}>{prefix.name}</option>
+    <div class={prefix.color}>
+      <button class="styled" onclick={() => {
+        prefix_name = prefix.name;
+      }}>{prefix.name}</button>
+    </div>
     {/each}
-    </select>
   </div>
   <div><h2>Forms:</h2></div>
   <div class="flex-row {current_prefix.color}">
@@ -60,14 +65,14 @@
     <a href="/reports/byname/{current_prefix.name}/" target="_blank" class="styled">By Name</a>
     <a href="/reports/bybasket/{current_prefix.name}/" target="_blank" class="styled">By Basket ID</a>
   </div>
-  {#if admin_mode}
-  <div><h2>Admin Mode:</h2></div>
-  <div class="flex-row {current_prefix.color}">
+</div>
+{#if admin_mode}
+<div><h2>Admin Mode:</h2></div>
+  <div class="flex-row">
     <a href="/prefixes" target="_blank" class="styled">Prefix Editor</a>
     <a href="/backuprestore" target="_blank" class="styled">Backup/Restore</a>
-  </div>
-  {/if}
 </div>
+{/if}
 
 <div class="status tb-margin">
   {data.status}

webapp/src/routes/baskets/[prefix]/+page.svelte

@@ -14,7 +14,7 @@
         const focusDe = document.getElementById(`${idx}_de`);
         if (focusDe) {
             focusDe.select();
-            focusDe.scrollIntoView({block: "end"});
+            focusDe.scrollIntoView({block: "center"});
         }
     }
 

webapp/src/routes/drawing/[prefix]/+page.svelte

@@ -13,7 +13,7 @@
         const focusWt = document.getElementById(`${idx}_wt`);
         if (focusWt) {
             focusWt.select();
-            focusWt.scrollIntoView({block: "end"});
+            focusWt.scrollIntoView({block: "center"});
         }
     }
 

webapp/src/routes/tickets/[prefix]/+page.svelte

@@ -13,7 +13,7 @@
         const focusFn = document.getElementById(`${idx}_fn`);
         if (focusFn) {
             focusFn.select();
-            focusFn.scrollIntoView({block: "end"});
+            focusFn.scrollIntoView({block: "center"});
         }
     }