Design tweaks

@@ -2,6 +2,7 @@ body {
   font-family: Helvetica, sans-serif;
 	background: #eee;
   -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
 }
 
 h1, h3 { font-weight: 300; }
@@ -15,27 +16,144 @@ hgroup {
 .container {
   display: grid;
   grid-template-rows: 10vh auto;
-  grid-template-columns: auto auto auto;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-column-gap: 5vw;
+
+  // div {
+  //   border: red 1px solid;
+  // }
 }
 
 .navbar {
+  margin: -8px;
   grid-row: 1;
   grid-columns: 1/4;
 }
 
 .content {
   grid-row: 2;
-  justify-self: center;
+  justify-self: strech;
 }
 
 .left {
   grid-column: 1;
 }
 
-.center {
+.left.strech {
+  justify-self: strech;
+}
+
+.left.center {
+  justify-self: center;
+}
+
+.middle {
   grid-column: 2;
 }
 
 .right {
   grid-column: 3;
 }
+
+table {
+  width: 100%;
+  color: #808080;
+  border-collapse: collapse;
+
+  tr {
+    border-bottom: 1px solid #c3c3c3;
+  }
+
+  td {
+    font-size: 15px;
+    line-height: 1.4;
+    padding: 16px 0 16px 0;
+  }
+}
+
+.upcoming {
+  td {
+    width: 33%;
+  }
+}
+
+.recent {
+  td {
+    width: 20%;
+  }
+}
+
+.results {
+  td, th {
+    width: 33%;
+  }
+}
+
+.leaderboard {
+  th {
+    text-align: left;
+  }
+
+  td, th {
+    width: 50%;
+  }
+}
+
+// Bets
+.bets {
+  grid-template-columns: 2.5vw auto 2.5vw;
+}
+
+.pool-div {
+  grid-row: 2;
+  grid-column: 2;
+
+  input.numeric {
+    width: 80%;
+  }
+}
+
+input[type="submit"] {
+  float: right;
+  margin-top: 10px;
+  background-color: #6200ee;
+  color: white;
+  padding: 10px;
+  font-size: 18pt;
+  font-weight: bold;
+  border: none;
+}
+
+.pools {
+  td {
+    width: 16.67%
+  }
+}
+
+// Media Queries
+@media only screen and (max-width: 823px) {
+  .container.application {
+    grid-template-rows: 10vh 1fr 1fr 1fr !important;
+    grid-template-columns: auto;
+    grid-column-gap: 0px;
+  }
+
+  .left {
+    grid-row: 2;
+    grid-column: 1;
+  }
+
+  .middle {
+    grid-row: 3;
+    grid-column: 1;
+  }
+
+  .right {
+    grid-row: 4;
+    grid-column: 1;
+  }
+
+  form.login {
+    max-width: 70vw;
+  }
+}
\ No newline at end of file

 h1 Leaderboard
-table
+table.leaderboard
   thead
     th Username
     th Score

 header class="mdc-top-app-bar navbar"
   div class="mdc-top-app-bar__row"
     section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
-      a href="#" class="material-icons mdc-top-app-bar__navigation-icon" menu
-      span class="mdc-top-app-bar__title" Title
+      a href="/" class="material-icons mdc-top-app-bar__navigation-icon" aria-label="Home" alt="Home" home
+    section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
+      a href="/bets" class="material-icons mdc-top-app-bar__navigation-icon" aria-label="Attach_Money" alt="Attach_Money" attach_money
+      a href="/logout" class="material-icons mdc-top-app-bar__navigation-icon" aria-label="Exit_to_app" alt="Exit_to_app" exit_to_app
+
+    / <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+    /   <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+    /   <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page" alt="Print this page">print</a>
+    /   <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+    / </section>

 h1 Results
-table
+table.results
   thead
     th Team 1
     th Team 2

 h1 Upcoming matches
-table
+table.upcoming
   tbody
-    tr
     - @upcoming_matches.each do |u|
+      tr
         td = l(u.date, format: :short)
         td = u.local
         td = u.visit
 
 h1 Recent matches
-table
+table.recent
   tbody
     tr
       - @recent_matches.each do |match|

-.container
-  - if current_user
-    = render 'navbar'
-  .left.content
-    - if current_user
+- if current_user
+  .left.strech.content
     = render 'results'
-    - else
+- else
+  .left.center.content
     = render 'login'
-  .center.content
+.middle.content
   = render 'leaderboard'
-  .right.content
+.right.content
   = render  'upcoming_matches'

-table
+table.pools
   - pool.matches.each do |match|
     - bet = current_user.bets.find_or_initialize_by(match_id: match.id)
     = f.simple_fields_for :bets, bet, wrapper: false do|ff|

-h2 My Bets
-= simple_nested_form_for current_user, url: put_bets_path, method: :patch do |f|
+.pool-div
+  h2 My Bets
+  = simple_nested_form_for current_user, url: put_bets_path, method: :patch do |f|
     - @pools.each do |pool|
       div
         h3 = pool.name

@@ -3,14 +3,22 @@
   <head>
     <title>QuinielaMundial</title>
     <%= csrf_meta_tags %>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
     <%= stylesheet_link_tag 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css' %>
     <%= javascript_include_tag 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js', 'data-turbolinks-track': 'reload' %>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
   </head>
 
   <body>
+    <div class="container <%= controller_name %>">
+      <% if current_user %>
+        <%= render 'application/navbar' %>
+      <% end %>
       <%= yield %>
+    </div>
   </body>
 </html>