Patricio Sanchez / quiniela-mundial

Go to a project
Toggle navigation Toggle navigation pinning
psanchezp
3c947293 1 parent fb67d784

Design tweaks

Inline Side-by-side
Showing 9 changed files with 154 additions and 21 deletions
...@@ -2,6 +2,7 @@ body { ...@@ -2,6 +2,7 @@ body {
2 font-family: Helvetica, sans-serif; 2 font-family: Helvetica, sans-serif;
3 background: #eee; 3 background: #eee;
4 -webkit-font-smoothing: antialiased; 4 -webkit-font-smoothing: antialiased;
5 + overflow-x: hidden;
5 } 6 }
6 7
7 h1, h3 { font-weight: 300; } 8 h1, h3 { font-weight: 300; }
...@@ -15,27 +16,144 @@ hgroup { ...@@ -15,27 +16,144 @@ hgroup {
15 .container { 16 .container {
16 display: grid; 17 display: grid;
17 grid-template-rows: 10vh auto; 18 grid-template-rows: 10vh auto;
18 - grid-template-columns: auto auto auto; 19 + grid-template-columns: 1fr 1fr 1fr;
20 + grid-column-gap: 5vw;
21 +
22 + // div {
23 + // border: red 1px solid;
24 + // }
19 } 25 }
20 26
21 .navbar { 27 .navbar {
28 + margin: -8px;
22 grid-row: 1; 29 grid-row: 1;
23 grid-columns: 1/4; 30 grid-columns: 1/4;
24 } 31 }
25 32
26 .content { 33 .content {
27 grid-row: 2; 34 grid-row: 2;
28 - justify-self: center; 35 + justify-self: strech;
29 } 36 }
30 37
31 .left { 38 .left {
32 grid-column: 1; 39 grid-column: 1;
33 } 40 }
34 41
35 -.center { 42 +.left.strech {
43 + justify-self: strech;
44 +}
45 +
46 +.left.center {
47 + justify-self: center;
48 +}
49 +
50 +.middle {
36 grid-column: 2; 51 grid-column: 2;
37 } 52 }
38 53
39 .right { 54 .right {
40 grid-column: 3; 55 grid-column: 3;
41 } 56 }
57 +
58 +table {
59 + width: 100%;
60 + color: #808080;
61 + border-collapse: collapse;
62 +
63 + tr {
64 + border-bottom: 1px solid #c3c3c3;
65 + }
66 +
67 + td {
68 + font-size: 15px;
69 + line-height: 1.4;
70 + padding: 16px 0 16px 0;
71 + }
72 +}
73 +
74 +.upcoming {
75 + td {
76 + width: 33%;
77 + }
78 +}
79 +
80 +.recent {
81 + td {
82 + width: 20%;
83 + }
84 +}
85 +
86 +.results {
87 + td, th {
88 + width: 33%;
89 + }
90 +}
91 +
92 +.leaderboard {
93 + th {
94 + text-align: left;
95 + }
96 +
97 + td, th {
98 + width: 50%;
99 + }
100 +}
101 +
102 +// Bets
103 +.bets {
104 + grid-template-columns: 2.5vw auto 2.5vw;
105 +}
106 +
107 +.pool-div {
108 + grid-row: 2;
109 + grid-column: 2;
110 +
111 + input.numeric {
112 + width: 80%;
113 + }
114 +}
115 +
116 +input[type="submit"] {
117 + float: right;
118 + margin-top: 10px;
119 + background-color: #6200ee;
120 + color: white;
121 + padding: 10px;
122 + font-size: 18pt;
123 + font-weight: bold;
124 + border: none;
125 +}
126 +
127 +.pools {
128 + td {
129 + width: 16.67%
130 + }
131 +}
132 +
133 +// Media Queries
134 +@media only screen and (max-width: 823px) {
135 + .container.application {
136 + grid-template-rows: 10vh 1fr 1fr 1fr !important;
137 + grid-template-columns: auto;
138 + grid-column-gap: 0px;
139 + }
140 +
141 + .left {
142 + grid-row: 2;
143 + grid-column: 1;
144 + }
145 +
146 + .middle {
147 + grid-row: 3;
148 + grid-column: 1;
149 + }
150 +
151 + .right {
152 + grid-row: 4;
153 + grid-column: 1;
154 + }
155 +
156 + form.login {
157 + max-width: 70vw;
158 + }
159 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 h1 Leaderboard 1 h1 Leaderboard
2 -table 2 +table.leaderboard
3 thead 3 thead
4 th Username 4 th Username
5 th Score 5 th Score
......
1 header class="mdc-top-app-bar navbar" 1 header class="mdc-top-app-bar navbar"
2 div class="mdc-top-app-bar__row" 2 div class="mdc-top-app-bar__row"
3 section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start" 3 section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
4 - a href="#" class="material-icons mdc-top-app-bar__navigation-icon" menu 4 + a href="/" class="material-icons mdc-top-app-bar__navigation-icon" aria-label="Home" alt="Home" home
5 - span class="mdc-top-app-bar__title" Title 5 + section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
6 + a href="/bets" class="material-icons mdc-top-app-bar__navigation-icon" aria-label="Attach_Money" alt="Attach_Money" attach_money
7 + a href="/logout" class="material-icons mdc-top-app-bar__navigation-icon" aria-label="Exit_to_app" alt="Exit_to_app" exit_to_app
8 +
9 + / <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
10 + / <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
11 + / <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page" alt="Print this page">print</a>
12 + / <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
13 + / </section>
......
1 h1 Results 1 h1 Results
2 -table 2 +table.results
3 thead 3 thead
4 th Team 1 4 th Team 1
5 th Team 2 5 th Team 2
......
1 h1 Upcoming matches 1 h1 Upcoming matches
2 -table 2 +table.upcoming
3 tbody 3 tbody
4 - tr
5 - @upcoming_matches.each do |u| 4 - @upcoming_matches.each do |u|
5 + tr
6 td = l(u.date, format: :short) 6 td = l(u.date, format: :short)
7 td = u.local 7 td = u.local
8 td = u.visit 8 td = u.visit
9 9
10 h1 Recent matches 10 h1 Recent matches
11 -table 11 +table.recent
12 tbody 12 tbody
13 tr 13 tr
14 - @recent_matches.each do |match| 14 - @recent_matches.each do |match|
......
1 -.container 1 +- if current_user
2 - - if current_user 2 + .left.strech.content
3 - = render 'navbar'
4 - .left.content
5 - - if current_user
6 = render 'results' 3 = render 'results'
7 - - else 4 +- else
5 + .left.center.content
8 = render 'login' 6 = render 'login'
9 - .center.content 7 +.middle.content
10 = render 'leaderboard' 8 = render 'leaderboard'
11 - .right.content 9 +.right.content
12 = render 'upcoming_matches' 10 = render 'upcoming_matches'
......
1 -table 1 +table.pools
2 - pool.matches.each do |match| 2 - pool.matches.each do |match|
3 - bet = current_user.bets.find_or_initialize_by(match_id: match.id) 3 - bet = current_user.bets.find_or_initialize_by(match_id: match.id)
4 = f.simple_fields_for :bets, bet, wrapper: false do|ff| 4 = f.simple_fields_for :bets, bet, wrapper: false do|ff|
......
1 -h2 My Bets 1 +.pool-div
2 -= simple_nested_form_for current_user, url: put_bets_path, method: :patch do |f| 2 + h2 My Bets
3 + = simple_nested_form_for current_user, url: put_bets_path, method: :patch do |f|
3 - @pools.each do |pool| 4 - @pools.each do |pool|
4 div 5 div
5 h3 = pool.name 6 h3 = pool.name
......
...@@ -3,14 +3,22 @@ ...@@ -3,14 +3,22 @@
3 <head> 3 <head>
4 <title>QuinielaMundial</title> 4 <title>QuinielaMundial</title>
5 <%= csrf_meta_tags %> 5 <%= csrf_meta_tags %>
6 + <meta name="viewport" content="width=device-width, initial-scale=1">
6 7
7 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
8 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
9 <%= stylesheet_link_tag 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css' %> 10 <%= stylesheet_link_tag 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css' %>
10 <%= javascript_include_tag 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js', 'data-turbolinks-track': 'reload' %> 11 <%= javascript_include_tag 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js', 'data-turbolinks-track': 'reload' %>
12 + <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
13 + rel="stylesheet">
11 </head> 14 </head>
12 15
13 <body> 16 <body>
17 + <div class="container <%= controller_name %>">
18 + <% if current_user %>
19 + <%= render 'application/navbar' %>
20 + <% end %>
14 <%= yield %> 21 <%= yield %>
22 + </div>
15 </body> 23 </body>
16 </html> 24 </html>
......