From 6f62d59b66d457af0beaec549694e5911118c4bd Mon Sep 17 00:00:00 2001 From: BasharJabbour Date: Thu, 25 Sep 2014 12:25:46 -0400 Subject: [PATCH] Sign In, Sign Up, Edit User pages have been changed. Edit User page needs lots of work still. --- app/assets/stylesheets/application.css | 179 +++++++++++++++++++-- app/views/users/edit.html.erb | 19 ++- app/views/users/passwords/new.html.erb | 4 +- app/views/users/registrations/new.html.erb | 14 +- app/views/users/sessions/new.html.erb | 21 ++- diff.txt | 130 +++++++++++++++ 6 files changed, 326 insertions(+), 41 deletions(-) create mode 100644 diff.txt diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index bb0edb60..accf32c0 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -74,9 +74,40 @@ body, /* forgot password fix */ .forgotPassword input[type="submit"] { - padding: 0 5px; - width: auto; + width: 300px; + color: #f5f5f5; + font-family: din-regular; } + +.new_user input[type="submit"] { + width: 96px; + padding: 0px; + font-family: din-regular; + text-transform: uppercase; + color: #f5f5f5; + margin-top:16px; + float: right; +} + +.login input[type="submit"]{ + width:84px; + margin-top: 16px; + margin-left: 61px; + margin-right: 35px; + font-family: din-regular; + text-transform: uppercase; +} + +.edit_user input[type="submit"]{ + width: 96px; + padding: 0px; + font-family: din-regular; + text-transform: uppercase; + color: #f5f5f5; + margin-top:16px; + float: right; +} + html { } @@ -181,6 +212,7 @@ input[type="submit"]:active { .new_session, .new_user, .edit_user, +.login, .forgotPassword { display: block; width: 300px; @@ -189,36 +221,132 @@ input[type="submit"]:active { border-radius: 5px; color: black; box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4); + position:absolute; top: 50%; left:50%; - position:absolute; - margin-left: -166px; } + +.login{ + width: 322px; + height: 308px; + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16); + margin-left:-166px; + margin-top:-158px; + padding-left: 35px; + font-family: din-medium; + font-size: 18px; + color: #424242; +} + +.login input[type="checkbox"] { + border: 1px #424242; + top: 250px; + float: left; +} + +.new_user{ + height: 412px; + margin-left:-166px; + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16); + font-family: din-medium; + font-size: 18px; + line-height: 18px; + text-transform: uppercase; + color:#424242; + margin-top: -222px; +} + +.edit_user { + width: 300px; + height:531px; + top: 136px; + margin-left: -166px; + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16); + text-transform: uppercase; + font-size: 18px; + line-height: 18px; + font-family: din-medium; + color:#424242; +} + .forgotPassword { height: 134px; + font-family: din-medium; + color:#424242; + text-transform: uppercase; + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16); + font-size: 18px; + margin-left: -166px; margin-top: -83px; } + +.firstFieldText{ + font-family: din-regular; + font-size: 14px; + color:#424242; + padding-top:24px; + padding-bottom: 6px; + text-transform: none; + margin: 0px; + line-height: 14px +} +.fieldText { + font-family: din-regular; + font-size: 14px; + color:#424242; + padding-top:16px; + padding-bottom: 6px; + text-transform: none; + margin: 0px; + line-height: 14px; +} + +.smallText{ + font: din-regular; + font-size: 12px; + line-height: 12px; + color: #c04f4f; + margin-top: 16px; +} + +.forgotPasswordText { + font-family: din-medium; + font-size: 12px; + color:#757575; + margin-left: 35px; +} + +.name { + font-size: 24px; + text-align: center; + font-family: din-meduim; + color:#424242; + margin-top: 24px; + text-transform: none; +} + .centerGreyForm input[type="text"], .centerGreyForm input[type="email"], .centerGreyForm input[type="password"] { - width: 250px; + width: 300px; height: 32px; - font-size: 15px; + font-size: 14px; direction: ltr; -webkit-appearance: none; appearance: none; display: inline-block; - margin: 0; - padding: 0 8px; + margin: 0px 0px; + padding: 10px 0px 0px 9px; background: #fff; + color: #bdbdbd; border: 1px solid #d9d9d9; border-top: 1px solid #c0c0c0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; font: -webkit-small-control; color: initial; letter-spacing: normal; @@ -227,8 +355,28 @@ input[type="submit"]:active { text-indent: 0px; text-shadow: none; display: inline-block; - text-align: start; + font: din-medium; + text-align: left; } + +.login input[type="email"], +.login input[type="password"] { + width: 200px; + height:32px; + border-radius: 2px; + background-color:#ffffff; + color:#bdbdbd; + font-family: din-medium; + font-size: 14px; + text-align: left; + padding: 11px 0px 0px 10px; + margin-left: 61px; +} + +.login input[type="email"] { + margin-bottom:10px; +} + .centerGreyForm input[type="text"]:hover, .centerGreyForm input[type="email"]:hover, .centerGreyForm input[type="password"]:hover { @@ -237,7 +385,9 @@ input[type="submit"]:active { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + color: #424242; } + .new_topic { /* start it off screen while it initializes the spinner, then it will be hidden with jquery */ top: -1000px; @@ -548,6 +698,7 @@ li.accountInvite span { width:84px; margin: 24px auto; } + .accountInput { margin: 0 35px 10px; } @@ -600,12 +751,14 @@ li.accountInvite span { } #user_remember_me { margin-top: 11px; + display:inline; } #user_remember_me, label[for="user_remember_me"] { - float: left; + float: right; font-size: 12px; color: #424242; + margin-left: 24px; } .accountForgotPass { margin: 8px 0 0 35px; diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index 738d5c62..c85dc299 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -6,15 +6,18 @@ <% content_for :title, @user.name + "'s Settings | Metamaps" %>
-<%= formula_form_for @user, url: user_url do |form| %> +<%= formula_form_for @user, url: user_url, :html =>{ :class => "edit_user centerGreyForm"} do |form| %>

Edit Account

- - <% if @user.image %><%= image_tag @user.image.url(:round), :size => "48x48" %><% end %> - <%= form.file_field :image %> - <%= form.input :name, label: "Name", class: "name" %> - <%= form.input :email, label: "Email", class: "email" %> - <%= form.input :password, label: "Password", class: "password", :autocomplete => :off %> + <% if @user.image %><%= image_tag @user.image.url(:round), :size => "120x120" %><% end %> +
<%= @user.name %>
+
<%= form.label :email, "Email:", :class => "firstFieldText" %> + <%= form.input :email %>
+
<%= form.label :password, "Current Password:", :class => "firstFieldText" %> + <%= form.input :password, :autocomplete => :off%>
+
<%= form.label :password, "New Password:", :class => "firstFieldText" %> + <%= form.input :password, :autocomplete => :off%>
+
<%= form.label :password, "Confirm New Password:", :class => "firstFieldText" %> + <%= form.input :password, :autocomplete => :off%>
<%= form.submit "Update", class: "update" %> <% end %>
- diff --git a/app/views/users/passwords/new.html.erb b/app/views/users/passwords/new.html.erb index 88dddb4a..120bf376 100644 --- a/app/views/users/passwords/new.html.erb +++ b/app/views/users/passwords/new.html.erb @@ -6,10 +6,10 @@

FORGOT PASSWORD?

-
<%= f.label :email, "Enter Your Email:" %> +
<%= f.label :email, "Enter your email:", :class => "firstFieldText" %> <%= f.email_field :email, :autofocus => true %>
-
<%= f.submit "Send Reset Password Instructions" %>
+
<%= f.submit "Send Password Reset Instructions" %>
<% end %>
diff --git a/app/views/users/registrations/new.html.erb b/app/views/users/registrations/new.html.erb index e7c08256..1f835e30 100644 --- a/app/views/users/registrations/new.html.erb +++ b/app/views/users/registrations/new.html.erb @@ -6,24 +6,24 @@

Sign Up

-
<%= f.label :name %> +
<%= f.label :name, "Name:", :class => "firstFieldText" %> <%= f.text_field :name, :autofocus => true %>
-
<%= f.label :email %> +
<%= f.label :email, "Email:", :class => "fieldText" %> <%= f.email_field :email %>
-
<%= f.label :password %> +
<%= f.label :password, "Password:", :class => "fieldText" %> <%= f.password_field :password %>
-
<%= f.label :password_confirmation %> +
<%= f.label :password_confirmation, "Password Confirmation:", :class => "fieldText" %> <%= f.password_field :password_confirmation %>
-
<%= f.label "Access Code" %> +
<%= f.label "Access Code:", :class => "fieldText" %> <%= f.text_field :joinedwithcode %>
-
<%= f.submit "Sign up" %>
+
<%= f.submit "Sign up!" %>
-

Don't have an access code?
Request an Invite
+

Don't have an access code?
Request an Invite
<% end %>
diff --git a/app/views/users/sessions/new.html.erb b/app/views/users/sessions/new.html.erb index 6f55203b..0a13b435 100644 --- a/app/views/users/sessions/new.html.erb +++ b/app/views/users/sessions/new.html.erb @@ -1,28 +1,27 @@ <% content_for :title, "Sign In | Metamaps" %>
-<%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :method => :post, :class => "new_user centerGreyForm" }) do |f| %> -

