[refactoring] Unify button margins

Author: g3force

src/assets/css/style.css

@@ -15,3 +15,7 @@
 .team-blue {
     color: blue;
 }
+
+button, .btn-group {
+    margin: 0.25em;
+}

src/components/common/DualSwitch.vue

@@ -46,7 +46,7 @@
 
 <style scoped>
 
-    button, .switch {
+    .switch {
         margin: 0.25em;
     }
 

src/components/control/ControlFlowBar.vue

@@ -76,8 +76,4 @@
 </script>
 
 <style scoped>
-    button {
-        margin-right: 0.5em;
-        margin-bottom: 0.5em;
-    }
 </style>

src/components/control/MatchSettingsBar.vue

@@ -108,10 +108,6 @@
 </script>
 
 <style scoped>
-    button, .btn-group {
-        margin-right: 0.5em;
-        margin-bottom: 0.5em;
-    }
 
     .btn-active {
         background-color: green;

src/components/events/Events.vue

@@ -6,8 +6,7 @@
             <b-pagination size="sm"
                           :total-rows="events.length"
                           v-model="currentPage"
-                          :per-page="perPage">
-            </b-pagination>
+                          :per-page="perPage"/>
 
             <input v-model.number="perPage"
                    title="Rows per page"
@@ -61,12 +60,9 @@
         justify-content: center;
     }
 
-    .event-controls-container button, input {
-        margin-bottom: 1rem;
-        margin-left: 1rem;
-    }
-
     input {
         text-align: center;
+        margin-bottom: 1rem;
+        margin-left: 1rem;
     }
 </style>

src/components/manual-control/ControlTeamTimeout.vue

@@ -1,5 +1,6 @@
 <template>
     <b-button v-on:click="toggleTimeout"
+              class="manual-control-button"
               v-bind:disabled="disableTimeoutButton">
         {{timeoutRunning ? 'Stop' : 'Start'}} Timeout
     </b-button>

src/components/manual-control/ManualControl.vue

@@ -87,3 +87,9 @@
 
 <style scoped>
 </style>
+
+<style>
+    .manual-control-button {
+        width: 90%;
+    }
+</style>

src/components/manual-control/ManualControlCommon.vue

@@ -6,6 +6,7 @@
                      :title="'Immediately stop all robots (' + Object.keys(keymapHalt)[0] + ')'">
                     <b-button v-hotkey="keymapHalt"
                               ref="btnHalt"
+                              class="manual-control-button"
                               v-on:click="send('halt')"
                               v-bind:disabled="halted">
                         Halt
@@ -17,6 +18,7 @@
                      :title="'Robots have to keep distance to the ball (' + Object.keys(keymapStop)[0] + ')'">
                     <b-button v-hotkey="keymapStop"
                               ref="btnStop"
+                              class="manual-control-button"
                               v-on:click="send('stop')"
                               v-bind:disabled="stopped || !stopAllowed">
                         Stop
@@ -30,6 +32,7 @@
                      :title="'Restart the game in draw situations (' + Object.keys(keymapForceStart)[0] + ')'">
                     <b-button v-hotkey="keymapForceStart"
                               ref="btnForceStart"
+                              class="manual-control-button"
                               v-on:click="send('forceStart')"
                               v-bind:disabled="!stopped || !forceStartAllowed">
                         Force Start
@@ -41,6 +44,7 @@
                      :title="'Continue game after a prepare state (' + Object.keys(keymapNormalStart)[0] + ')'">
                     <b-button v-hotkey="keymapNormalStart"
                               ref="btnNormalStart"
+                              class="manual-control-button"
                               v-on:click="send('normalStart')"
                               v-bind:disabled="!prepareSth || !normalStartAllowed">
                         Normal Start
@@ -125,11 +129,6 @@
 </script>
 
 <style scoped>
-    button {
-        margin: 0.5em;
-        width: 90%;
-    }
-
     table {
         width: 100%;
     }

src/components/manual-control/ManualControlTeam.vue

@@ -1,21 +1,25 @@
 <template>
     <div class="container">
         <b-button v-on:click="addYellowCard"
+                  class="manual-control-button"
                   v-bind:disabled="running || preparing">
             Add Yellow Card
         </b-button>
 
         <b-button v-on:click="revokeYellowCard"
+                  class="manual-control-button"
                   v-bind:disabled="teamState.yellowCardTimes.length===0">
             Revoke Yellow Card
         </b-button>
 
         <b-button v-on:click="addRedCard"
+                  class="manual-control-button"
                   v-bind:disabled="running || preparing">
             Add Red Card
         </b-button>
 
-        <b-button v-on:click="addGoal">
+        <b-button v-on:click="addGoal"
+                  class="manual-control-button">
             Goal
         </b-button>
 
@@ -116,9 +120,4 @@
         padding-left: 0;
         padding-right: 0;
     }
-
-    button {
-        margin: 0.5em;
-        width: 90%;
-    }
 </style>

src/components/manual-control/ManualControlTeamMatchCommands.vue

@@ -4,6 +4,7 @@
              :title="'Perform direct kick (corner and goal kicks) (' + Object.keys(keymapDirect)[0] + ')'">
             <b-button v-hotkey="keymapDirect"
                       ref="btnDirect"
+                      class="manual-control-button"
                       v-on:click="sendDirect"
                       v-bind:disabled="halted || running || preparing || !nonPausedStage">
                 Direct
@@ -13,6 +14,7 @@
              :title="'Perform indirect kick (throw-in) (' + Object.keys(keymapIndirect)[0] + ')'">
             <b-button v-hotkey="keymapIndirect"
                       ref="btnIndirect"
+                      class="manual-control-button"
                       v-on:click="sendIndirect"
                       v-bind:disabled="halted || running || preparing || !nonPausedStage">
                 Indirect
@@ -22,6 +24,7 @@
              :title="'Prepare for a kickoff (' + Object.keys(keymapKickoff)[0] + ')'">
             <b-button v-hotkey="keymapKickoff"
                       ref="btnKickoff"
+                      class="manual-control-button"
                       v-on:click="sendKickoff"
                       v-bind:disabled="halted || running || preparing">
                 Kickoff
@@ -30,6 +33,7 @@
         <div v-b-tooltip.hover
              title="Prepare for a penalty kick">
             <b-button v-on:click="sendPenalty"
+                      class="manual-control-button"
                       v-bind:disabled="halted || running || preparing || !nonPausedStage">
                 Penalty
             </b-button>
@@ -127,9 +131,4 @@
         padding-left: 0;
         padding-right: 0;
     }
-
-    button {
-        margin: 0.5em;
-        width: 90%;
-    }
 </style>