commit aa7d11f9cce88996951704df436511f41fe6bb20
author Filip Kujawa <filip.j.kujawa@gmail.com> Thu Apr 13 09:12:32 2023 -0700
committer Filip Kujawa <filip.j.kujawa@gmail.com> Thu Apr 13 22:13:42 2023 -0700
tree 08976b3a1dcaf4a4f0c6d367bc063374e12df588
parent 2c5bc2d63c3f0dad7984af2dbb68cc104a564c24

Scouting: Improve entry spacing for better visibility

This change dynamically changes spacing between buttons so that
all buttons and elements are visible without scrolling on most
devices. Currently, the switch to teleop button is hidden on
many devices causing scouts to forget to switch to teleop.
Also, this change makes the switch to teleop button color
black so it is more visible.

Signed-off-by: Filip Kujawa <filip.j.kujawa@gmail.com>
Change-Id: I5c1772eaff9ddd96278abea7d04e16e203cd611a

scouting/www/entry/entry.ng.html

diff --git a/scouting/www/entry/entry.ng.html b/scouting/www/entry/entry.ng.html
index 95387ad..28a93aa 100644
--- a/scouting/www/entry/entry.ng.html
+++ b/scouting/www/entry/entry.ng.html
@@ -89,7 +89,13 @@
     <h6 class="text-muted">
       Last Action: {{actionList[actionList.length - 1].type}}
     </h6>
-    <div class="d-grid gap-5">
+    <!-- 
+      Decrease distance between buttons during auto to make space for auto balancing
+      selection and keep all buttons visible without scrolling on most devices.
+    -->
+    <div
+      [ngClass]="{'d-grid': true, 'gap-3': autoPhase === true, 'gap-5': autoPhase === false}"
+    >
       <button class="btn btn-secondary" (click)="undoLastAction()">UNDO</button>
       <button
         class="btn btn-danger"
@@ -133,7 +139,7 @@
       </div>
       <button
         *ngIf="autoPhase"
-        class="btn btn-info"
+        class="btn btn-dark"
         (click)="autoPhase = false; addAction({type: 'endAutoPhase'});"
       >
         Start Teleop
@@ -151,7 +157,13 @@
     <h6 class="text-muted">
       Last Action: {{actionList[actionList.length - 1].type}}
     </h6>
-    <div class="d-grid gap-5">
+    <!-- 
+      Decrease distance between buttons during auto to make space for auto balancing
+      selection and keep all buttons visible without scrolling on most devices.
+    -->
+    <div
+      [ngClass]="{'d-grid': true, 'gap-3': autoPhase === true, 'gap-5': autoPhase === false}"
+    >
       <button class="btn btn-secondary" (click)="undoLastAction()">UNDO</button>
       <button
         class="btn btn-danger"
@@ -210,7 +222,7 @@
       </div>
       <button
         *ngIf="autoPhase"
-        class="btn btn-info"
+        class="btn btn-dark"
         (click)="autoPhase = false; addAction({type: 'endAutoPhase'});"
       >
         Start Teleop