Better style for several login/logout stuff

Antonio Terceiro
1 parent e425b81a
Showing 8 changed files with 32 additions and 54 deletions Show diff stats
app/views/account/login.rhtml
app/views/account/login_block.rhtml
app/views/layouts/application-ng.rhtml
app/views/shared/user_menu.rhtml
public/designs/themes/base/blocks.css
public/stylesheets/button.css
public/stylesheets/forms.css
public/stylesheets/login-box.css
@@ -3,40 +3,29 @@
 <h2><%= _('Login') %></h2>
  
 <% @user ||= User.new %>
+<% is_thickbox ||= false %>
  
 <% labelled_form_for :user, @user,
    :url => login_url,
    :html => { :help => _('If you are a registered user, enter your username and password to be authenticated.')+'<p/>'+_('To join on this environment, click on "<b>I want to be an user!</b>".')+'<p/>'+_('If you forgot your password, click on "<b>I forgot my password!</b>" link.') } do |f| %>
  
-  <%= f.text_field :login,
-                   :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_login',
-                   :help => _('Here goes the nickname that you give on the registration.'),
-                   :onchange => 'this.value = convToValidLogin( this.value )' %>
+     <%= f.text_field :login, :id => 'main_user_login', :onchange => 'this.value = convToValidLogin( this.value )' %>
  
-  <%= f.password_field :password,
-                       :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_password',
-                       :help => _('your password is personal, protect it.') %>
+     <%= f.password_field :password %>
  
-  <% button_bar do %>
-    <%= submit_button( 'login', _('Log in') )%>
-    <%= lightbox_close_button(_('Cancel')) if lightbox? %>
-  <% end %>
-<% end %>
+     <% button_bar do %>
+       <%= submit_button( 'login', _('Log in') )%>
+       <% if is_thickbox %>
+         <%= thickbox_close_button(_('Cancel')) %>
+       <% end %>
+     <% end %>
  
-<p class="forgot-passwd" help="<%= _('You can recover your password clicking on this link.') %>">
-<%= link_to _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>
-</p>
+<% end %>
  
-<p class="want-to-be-an-user" help="<%= _('Click here to join to this environment, if you is not already an user.') %>"><strong>
-<%= link_to _("I want to participate!"), :controller => 'account', :action => 'signup' %>
-</strong></p>
+<% button_bar do %>
+  <%= button :add, _("New user"), :controller => 'account', :action => 'signup' %>
+  <%= button :help, _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>
+<% end %>
  
 </div><!-- end class="login-box" -->
  
-<% if lightbox? %>
-  <script type='text/javascript'>
-    $("lightbox_user_login").focus();
-  </script>
-<% end %>
-
-<%# = generate_form :user, @user, {...} %>
@@ -10,30 +10,24 @@
 %>
  
     <% labelled_form_for :user, @user,
-       :html => { :help => _('If you are a registered user, enter your username and password to be authenticated.')+'<p/>'+_('To join on this environment, click on "<b>New user</b>".')+'<p/>'+_('If you forgot your password, click on "<b>I forgot my password!</b>" link.') },
        :url => login_url do |f| %>
  
-<%= f.text_field :login,
-                 :help => _('Here goes the nickname that you give on the registration.'),
-                 :onchange => 'this.value = convToValidLogin( this.value )' %>
+         <%= f.text_field :login, :onchange => 'this.value = convToValidLogin( this.value )' %>
  
-<%= f.password_field :password,
-                     :help => _('your password is personal, protect it.') %>
+         <%= f.password_field :password %>
  
       <% button_bar do %>
         <%= submit_button( 'login', _('Log in') )%>
         <%= link_to content_tag( 'span', _('New user') ),
             { :controller => 'account', :action => 'signup' },
-            :help => _('Click here to join to this environment, if you is not already an user.'),
             :class => 'button with-text icon-add' %>
       <% end %>
  
     <% end %>
  
-    <div class="forgot-passwd" help="<%= _('You can recover your password clicking on this link.') %>">
-    <%= link_to _("I forgot my password!"),
-       :controller => 'account', :action => 'forgot_password' %>
-    </div>
+    <% button_bar(:style => 'margin: 0px;') do %>
+      <%= button :help, _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>
+    <% end %>
  
     </div>
  
