[styling] Add borders around views

Author: g3force

src/assets/css/style.css

@@ -30,5 +30,9 @@ button, .btn-group {
 }
 
 .game-controller-view {
-    margin: 0.5em;
+    margin: 0.25em;
+    padding: 0.25em;
+    border-style: dashed;
+    border-radius: 10px;
+    border-width: 0.1em;
 }

src/components/game-events/GameEventsView.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="game-controller-view">
         <h2>Game Events</h2>
+        <hr>
         <div class="game-events">
             <CurrentEvents/>
             <hr>

src/components/manual-control/ManualControlView.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="game-controller-view">
         <h2>Manual Control</h2>
+        <hr>
         <table>
             <tr>
                 <td colspan="2">

src/components/protocol/ProtocolView.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="game-controller-view">
         <h2>Game Protocol</h2>
+        <hr>
         <EventTable :current-page="currentPage" :per-page="perPage" :events="events"/>
         <div class="event-controls-container">
 

src/components/team/TeamOverviewView.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="game-controller-view">
         <h2>Team Overview</h2>
+        <hr>
         <table>
             <tr>
                 <th class="team-yellow">{{teamYellow.name}}</th>
@@ -155,6 +156,35 @@
 <style scoped>
     .label-column {
         font-weight: bold;
+    }
+
+    td {
         padding: 0.5em;
     }
+
+    table {
+        border-collapse: collapse;
+    }
+
+    table td, table th {
+        border: 1px solid black;
+    }
+
+    table tr:first-child th {
+        border-top: 0;
+    }
+
+    table tr:last-child td {
+        border-bottom: 0;
+    }
+
+    table tr td:first-child,
+    table tr th:first-child {
+        border-left: 0;
+    }
+
+    table tr td:last-child,
+    table tr th:last-child {
+        border-right: 0;
+    }
 </style>