Showing
9 changed files
with
168 additions
and
35 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 | 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 Upcoming matches | 1 | h1 Upcoming matches |
2 | -table | 2 | +table.upcoming |
3 | tbody | 3 | tbody |
4 | - tr | 4 | + - @upcoming_matches.each do |u| |
5 | - - @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' | 3 | + = render 'results' |
4 | - .left.content | 4 | +- else |
5 | - - if current_user | 5 | + .left.center.content |
6 | - = render 'results' | 6 | + = render 'login' |
7 | - - else | 7 | +.middle.content |
8 | - = render 'login' | 8 | + = render 'leaderboard' |
9 | - .center.content | 9 | +.right.content |
10 | - = render 'leaderboard' | 10 | + = render 'upcoming_matches' |
11 | - .right.content | ||
12 | - = 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 | - - @pools.each do |pool| | 3 | + = simple_nested_form_for current_user, url: put_bets_path, method: :patch do |f| |
4 | + - @pools.each do |pool| | ||
5 | + div | ||
6 | + h3 = pool.name | ||
7 | + - if pool.editable? | ||
8 | + = render 'pool_form', pool: pool, f: f | ||
9 | + - else | ||
10 | + = render 'readonly_pool', pool: pool | ||
4 | div | 11 | div |
5 | - h3 = pool.name | 12 | + = f.submit 'Save' |
6 | - - if pool.editable? | ||
7 | - = render 'pool_form', pool: pool, f: f | ||
8 | - - else | ||
9 | - = render 'readonly_pool', pool: pool | ||
10 | - div | ||
11 | - = f.submit 'Save' | ... | ... |
... | @@ -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> |
14 | - <%= yield %> | 17 | + <div class="container <%= controller_name %>"> |
18 | + <% if current_user %> | ||
19 | + <%= render 'application/navbar' %> | ||
20 | + <% end %> | ||
21 | + <%= yield %> | ||
22 | + </div> | ||
15 | </body> | 23 | </body> |
16 | </html> | 24 | </html> | ... | ... |
-
Please register or login to post a comment