Minor appearance tweaks

paavo.html

@@ -24,6 +24,9 @@
     .row + .row {
       margin-top: 5em;
     }
+    .direction {
+      width: 120px;
+    }
   </style>
 </head>
 
@@ -47,37 +50,36 @@
   </script>
 
   <!-- Add your site or application content here -->
-  <p>Hello world! This is HTML5 Boilerplate.</p>
   <script src="js/vendor/modernizr-3.11.2.min.js"></script>
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
   <div class="container">
     <div class="row">
-      <div class="col-sm">
-        <button id="direction1" type="button" class="btn btn-lg btn-light" disabled>Suunta 1</button>
+      <div class="col">
+        <button id="direction1" type="button" class="direction btn btn-lg btn-light" disabled>Suunta 1</button>
       </div>
-      <div class="col-sm">
-        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 1, VEHICLE_CAR)">Henkilöauto</button>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 1, VEHICLE_CAR)">Henkilö&shy;auto</button>
       </div>
-      <div class="col-sm">
+      <div class="col">
         <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 1, VEHICLE_TRUCK)">Kuorma-auto</button>
       </div>
-      <div class="col-sm">
+      <div class="col">
         <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 1, VEHICLE_BUS)">Bussi</button>
       </div>
     </div>
     <div class="row">
-      <div class="col-sm">
-        <button id="direction2" type="button" class="btn btn-lg btn-light" disabled>Suunta 2</button>
+      <div class="col">
+        <button id="direction2" type="button" class="direction btn btn-lg btn-light" disabled>Suunta 2</button>
       </div>
-      <div class="col-sm">
-        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 2, VEHICLE_CAR)">Henkilöauto</button>
+      <div class="col">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 2, VEHICLE_CAR)">Henkilö&shy;auto</button>
       </div>
-      <div class="col-sm">
+      <div class="col">
         <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 2, VEHICLE_TRUCK)">Kuorma-auto</button>
       </div>
-      <div class="col-sm">
+      <div class="col">
         <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 2, VEHICLE_BUS)">Bussi</button>
       </div>
     </div>