added styling to form and show page

README.md

@@ -10,4 +10,5 @@ I deployed the code to Heroku, so you can try it out [here.](https://vuejs-rails
 
 * Vue.js v1.0.26
 * Rails 5.0.0.1
+* Bootstrap-sass 
 * PostgreSQL

app/assets/stylesheets/application.scss

@@ -26,6 +26,22 @@
    text-transform: uppercase;
  }
 
+ .player-form {
+   width: 90%;
+   margin-left: 5%;
+ }
+
+.form-label {
+  text-transform: uppercase;
+  color: #969696;
+}
+
+.player-show {
+  text-transform: uppercase;
+  font-size: 12px;
+  color: #969696;
+}
+
  @media (min-width: 768px) {
    #new-team-form {
      width: 500px;

app/views/teams/new.html.erb

@@ -1,18 +1,25 @@
 <div class="container container-margin">
   <div id="new-team-form">
     <div class="form-group">
-      <label for="name">Team Name: </label>
+      <label for="name" class="form-label">Team Name</label>
       <input id="name" v-model="name" class="form-control">
       <p class="validation-error">{{ errors }}</p>
-
     </div>
-    <div v-for="player in players" class="form-group">
-      <label for="name">Player Name: </label>
-      <input id="name" v-model="player.name" class="form-control">
-      <label for="position">Player Position: </label>
-      <input id="position" v-model="player.position" class="form-control">
+    <div v-for="player in players">
+      <div class="form-group player-form">
+        <label for="name" class="form-label">Player Name</label>
+        <input id="name" v-model="player.name" class="form-control">
+      </div>
+      <div class="form-group player-form">
+        <label for="position" class="form-label">Player Position</label>
+        <input id="position" v-model="player.position" class="form-control">
+      </div>
+    </div>
+    <div class="form-group add-player-btn">
+      <button v-on:click="addPlayer" class="btn btn-info btn-sm">Add Player</button>
+    </div>
+    <div class="form-group">
+      <button v-on:click="saveTeam(name)" class="btn btn-success">Save Team</button>
     </div>
-    <button v-on:click="addPlayer" class="btn btn-info">Add Player</button>
-    <button v-on:click="saveTeam(name)" class="btn btn-success">Save Team</button>
   </div>
 </div>

app/views/teams/show.html.erb

@@ -1,4 +1,7 @@
-<h3><%= @team.name %></h3>
-<% @team.players.each do |player| %>
-  <p><strong>Name: </strong><%= player.name %> <strong>Position: </strong><%= player.position %></p>
-<% end %>
+<div class="container">
+  <h3><%= @team.name %></h3>
+  <% @team.players.each do |player| %>
+  <p><strong class="player-show">NAME: </strong><%= player.name %> <strong class="player-show">POSITION: </strong><%= player.position %></p>
+  <% end %>
+</div>
+

public/assets/.sprockets-manifest-967cae396325566af976d21c2999b074.json

@@ -0,0 +1 @@
+{"files":{"application-34b7eb7e26c69e257d8feb49a964279407599104a15561adee32a71222319738.js":{"logical_path":"application.js","mtime":"2016-10-04T17:23:14-05:00","size":607981,"digest":"34b7eb7e26c69e257d8feb49a964279407599104a15561adee32a71222319738","integrity":"sha256-NLfrfibGniV9j+tJqWQnlAdZkQShVWGt7jKnEiIxlzg="},"application-f9dd1bde716af899d2c3897a10e8bfe227a78b2e0125c88bc3f4e22a13fc49a2.css":{"logical_path":"application.css","mtime":"2016-10-04T19:42:57-05:00","size":368738,"digest":"f9dd1bde716af899d2c3897a10e8bfe227a78b2e0125c88bc3f4e22a13fc49a2","integrity":"sha256-+d0b3nFq+JnSw4l6EOi/4ieniy4BJciLw/TiKhP8SaI="},"bootstrap/glyphicons-halflings-regular-13634da87d9e23f8c3ed9108ce1724d183a39ad072e73e1b3d8cbf646d2d0407.eot":{"logical_path":"bootstrap/glyphicons-halflings-regular.eot","mtime":"2016-08-05T14:07:52-05:00","size":20127,"digest":"13634da87d9e23f8c3ed9108ce1724d183a39ad072e73e1b3d8cbf646d2d0407","integrity":"sha256-E2NNqH2eI/jD7ZEIzhck0YOjmtBy5z4bPYy/ZG0tBAc="},"bootstrap/glyphicons-halflings-regular-fe185d11a49676890d47bb783312a0cda5a44c4039214094e7957b4c040ef11c.woff2":{"logical_path":"bootstrap/glyphicons-halflings-regular.woff2","mtime":"2016-08-05T14:07:52-05:00","size":18028,"digest":"fe185d11a49676890d47bb783312a0cda5a44c4039214094e7957b4c040ef11c","integrity":"sha256-/hhdEaSWdokNR7t4MxKgzaWkTEA5IUCU55V7TAQO8Rw="},"bootstrap/glyphicons-halflings-regular-a26394f7ede100ca118eff2eda08596275a9839b959c226e15439557a5a80742.woff":{"logical_path":"bootstrap/glyphicons-halflings-regular.woff","mtime":"2016-08-05T14:07:52-05:00","size":23424,"digest":"a26394f7ede100ca118eff2eda08596275a9839b959c226e15439557a5a80742","integrity":"sha256-omOU9+3hAMoRjv8u2ghZYnWpg5uVnCJuFUOVV6WoB0I="},"bootstrap/glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf":{"logical_path":"bootstrap/glyphicons-halflings-regular.ttf","mtime":"2016-08-05T14:07:52-05:00","size":45404,"digest":"e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456","integrity":"sha256-45UEQJN1fYKvyxOJV9BqHqk2G9zwtELQahioBRr1dFY="},"bootstrap/glyphicons-halflings-regular-42f60659d265c1a3c30f9fa42abcbb56bd4a53af4d83d316d6dd7a36903c43e5.svg":{"logical_path":"bootstrap/glyphicons-halflings-regular.svg","mtime":"2016-08-05T14:07:52-05:00","size":108738,"digest":"42f60659d265c1a3c30f9fa42abcbb56bd4a53af4d83d316d6dd7a36903c43e5","integrity":"sha256-QvYGWdJlwaPDD5+kKry7Vr1KU69Ng9MW1t16NpA8Q+U="}},"assets":{"application.js":"application-34b7eb7e26c69e257d8feb49a964279407599104a15561adee32a71222319738.js","application.css":"application-f9dd1bde716af899d2c3897a10e8bfe227a78b2e0125c88bc3f4e22a13fc49a2.css","bootstrap/glyphicons-halflings-regular.eot":"bootstrap/glyphicons-halflings-regular-13634da87d9e23f8c3ed9108ce1724d183a39ad072e73e1b3d8cbf646d2d0407.eot","bootstrap/glyphicons-halflings-regular.woff2":"bootstrap/glyphicons-halflings-regular-fe185d11a49676890d47bb783312a0cda5a44c4039214094e7957b4c040ef11c.woff2","bootstrap/glyphicons-halflings-regular.woff":"bootstrap/glyphicons-halflings-regular-a26394f7ede100ca118eff2eda08596275a9839b959c226e15439557a5a80742.woff","bootstrap/glyphicons-halflings-regular.ttf":"bootstrap/glyphicons-halflings-regular-e395044093757d82afcb138957d06a1ea9361bdcf0b442d06a18a8051af57456.ttf","bootstrap/glyphicons-halflings-regular.svg":"bootstrap/glyphicons-halflings-regular-42f60659d265c1a3c30f9fa42abcbb56bd4a53af4d83d316d6dd7a36903c43e5.svg"}}