Clean up some styling in scouting app.
Correctly set columns for scores.
Switch margin to padding to not mess up bootstrap styles.
Add back button on screens that can go back.
Change-Id: I25de3c6de2d93564bfbe74cd7aa3bb1de933a4e3
Signed-off-by: Alex Perry <alex.perry96@gmail.com>
diff --git a/scouting/www/entry/entry.ng.html b/scouting/www/entry/entry.ng.html
index c20edf9..da77ce6 100644
--- a/scouting/www/entry/entry.ng.html
+++ b/scouting/www/entry/entry.ng.html
@@ -30,57 +30,60 @@
</form>
</div>
<div class="row justify-content-center">
- <div class="col-sm">
- <h4>Upper Shots Made</h4>
- <button (click)="adjustAutoUpper(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Upper</h4>
+ <button (click)="adjustAutoUpper(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{autoUpperShotsMade}}</h3>
- <button (click)="adjustAutoUpper(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustAutoUpper(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
- <div class="col-sm">
- <h4>Lower Shots Made</h4>
- <button (click)="adjustAutoLower(1)" class="col-xs btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Lower</h4>
+ <button (click)="adjustAutoLower(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{autoLowerShotsMade}}</h3>
- <button (click)="adjustAutoLower(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustAutoLower(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
- <div class="col-sm">
- <h4>Missed Shots</h4>
- <button (click)="adjustAutoMissed(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Missed</h4>
+ <button (click)="adjustAutoMissed(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{autoShotsMissed}}</h3>
- <button (click)="adjustAutoMissed(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustAutoMissed(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
</div>
- <div class="text-right">
- <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ <div class="buttons">
+ <!-- hack to right align the next button -->
+ <div></div>
+ <button class="btn btn-primary" (click)="nextSection()">Next</button>
</div>
</div>
<div *ngSwitchCase="'TeleOp'" id="teleop" class="container-fluid">
<div class="row justify-content-center">
- <div class="col-sm">
- <h4>Upper Shots Made</h4>
- <button (click)="adjustTeleUpper(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Upper</h4>
+ <button (click)="adjustTeleUpper(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{teleUpperShotsMade}}</h3>
- <button (click)="adjustTeleUpper(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustTeleUpper(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
- <div class="col-sm">
- <h4>Lower Shots Made</h4>
- <button (click)="adjustTeleLower(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Lower</h4>
+ <button (click)="adjustTeleLower(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{teleLowerShotsMade}}</h3>
- <button (click)="adjustTeleLower(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustTeleLower(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
- <div class="col-sm">
- <h4>Missed Shots</h4>
- <button (click)="adjustTeleMissed(1)" class="btn btn-secondary">+</button>
+ <span class="col-4 center-column">
+ <h4>Missed</h4>
+ <button (click)="adjustTeleMissed(1)" class="btn btn-secondary btn-block">+</button>
<h3>{{teleShotsMissed}}</h3>
- <button (click)="adjustTeleMissed(-1)" class="btn btn-secondary">-</button>
- </div>
+ <button (click)="adjustTeleMissed(-1)" class="btn btn-secondary btn-block">-</button>
+ </span>
</div>
- <div class="text-right">
- <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ <div class="buttons">
+ <button class="btn btn-primary" (click)="prevSection()">Back</button>
+ <button class="btn btn-primary" (click)="nextSection()">Next</button>
</div>
</div>
@@ -105,7 +108,10 @@
<h4>Comments</h4>
<textarea></textarea>
</div>
- <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ <div class="buttons">
+ <button class="btn btn-primary" (click)="prevSection()">Back</button>
+ <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ </div>
</div>
<div *ngSwitchCase="'Defense'" id="defense" class="container-fluid">
@@ -117,7 +123,7 @@
</div>
<div class="col">
- <input type="range" min="1" max="100" value="50" (input)="defensePlayedOnSlider($event)">
+ <input type="range" min="1" max="5" value="3" (input)="defensePlayedOnSlider($event)">
</div>
<div class="col">
@@ -136,7 +142,7 @@
</div>
<div class="col">
- <input type="range" min="1" max="100" value="50" (input)="defensePlayedSlider($event)">
+ <input type="range" min="1" max="5" value="3" (input)="defensePlayedSlider($event)">
</div>
<div class="col">
@@ -145,7 +151,10 @@
</div>
<h6 class="text-center">{{defensePlayedScore}}</h6>
- <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ <div class="buttons">
+ <button class="btn btn-primary" (click)="prevSection()">Back</button>
+ <button class="btn btn-primary" (click)="nextSection()">Next</button>
+ </div>
</div>
<div *ngSwitchCase="'Review and Submit'" id="review" class="container-fluid">
@@ -180,6 +189,9 @@
<li>Defense Played Raing: {{defensePlayedScore}}</li>
</ul>
- <button class="btn btn-primary" (click)="nextSection()">Submit</button>
+ <div class="buttons">
+ <button class="btn btn-primary" (click)="prevSection()">Back</button>
+ <button class="btn btn-primary" (click)="nextSection()">Submit</button>
+ </div>
</div>
</ng-container>