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;
 }
	@@ -40,7 +40,7 @@ input.button.with-text {		@@ -40,7 +40,7 @@ input.button.with-text {
40	height: 20px;	40	height: 20px;
41	}	41	}
42	input.button.with-text {	42	input.button.with-text {
43	- font-size: 14px;	43	+ font-size: 12px;
44	height: 22px;	44	height: 22px;
45	padding: 0px 2px 2px 20px;	45	padding: 0px 2px 2px 20px;
46	background-position: 3px 50%;	46	background-position: 3px 50%;
	@@ -10,7 +10,7 @@		@@ -10,7 +10,7 @@
10	.formlabel {	10	.formlabel {
11	/* font-size: 11px; */	11	/* font-size: 11px; */
12	display: block;	12	display: block;
13	- padding: 2px 5px;	13	+ padding: 2px 0px;
14	}	14	}
15		15
16	.formfield input,	16	.formfield input,