@@ -67,10 +67,9 @@
             <% end %>
             <%= link_to('<i class="icon-menu-logout"></i><strong>' + _('Logout') + '</strong>', { :controller => 'account', :action => 'logout'} , :id => "logout", :title => _("Leave the system")) %>
           <% else %>
-            <%= _('%s or %s') % [thickbox_inline_popup_link('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, 'inlineLoginBox', :id => 'link_login', :help => _('Click here to enter your username and password and be recognized by the system.')), link_to('<strong>' + _('Register') + '</strong>', :controller => 'account', :action => 'signup') ] %>
+            <%= _('%s or %s') % [thickbox_inline_popup_link('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, 'inlineLoginBox', :id => 'link_login'), link_to('<strong>' + _('Register') + '</strong>', :controller => 'account', :action => 'signup') ] %>
             <div id='inlineLoginBox' style='display: none;'>
-              <%= render :file => 'account/login' %>
-              <center><%= thickbox_close_button _('Close') %></center>
+              <%= render :file => 'account/login', :locals => { :is_thickbox => true } %>
             </div>
           <% end %>
  
@@ -62,10 +62,9 @@
       <% if theme_option( :menu_login ) == 'full_form' %>
         <%= render :file => 'account/login_block' %>
       <% else %>
-        <%= thickbox_inline_popup_link('<span class="icon-menu-login"></span>'+ _('Login'), login_url, 'inlineLoginBox', :id => 'link_login', :help => _('Click here to enter your username and password and be recognized by the system.')) %>
+        <%= thickbox_inline_popup_link('<span class="icon-menu-login"></span>'+ _('Login'), login_url, 'inlineLoginBox', :id => 'link_login') %>
         <div id='inlineLoginBox' style='display: none;'>
-          <%= render :file => 'account/login' %>
-          <center><%= thickbox_close_button _('Close') %></center>
+          <%= render :file => 'account/login', :locals => { :is_thickbox => true } %>
         </div>
       <% end %>
     <% end %>
@@ -30,11 +30,6 @@
  
 .login-box {
   padding: 0px;
-  font-size: 10px;
-}
-
-#content .login-box-content a.button {
-  font-size: 11px;
 }
  
 .login-box-content {
@@ -54,7 +49,6 @@
  
 .login-box form {
   margin: 0px;
-  padding: 0px 0px 0px 0px;
 }
 .msie7 .login-box form {
   padding: 0px 10px 0px 0px;
@@ -40,7 +40,7 @@ input.button.with-text {
   height: 20px;
 }
 input.button.with-text {
-  font-size: 14px;
+  font-size: 12px;
   height: 22px;
   padding: 0px 2px 2px 20px;
   background-position: 3px 50%;
@@ -10,7 +10,7 @@
 .formlabel {
   /* font-size: 11px; */
   display: block;
-  padding: 2px 5px;
+  padding: 2px 0px;
 }
  
 .formfield input,
  
 .login-box {
   padding: 3px 20px 8px 20px;
-  font-size: 10px;
 }
-#lightbox .login-box {
-  width: 50%;
+#TB_window .login-box {
+  width: 80%;
   margin: auto;
 }
  
@@ -26,6 +25,10 @@
   width: 99%;
 }
  
+#TB_window .login-box .formfieldline input {
+  width: 150px;
+}
+
 .login-box form {
   margin: 0px;
   padding: 0px 0px 10px 0px;
@@ -40,7 +43,7 @@
   margin: 0px;
   padding: 0px;
 }
-#lightbox .login-box h2 {
+#TB_window .login-box h2 {
   font-size: 20px;
   color: #000;
 }
...	...	@@ -3,40 +3,29 @@
3	3	<h2><%= _('Login') %></h2>
4	4
5	5	<% @user \|\|= User.new %>
	6	+<% is_thickbox \|\|= false %>
6	7
7	8	<% labelled_form_for :user, @user,
8	9	:url => login_url,
9	10	:html => { :help => _('If you are a registered user, enter your username and password to be authenticated.')+'<p/>'+_('To join on this environment, click on "<b>I want to be an user!</b>".')+'<p/>'+_('If you forgot your password, click on "<b>I forgot my password!</b>" link.') } do \|f\| %>
10	11
11		- <%= f.text_field :login,
12		- :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_login',
13		- :help => _('Here goes the nickname that you give on the registration.'),
14		- :onchange => 'this.value = convToValidLogin( this.value )' %>
	12	+ <%= f.text_field :login, :id => 'main_user_login', :onchange => 'this.value = convToValidLogin( this.value )' %>
15	13
16		- <%= f.password_field :password,
17		- :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_password',
18		- :help => _('your password is personal, protect it.') %>
	14	+ <%= f.password_field :password %>
19	15
20		- <% button_bar do %>
21		- <%= submit_button( 'login', _('Log in') )%>
22		- <%= lightbox_close_button(_('Cancel')) if lightbox? %>
23		- <% end %>
24		-<% end %>
	16	+ <% button_bar do %>
	17	+ <%= submit_button( 'login', _('Log in') )%>
	18	+ <% if is_thickbox %>
	19	+ <%= thickbox_close_button(_('Cancel')) %>
	20	+ <% end %>
	21	+ <% end %>
25	22
26		-<p class="forgot-passwd" help="<%= _('You can recover your password clicking on this link.') %>">
27		-<%= link_to _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>
28		-</p>
	23	+<% end %>
29	24
30		-<p class="want-to-be-an-user" help="<%= _('Click here to join to this environment, if you is not already an user.') %>"><strong>
31		-<%= link_to _("I want to participate!"), :controller => 'account', :action => 'signup' %>
32		-</strong></p>
	25	+<% button_bar do %>
	26	+ <%= button :add, _("New user"), :controller => 'account', :action => 'signup' %>
	27	+ <%= button :help, _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>
	28	+<% end %>
33	29
34	30	</div><!-- end class="login-box" -->
35	31
36		-<% if lightbox? %>
37		- <script type='text/javascript'>
38		- $("lightbox_user_login").focus();
39		- </script>
40		-<% end %>
41		-
42		-<%# = generate_form :user, @user, {...} %>
...	...
...	...	@@ -10,30 +10,24 @@
10	10	%>
11	11
12	12	<% labelled_form_for :user, @user,
13		- :html => { :help => _('If you are a registered user, enter your username and password to be authenticated.')+'<p/>'+_('To join on this environment, click on "<b>New user</b>".')+'<p/>'+_('If you forgot your password, click on "<b>I forgot my password!</b>" link.') },
14	13	:url => login_url do \|f\| %>
15	14
16		-<%= f.text_field :login,
17		- :help => _('Here goes the nickname that you give on the registration.'),
18		- :onchange => 'this.value = convToValidLogin( this.value )' %>
	15	+ <%= f.text_field :login, :onchange => 'this.value = convToValidLogin( this.value )' %>
19	16
20		-<%= f.password_field :password,
21		- :help => _('your password is personal, protect it.') %>
	17	+ <%= f.password_field :password %>
22	18
23	19	<% button_bar do %>
24	20	<%= submit_button( 'login', _('Log in') )%>
25	21	<%= link_to content_tag( 'span', _('New user') ),
26	22	{ :controller => 'account', :action => 'signup' },
27		- :help => _('Click here to join to this environment, if you is not already an user.'),
28	23	:class => 'button with-text icon-add' %>
29	24	<% end %>
30	25
31	26	<% end %>
32	27
33		- <div class="forgot-passwd" help="<%= _('You can recover your password clicking on this link.') %>">
34		- <%= link_to _("I forgot my password!"),
35		- :controller => 'account', :action => 'forgot_password' %>
36		- </div>
	28	+ <% button_bar(:style => 'margin: 0px;') do %>
	29	+ <%= button :help, _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>
	30	+ <% end %>
37	31
38	32	</div>
39	33
...	...
...	...	@@ -67,10 +67,9 @@
67	67	<% end %>
68	68	<%= link_to('<i class="icon-menu-logout"></i><strong>' + _('Logout') + '</strong>', { :controller => 'account', :action => 'logout'} , :id => "logout", :title => _("Leave the system")) %>
69	69	<% else %>
70		- <%= _('%s or %s') % [thickbox_inline_popup_link('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, 'inlineLoginBox', :id => 'link_login', :help => _('Click here to enter your username and password and be recognized by the system.')), link_to('<strong>' + _('Register') + '</strong>', :controller => 'account', :action => 'signup') ] %>
	70	+ <%= _('%s or %s') % [thickbox_inline_popup_link('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, 'inlineLoginBox', :id => 'link_login'), link_to('<strong>' + _('Register') + '</strong>', :controller => 'account', :action => 'signup') ] %>
71	71	<div id='inlineLoginBox' style='display: none;'>
72		- <%= render :file => 'account/login' %>
73		- <center><%= thickbox_close_button _('Close') %></center>
	72	+ <%= render :file => 'account/login', :locals => { :is_thickbox => true } %>
74	73	</div>
75	74	<% end %>
76	75
...	...
...	...	@@ -62,10 +62,9 @@
62	62	<% if theme_option( :menu_login ) == 'full_form' %>
63	63	<%= render :file => 'account/login_block' %>
64	64	<% else %>
65		- <%= thickbox_inline_popup_link('<span class="icon-menu-login"></span>'+ _('Login'), login_url, 'inlineLoginBox', :id => 'link_login', :help => _('Click here to enter your username and password and be recognized by the system.')) %>
	65	+ <%= thickbox_inline_popup_link('<span class="icon-menu-login"></span>'+ _('Login'), login_url, 'inlineLoginBox', :id => 'link_login') %>
66	66	<div id='inlineLoginBox' style='display: none;'>
67		- <%= render :file => 'account/login' %>
68		- <center><%= thickbox_close_button _('Close') %></center>
	67	+ <%= render :file => 'account/login', :locals => { :is_thickbox => true } %>
69	68	</div>
70	69	<% end %>
71	70	<% end %>
...	...
...	...	@@ -30,11 +30,6 @@
30	30
31	31	.login-box {
32	32	padding: 0px;
33		- font-size: 10px;
34		-}
35		-
36		-#content .login-box-content a.button {
37		- font-size: 11px;
38	33	}
39	34
40	35	.login-box-content {
...	...	@@ -54,7 +49,6 @@
54	49
55	50	.login-box form {
56	51	margin: 0px;
57		- padding: 0px 0px 0px 0px;
58	52	}
59	53	.msie7 .login-box form {
60	54	padding: 0px 10px 0px 0px;
...	...
...	...	@@ -40,7 +40,7 @@ input.button.with-text {
40	40	height: 20px;
41	41	}
42	42	input.button.with-text {
43		- font-size: 14px;
	43	+ font-size: 12px;
44	44	height: 22px;
45	45	padding: 0px 2px 2px 20px;
46	46	background-position: 3px 50%;
...	...
...	...	@@ -10,7 +10,7 @@
10	10	.formlabel {
11	11	/* font-size: 11px; */
12	12	display: block;
13		- padding: 2px 5px;
	13	+ padding: 2px 0px;
14	14	}
15	15
16	16	.formfield input,
...	...
1	1
2	2	.login-box {
3	3	padding: 3px 20px 8px 20px;
4		- font-size: 10px;
5	4	}
6		-#lightbox .login-box {
7		- width: 50%;
	5	+#TB_window .login-box {
	6	+ width: 80%;
8	7	margin: auto;
9	8	}
10	9
...	...	@@ -26,6 +25,10 @@
26	25	width: 99%;
27	26	}
28	27
	28	+#TB_window .login-box .formfieldline input {
	29	+ width: 150px;
	30	+}
	31	+
29	32	.login-box form {
30	33	margin: 0px;
31	34	padding: 0px 0px 10px 0px;
...	...	@@ -40,7 +43,7 @@
40	43	margin: 0px;
41	44	padding: 0px;
42	45	}
43		-#lightbox .login-box h2 {
	46	+#TB_window .login-box h2 {
44	47	font-size: 20px;
45	48	color: #000;
46	49	}
...	...