[ui] Introduce flexbox styling

Author: g3force

ui/src/App.vue

@@ -1,14 +1,18 @@
 <template>
     <div id="app">
-        <GameState/>
-        <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/>
-        <ControlMatch class="match-controls"/>
-        <Debug class="debug"/>
+        <div id="header">
+            <ControlGeneral class="header-item"/>
+            <GameState id="game-state" class="header-item"/>
+        </div>
+        <div id="main-elements">
+            <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"/>
+        </div>
         <Field/>
+        <ControlMatch id="match-controls"/>
+        <Debug id="debug"/>
     </div>
 </template>
 
@@ -42,21 +46,47 @@
         -moz-osx-font-smoothing: grayscale;
         text-align: center;
         color: #2c3e50;
-        margin-top: 1em;
     }
 
-    .debug {
-        position: fixed;
-        bottom: 0;
+    #header {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap-reverse;
+        justify-content: space-between;
+        align-items: baseline;
+        align-content: flex-start;
+    }
+
+    .header-item {
+        margin: 0.3em;
+    }
+
+    #game-state {
+        font-size: 1.2em;
+        font-weight: bold;
     }
 
-    .match-controls {
+    #main-elements {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+        align-content: flex-start;
+    }
+
+    #match-controls {
         width: 100%;
         position: fixed;
         bottom: 0;
         text-align: center;
     }
 
+    #debug {
+        position: fixed;
+        bottom: 0;
+    }
+
     .team-views {
         float: left;
         margin: 0.5em;

ui/src/components/GameState.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="game-state">
+    <div>
         <span v-b-tooltip.hover title="The current stage of the game">
             {{state.stage}}
         </span>
@@ -36,23 +36,5 @@
     }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-    h3 {
-        margin: 40px 0 0;
-    }
-
-    ul {
-        list-style-type: none;
-        padding: 0;
-    }
-
-    li {
-        display: inline-block;
-        margin: 0 10px;
-    }
-
-    a {
-        color: #42b983;
-    }
 </style>

ui/src/components/control/ControlGeneral.vue

@@ -79,6 +79,7 @@
 
 <style scoped>
     button {
-        margin: 0.5em;
+        margin-right: 0.5em;
+        margin-bottom: 0.5em;
     }
 </style>

ui/src/components/team/TeamOverview.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="team-overview">
         <h2 v-b-tooltip.hover title="Edit team data by double-clicking a value"> Team {{teamColor}}</h2>
         <div>
             <TeamName
@@ -68,4 +68,7 @@
 </script>
 
 <style scoped>
+    .team-overview {
+        text-align: left;
+    }
 </style>