Sign in

- -
<%= f.label :email %> +<%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :method => :post, :class => "centerGreyForm login" }) do |f| %> +

SIGN IN

+ +
+
<%= f.email_field :email, :autofocus => true %>
-
<%= f.label :password %> +
<%= f.password_field :password %>
+
<%= f.submit "Sign in" %>
<% if devise_mapping.rememberable? -%> -
<%= f.check_box :remember_me %> <%= f.label :remember_me %>
+
<%= f.check_box :remember_me %>
<% end -%> -
<%= f.submit "Sign in" %>
-
<%- if devise_mapping.recoverable? && controller_name != 'passwords' %> - <%= link_to "Forgot your password?", new_password_path(resource_name), - :data => { :bypass => 'true'} %>
+ <%= link_to "Forgot your password?", new_password_path(resource_name), :class => "forgotPasswordText" , + :data => { :bypass => 'true'}%>
<% end -%>
-
Don't have an account?
Request an Invite
<% end %>
diff --git a/diff.txt b/diff.txt new file mode 100644 index 00000000..badb2420 --- /dev/null +++ b/diff.txt @@ -0,0 +1,130 @@ + + +diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css +index bb0edb6..bb56ab0 100644 +--- a/app/assets/stylesheets/application.css ++++ b/app/assets/stylesheets/application.css +@@ -74,8 +74,9 @@ body, + /* forgot password fix */ + + .forgotPassword input[type="submit"] { +- padding: 0 5px; +- width: auto; ++ width: 300px; ++ color: #f5f5f5; ++ font-family: din-regular; + } + html { + +@@ -189,36 +190,55 @@ input[type="submit"]:active { + border-radius: 5px; + color: black; + box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4); ++ position:absolute; + top: 50%; + left:50%; +- position:absolute; +- margin-left: -166px; ++ + } ++ + .forgotPassword { + height: 134px; + margin-top: -83px; ++ font-family: din-medium; ++ color:#424242; ++ text-transform: uppercase; ++ box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16); ++ font-size: 17px; ++ margin-left: -166px; ++ ++} ++ ++.emailText { ++ font-family: din-regular; ++ font-size: 14px; ++ color:#424242; ++ padding-top:24px; ++ padding-bottom: 6px; ++ text-transform: none; ++ margin: 0px; + } + .centerGreyForm input[type="text"], + .centerGreyForm input[type="email"], + .centerGreyForm input[type="password"] { +- width: 250px; ++ width: 300px; + height: 32px; + font-size: 15px; + direction: ltr; + -webkit-appearance: none; + appearance: none; + display: inline-block; +- margin: 0; +- padding: 0 8px; ++ margin: 0px 0px 6px 0px; ++ padding: 10px 0px 0px 9px; + background: #fff; ++ color: #bdbdbd; + border: 1px solid #d9d9d9; + border-top: 1px solid #c0c0c0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +- -webkit-border-radius: 1px; +- -moz-border-radius: 1px; +- border-radius: 1px; ++ -webkit-border-radius: 2px; ++ -moz-border-radius: 2px; ++ border-radius: 2px; + font: -webkit-small-control; + color: initial; + letter-spacing: normal; +@@ -227,8 +247,10 @@ input[type="submit"]:active { + text-indent: 0px; + text-shadow: none; + display: inline-block; +- text-align: start; ++ font: din-medium; ++ text-align: left; + } ++ + .centerGreyForm input[type="text"]:hover, + .centerGreyForm input[type="email"]:hover, + .centerGreyForm input[type="password"]:hover { +@@ -237,7 +259,9 @@ input[type="submit"]:active { + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); ++ color: #424242; + } ++ + .new_topic { + /* start it off screen while it initializes the spinner, then it will be hidden with jquery */ + top: -1000px; +diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb +index 738d5c6..70d6de7 100644 +--- a/app/views/users/edit.html.erb ++++ b/app/views/users/edit.html.erb +@@ -17,4 +17,3 @@ + <%= form.submit "Update", class: "update" %> + <% end %> +
+- +diff --git a/app/views/users/passwords/new.html.erb b/app/views/users/passwords/new.html.erb +index 88dddb4..3238a81 100644 +--- a/app/views/users/passwords/new.html.erb ++++ b/app/views/users/passwords/new.html.erb +@@ -6,10 +6,10 @@ + +

FORGOT PASSWORD?

+ +-
<%= f.label :email, "Enter Your Email:" %> ++
<%= f.label :email, "Enter your email:", :class => "emailText" %> + <%= f.email_field :email, :autofocus => true %>
+ +-
<%= f.submit "Send Reset Password Instructions" %>
++
<%= f.submit "Send Password Reset Instructions" %>
+ + <% end %> +