Patricio Sanchez / quiniela-mundial

Go to a project
Toggle navigation Toggle navigation pinning
Iker Narvaez
b32344a0 1 parent 720abcfd

login form

Inline Side-by-side
Showing 8 changed files with 300 additions and 8 deletions
...@@ -12,6 +12,7 @@ gem 'paper_trail' ...@@ -12,6 +12,7 @@ gem 'paper_trail'
12 gem 'will_paginate' 12 gem 'will_paginate'
13 gem 'nested_form' 13 gem 'nested_form'
14 gem 'simple_form' 14 gem 'simple_form'
15 +gem 'pry'
15 16
16 17
17 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 18 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
......
...@@ -72,6 +72,7 @@ GEM ...@@ -72,6 +72,7 @@ GEM
72 bootstrap-switch-rails (3.3.3) 72 bootstrap-switch-rails (3.3.3)
73 builder (3.2.3) 73 builder (3.2.3)
74 byebug (10.0.2) 74 byebug (10.0.2)
75 + coderay (1.1.2)
75 coffee-rails (4.2.2) 76 coffee-rails (4.2.2)
76 coffee-script (>= 2.2.0) 77 coffee-script (>= 2.2.0)
77 railties (>= 4.0.0) 78 railties (>= 4.0.0)
...@@ -121,6 +122,9 @@ GEM ...@@ -121,6 +122,9 @@ GEM
121 paranoia (2.4.1) 122 paranoia (2.4.1)
122 activerecord (>= 4.0, < 5.3) 123 activerecord (>= 4.0, < 5.3)
123 pg (1.0.0) 124 pg (1.0.0)
125 + pry (0.11.3)
126 + coderay (~> 1.1.0)
127 + method_source (~> 0.9.0)
124 puma (3.11.4) 128 puma (3.11.4)
125 rack (2.0.5) 129 rack (2.0.5)
126 rack-test (0.6.3) 130 rack-test (0.6.3)
...@@ -236,6 +240,7 @@ DEPENDENCIES ...@@ -236,6 +240,7 @@ DEPENDENCIES
236 paper_trail 240 paper_trail
237 paranoia 241 paranoia
238 pg 242 pg
243 + pry
239 puma (~> 3.0) 244 puma (~> 3.0)
240 rails (~> 5.0.6) 245 rails (~> 5.0.6)
241 sass-rails (~> 5.0) 246 sass-rails (~> 5.0)
......
1 +form.login {
2 + * { box-sizing:border-box; }
3 + width: 380px;
4 + // margin: 4em auto;
5 + padding: 3em 2em 2em 2em;
6 + background: #fafafa;
7 + border: 1px solid #ebebeb;
8 + box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
9 +
10 + .group {
11 + position: relative;
12 + margin-bottom: 45px;
13 + }
14 +
15 + input {
16 + font-size: 18px;
17 + padding: 10px 10px 10px 5px;
18 + -webkit-appearance: none;
19 + display: block;
20 + background: #fafafa;
21 + color: #636363;
22 + width: 100%;
23 + border: none;
24 + border-radius: 0;
25 + border-bottom: 1px solid #757575;
26 + }
27 +
28 + input:focus { outline: none; }
29 +
30 +
31 + /* Label */
32 +
33 + label {
34 + color: #999;
35 + font-size: 18px;
36 + font-weight: normal;
37 + position: absolute;
38 + pointer-events: none;
39 + left: 5px;
40 + top: 10px;
41 + transition: all 0.2s ease;
42 + }
43 +
44 +
45 + /* active */
46 +
47 + input:focus ~ label, input.used ~ label {
48 + top: -20px;
49 + transform: scale(.75); left: -2px;
50 + /* font-size: 14px; */
51 + color: #4a89dc;
52 + }
53 +
54 +
55 + /* Underline */
56 +
57 + .bar {
58 + position: relative;
59 + display: block;
60 + width: 100%;
61 + }
62 +
63 + .bar:before, .bar:after {
64 + content: '';
65 + height: 2px;
66 + width: 0;
67 + bottom: 1px;
68 + position: absolute;
69 + background: #4a89dc;
70 + transition: all 0.2s ease;
71 + }
72 +
73 + .bar:before { left: 50%; }
74 +
75 + .bar:after { right: 50%; }
76 +
77 +
78 + /* active */
79 +
80 + input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
81 +
82 +
83 + /* Highlight */
84 +
85 + .highlight {
86 + position: absolute;
87 + height: 60%;
88 + width: 100px;
89 + top: 25%;
90 + left: 0;
91 + pointer-events: none;
92 + opacity: 0.5;
93 + }
94 +
95 +
96 + /* active */
97 +
98 + input:focus ~ .highlight {
99 + animation: inputHighlighter 0.3s ease;
100 + }
101 +
102 +
103 + /* Animations */
104 +
105 + @keyframes inputHighlighter {
106 + from { background: #4a89dc; }
107 + to { width: 0; background: transparent; }
108 + }
109 +
110 +
111 + /* Button */
112 +
113 + .button {
114 + position: relative;
115 + display: inline-block;
116 + padding: 12px 24px;
117 + margin: .3em 0 1em 0;
118 + width: 100%;
119 + vertical-align: middle;
120 + color: #fff;
121 + font-size: 16px;
122 + line-height: 20px;
123 + -webkit-font-smoothing: antialiased;
124 + text-align: center;
125 + letter-spacing: 1px;
126 + background: transparent;
127 + border: 0;
128 + border-bottom: 2px solid #3160B6;
129 + cursor: pointer;
130 + transition: all 0.15s ease;
131 + }
132 + .button:focus { outline: 0; }
133 +
134 +
135 + /* Button modifiers */
136 +
137 + .buttonBlue {
138 + background: #4a89dc;
139 + text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
140 + }
141 +
142 + .buttonBlue:hover { background: #357bd8; }
143 +
144 +
145 + /* Ripples container */
146 +
147 + .ripples {
148 + position: absolute;
149 + top: 0;
150 + left: 0;
151 + width: 100%;
152 + height: 100%;
153 + overflow: hidden;
154 + background: transparent;
155 + }
156 +
157 +
158 + /* Ripples circle */
159 +
160 + .ripplesCircle {
161 + position: absolute;
162 + top: 50%;
163 + left: 50%;
164 + transform: translate(-50%, -50%);
165 + opacity: 0;
166 + width: 0;
167 + height: 0;
168 + border-radius: 50%;
169 + background: rgba(255, 255, 255, 0.25);
170 + }
171 +
172 + .ripples.is-active .ripplesCircle {
173 + animation: ripples .4s ease-in;
174 + }
175 +
176 +
177 + /* Ripples animation */
178 +
179 + @keyframes ripples {
180 + 0% { opacity: 0; }
181 +
182 + 25% { opacity: 1; }
183 +
184 + 100% {
185 + width: 200%;
186 + padding-bottom: 200%;
187 + opacity: 0;
188 + }
189 + }
190 +
191 + footer { text-align: center; }
192 +
193 + footer p {
194 + color: #888;
195 + font-size: 13px;
196 + letter-spacing: .4px;
197 + }
198 +
199 + footer a {
200 + color: #4a89dc;
201 + text-decoration: none;
202 + transition: all .2s ease;
203 + }
204 +
205 + footer a:hover {
206 + color: #666;
207 + text-decoration: underline;
208 + }
209 +
210 + footer img {
211 + width: 80px;
212 + transition: all .2s ease;
213 + }
214 +
215 + footer img:hover { opacity: .83; }
216 +
217 + footer img:focus , footer a:focus { outline: none; }
218 +
219 +}
1 +body {
2 + font-family: Helvetica, sans-serif;
3 + background: #eee;
4 + -webkit-font-smoothing: antialiased;
5 +}
6 +
7 +h1, h3 { font-weight: 300; }
8 +
9 +h1 { color: #636363; }
10 +hgroup {
11 + text-align:center;
12 + margin-top: 4em;
13 +}
1 // Divs 14 // Divs
2 .container { 15 .container {
3 display: grid; 16 display: grid;
...@@ -25,4 +38,4 @@ ...@@ -25,4 +38,4 @@
25 38
26 .right { 39 .right {
27 grid-column: 3; 40 grid-column: 3;
28 -}
...\ No newline at end of file ...\ No newline at end of file
41 +}
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 class Bet < ApplicationRecord 2 class Bet < ApplicationRecord
3 validates :score_local, :score_visit, presence: true 3 validates :score_local, :score_visit, presence: true
4 belongs_to :user, inverse_of: :bets 4 belongs_to :user, inverse_of: :bets
5 + belongs_to :match, inverse_of: :bets
5 enum result: [:visit, :tie, :local] 6 enum result: [:visit, :tie, :local]
6 7
7 scope :active, -> { joins(match: :pool).where(pools: { active: true }) } 8 scope :active, -> { joins(match: :pool).where(pools: { active: true }) }
......
1 += form_tag login_path, class: 'login' do
2 + - if flash[:error]
3 + div class="group"
4 + = flash[:error]
5 + div class="hgroup"
6 + h1 Sign in to manage your bets!
7 + div class="group"
8 + input type="email" required=true name='key' autofocus=true value=params[:key]
9 + span class="highlight"
10 + span class="bar"
11 + label Email
12 + div class="group"
13 + input type="password" required=true name='password'
14 + span class="highlight"
15 + span class="bar"
16 + label Password
17 + button type="submit" class="button buttonBlue"
18 + | Sign in
19 + div class="ripples buttonRipples"
20 + span class="ripplesCircle"
21 +javascript:
22 + $('input').blur(function() {
23 + var $this = $(this);
24 + if ($this.val())
25 + $this.addClass('used');
26 + else
27 + $this.removeClass('used');
28 + });
29 +
30 + var $ripples = $('.ripples');
31 +
32 + $ripples.on('click.Ripples', function(e) {
33 +
34 + var $this = $(this);
35 + var $offset = $this.parent().offset();
36 + var $circle = $this.find('.ripplesCircle');
37 +
38 + var x = e.pageX - $offset.left;
39 + var y = e.pageY - $offset.top;
40 +
41 + $circle.css({
42 + top: y + 'px',
43 + left: x + 'px'
44 + });
45 +
46 + $this.addClass('is-active');
47 +
48 + });
49 +
50 + $ripples.on('animationend webkitAnimationEnd mozAnimationEnd oanimationend MSAnimationEnd', function(e) {
51 + $(this).removeClass('is-active');
52 + });
53 +
......
1 .container 1 .container
2 - - if @current_user 2 + - if current_user
3 .navbar 3 .navbar
4 .left.content 4 .left.content
5 - - if @current_user 5 + - if current_user
6 - = render 'login'
7 - - else
8 = render 'results' 6 = render 'results'
7 + - else
8 + = render 'login'
9 .center.content 9 .center.content
10 = render 'leaderboard' 10 = render 'leaderboard'
11 .right.content 11 .right.content
12 - = render 'upcoming_matches'
...\ No newline at end of file ...\ No newline at end of file
12 + = render 'upcoming_matches'
......
...@@ -7,5 +7,5 @@ ...@@ -7,5 +7,5 @@
7 # Character.create(name: 'Luke', movie: movies.first) 7 # Character.create(name: 'Luke', movie: movies.first)
8 admin = Role.create(name: 'SuperAdmin', erasable: false) 8 admin = Role.create(name: 'SuperAdmin', erasable: false)
9 player = Role.create(name: 'Player', erasable: false) 9 player = Role.create(name: 'Player', erasable: false)
10 -User.new(name: 'Iker', mail: 'i.narvaez@ukko.mx', password: '12345', password_confirmation: '12345', roles: [admin, player]) 10 +User.create!(name: 'Iker', mail: 'i.narvaez@ukko.mx', password: '12345', password_confirmation: '12345', roles: [admin, player])
11 -User.new(name: 'Iker', mail: 'p.sanches@ukko.mx', password: '12345', password_confirmation: '12345', roles: [admin, player]) 11 +User.create!(name: 'Iker', mail: 'p.sanches@ukko.mx', password: '12345', password_confirmation: '12345', roles: [admin, player])
......