[ui] Styling

Author: g3force

ui/src/App.vue

@@ -1,13 +1,13 @@
 <template>
     <div id="app">
         <GameState/>
-        <TeamOverview team-color="Yellow" style="float: left"/>
-        <TeamOverview team-color="Blue" style="float: left"/>
+        <TeamOverview class="team-views" team-color="Yellow"/>
+        <TeamOverview class="team-views" team-color="Blue"/>
+        <ControlTeam class="team-views" team-color="Yellow"/>
+        <ControlTeam class="team-views" team-color="Blue"/>
         <ControlGeneral/>
-        <ControlTeam team-color="Yellow"/>
-        <ControlTeam team-color="Blue"/>
-        <ControlMatch/>
-        <Debug/>
+        <ControlMatch class="match-controls"/>
+        <Debug class="debug"/>
     </div>
 </template>
 
@@ -41,4 +41,21 @@
         color: #2c3e50;
         margin-top: 1em;
     }
+
+    .debug {
+        position: fixed;
+        bottom: 0;
+    }
+
+    .match-controls {
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        text-align: center;
+    }
+
+    .team-views {
+        float: left;
+        margin: 0.5em;
+    }
 </style>

ui/src/components/Debug.vue

@@ -21,11 +21,6 @@
 </script>
 
 <style scoped>
-    .debug {
-        position: absolute;
-        bottom: 0;
-    }
-
     #collapse1 {
         overflow-y: scroll;
         max-height: 500px;

ui/src/components/control/ControlGeneral.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="control-general">
+    <span class="control-general">
         <b-button v-hotkey="keymapHalt" v-on:click="send('halt')">Halt</b-button>
         <b-button v-hotkey="keymapStop" v-on:click="send('stop')">Stop</b-button>
         <b-button v-hotkey="keymapForceStart" v-on:click="send('forceStart')">Force Start</b-button>
         <b-button v-hotkey="keymapNormalStart" v-on:click="send('normalStart')">Normal Start</b-button>
-    </div>
+    </span>
 </template>
 
 <script>

ui/src/components/control/ControlMatch.vue

@@ -1,11 +1,29 @@
 <template>
     <div>
-        <b-button v-on:click="resetMatch">Reset Match</b-button>
-        <b-button v-on:click="switchColor">Switch colors</b-button>
-        <b-button v-on:click="switchSides">Switch sides</b-button>
-        <b-button v-on:click="previousStage">Previous Stage</b-button>
-        <b-button v-on:click="nextStage">Next Stage</b-button>
-        <b-button v-on:click="undo">Undo Last Action</b-button>
+        <b-button v-b-tooltip.hover title="Start a new match by resetting everything"
+                  v-on:click="resetMatch">
+            Reset Match
+        </b-button>
+        <b-button v-b-tooltip.hover title="Undo the last state change"
+                  v-on:click="undo">
+            Undo
+        </b-button>
+        <b-button v-b-tooltip.hover title="Switch the colors of the teams, keep everything else"
+                  v-on:click="switchColor">
+            Switch colors
+        </b-button>
+        <b-button v-b-tooltip.hover title="Switch the playing half (the goal) of the teams"
+                  v-on:click="switchSides">
+            Switch sides
+        </b-button>
+        <b-button v-b-tooltip.hover title="Change back to the previous stage (if something went wrong)"
+                  v-on:click="previousStage">
+            Previous Stage
+        </b-button>
+        <b-button v-b-tooltip.hover title="Proceed to the next stage"
+                  v-on:click="nextStage">
+            Next Stage
+        </b-button>
     </div>
 </template>
 

ui/src/components/control/ControlTeam.vue

@@ -8,10 +8,13 @@
 
         <br/>
 
+        <ControlTeamTimeout :team-color="teamColor"/>
         <b-button v-on:click="send('goal')">Goal</b-button>
         <b-button v-on:click="addYellowCard" v-hotkey="keymapYellowCard">Yellow Card</b-button>
+
+        <br/>
+
         <b-button v-on:click="revokeYellowCard" v-if="teamState.yellowCardTimes.length>0">Revoke Yellow Card</b-button>
-        <ControlTeamTimeout :team-color="teamColor"/>
     </div>
 </template>
 

ui/src/components/control/ControlTeamTimeout.vue

@@ -1,8 +1,8 @@
 <template>
-    <div>
+    <span>
         <b-button v-show="!timeoutRunning" v-on:click="startTimeout">Start Timeout</b-button>
         <b-button v-show="timeoutRunning" v-on:click="stopTimeout">Stop Timeout</b-button>
-    </div>
+    </span>
 </template>
 
 <script>

ui/src/components/team/TeamOverview.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="team-overview">
+    <span>
         <h2 v-b-tooltip.hover title="Edit team data by double-clicking a value"> Team {{teamColor}}</h2>
         <div>
             <TeamName
@@ -36,7 +36,7 @@
                     :yellow-cards="team.yellowCards"
                     :yellow-card-times="team.yellowCardTimes"/>
         </div>
-    </div>
+    </span>
 </template>
 
 <script>
@@ -68,8 +68,4 @@
 </script>
 
 <style scoped>
-    .team-overview {
-        margin: 1em;
-    }
-
 </style>