ActionItem183: better login interface and box template correction to cut out the…

… css "clear:both" bug git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1517 3f533792-8f58-4932-b0fe-aaf55b0a4547

ActionItem183: better login interface and box template correction to cut out the…
… css "clear:both" bug git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1517 3f533792-8f58-4932-b0fe-aaf55b0a4547
AurelioAHeckert
1 parent 8834f0a7
Showing 8 changed files with 95 additions and 35 deletions Show diff stats
app/views/account/login.rhtml
app/views/account/login_block.rhtml
app/views/layouts/application.rhtml
public/designs/templates/default/stylesheets/style.css
public/javascripts/application.js
public/javascripts/noosfero-show-help.js
public/stylesheets/button.css
public/stylesheets/login-box.css
-<div id="login-box">
+<div class="login-box">
 <h2><%= _('Login') %></h2>
@@ -15,15 +15,15 @@
 <% end %>
-<p id="forgot-passwd">
+<p class="forgot-passwd">
 <%= link_to _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>
 </p>
-<p id="want-to-be-an-user"><strong>
+<p class="want-to-be-an-user"><strong>
 <%= link_to _("I want to be an user!"), :controller => 'account', :action => 'signup' %>
 </strong></p>
-</div><!-- end id="login-box" -->
+</div><!-- end class="login-box" -->
 <% if lightbox? %>
   <script type='text/javascript'>
-<div id="login-box">
+<div class="login-box">
   <% unless logged_in? %>
     <h2><%= _('Login') %></h2>
+
+    <div class="login-box-content">
-    <% labelled_form_for :user, @user, :url => { :controller => 'account', :action => 'login' } do |f| %>
+    <% labelled_form_for :user, @user,
+       :url => { :controller => 'account', :action => 'login' } do |f| %>
+
       <%= display_form_field(_('Username'), text_field_tag(:login) ) %>
       <%= display_form_field(_('Password'), password_field_tag(:password) ) %>
-      <div>
+
+      <% button_bar do %>
         <%= submit_button( 'login', _('Log in') )%>
-      </div>
+        <%= link_to content_tag( 'span', _('New user') ),
+            { :controller => 'account', :action => 'signup' },
+            :class => 'button with-text icon-add' %>
+      <% end %>
+
     <% end %>
-    <div>
-      <%= link_to _("New user"), :controller => 'account', :action => 'signup' %>
+    <div class="forgot-passwd">
+    <%= link_to _("I forgot my password!"),
+       :controller => 'account', :action => 'forgot_password' %>
     </div>
+
+    </div>
+
   <% else %>
     <h2><%= user.identifier %></h2>
   <% end %>
@@ -26,6 +26,7 @@
     <%= stylesheet_link_tag '/designs/icons/default/style.css' %>
     <%= javascript_include_tag(:defaults) %>
+    <%# javascript_include_tag 'animator' %>
     <%= javascript_include_tag 'menu' %>
     <%= javascript_include_tag 'auto-open-menu' %>
     <%= include_lightbox_header %>
@@ -135,13 +136,27 @@
     <div id="helpBox" style="display:none">
       <div id="helpBoxBody">
-        <div id="helpAvatar"></div>
+        <div class="helpAvatar"></div>
         <div id="helpBoxContent"></div>
       </div>
     </div>
     <%= javascript_include_tag 'show-mouse-help' %>
+    <div id="noticeAboutHelp" style="display:none">
+      <div class="helpAvatar"></div>
+      <%= _('Do you want to activate the automatic help mode?') %>
+      <div class="bts">
+      <a href="javascript:mouseHelpOn()"  class="button with-text icon-ok">
+        <span><%= _('Yes') %></span></a>
+      &nbsp;
+      <a href="javascript:mouseHelpOff()" class="button with-text icon-cancel">
+        <span><%= _('No') %></span></a>
+      </div><!-- end class="bts" -->
+      <p/>
+      <%= _('If needed, you can activate or inactivate the automatic help mode by clicking the question mark symbol in the top-right corner') %>
+    </div>
     <%= javascript_include_tag 'noosfero-show-help' %>
-    <%= javascript_tag('noosferoHelpInit(%s, %s)' % [ _('Do you want to activate the automatic help mode?').inspect, _('If needed, you can activate the automatic help mode by clicking the question mark symbol in the top-right corner').inspect ])  %>
+
+    <%# javascript_tag('noosferoHelpInit(%s, %s)' % [ _('Do you want to activate the automatic help mode?').inspect, _('If needed, you can activate the automatic help mode by clicking the question mark symbol in the top-right corner').inspect ])  %>
     <div id="better-browser-promotion" style="display:none">
       <h3><%=
 #boxes {
-  position: relative;
+  /* none */
 }
 .box-1 {
-  margin-left: 285px;
-  margin-right: 215px;
+  /* the width of this element is seted by javascript for Firefox */
+  float: left;
 }
 .box-2 {
@@ -25,10 +25,3 @@
   float: none;
 }
-.msie .box-2 .block,
-.msie .box-3 .block {
-  /* IE SUX A LOT!!! */
-  top: -65px;
-  left: -2px;
-}
-
@@ -25,3 +25,20 @@ function focus_first_field() {
   }
 }
+/* * *  Template Box Size Help  * * */
+function resizePrincipalTemplateBox() {
+  var box1 = $$( "div.box-1" )[0];
+  var otherBoxSum = 0;
+  var i = 2;
+  var b = $$( "div.box-" + i++ )[0];
+  while ( b.nodeName ) {
+    otherBoxSum += b.clientWidth;
+    b = $$( "div.box-" + i++ )[0] || false;
+  }
+  box1.style.width = ( $("boxes").clientWidth - otherBoxSum ) +"px"
+}
+
+if ( window.addEventListener ) {
+  window.addEventListener( 'resize', resizePrincipalTemplateBox, false );
+  window.addEventListener( 'load',   resizePrincipalTemplateBox, false );
+}
@@ -8,7 +8,8 @@ function mouseHelpOnOff() {
     $("btShowHelp").className = "icon-help32off";
   }
   var date = new Date();
-  date.setTime( date.getTime() + ( 60*24*60*60*1000 ) );
+  // open/close help on help button is remembed by 30 days:
+  date.setTime( date.getTime() + ( 30*24*60*60*1000 ) );
   var expires = "; expires=" + date.toGMTString();
   document.cookie = "mouseHelpTurnOn="+ pageHelp.info.updateBox + expires +"; path=/";
 }
@@ -20,7 +21,8 @@ function mouseHelpOn() {
 function mouseHelpOff() {
   var date = new Date();
-  date.setTime( date.getTime() + ( 60*24*60*60*1000 ) );
+  // cancel help on question box is remembed by 5 days:
+  date.setTime( date.getTime() + ( 5*24*60*60*1000 ) );
   var expires = "; expires=" + date.toGMTString();
   document.cookie = "mouseHelpTurnOn=false" + expires +"; path=/";
   new Effect.Fade( "noticeAboutHelp" );
@@ -26,8 +26,7 @@ input.button {
   float: left;
 }
-#content a.button, #content a.button:visited,
-#login-box a.button, #login-box a.button:visited {
+#content a.button, #content a.button:visited {
   height: 22px;
   color: #000;
 }
-#login-box {
+.login-box {
   padding: 3px 10% 8px 10%;
   font-size: 10px;
 }
-#lightbox #login-box {
+#lightbox .login-box {
   padding: 3px 25% 8px 25%;
 }
-#login-box .formfieldline input {
+.login-block .login-box {
+}
+
+.login-box-content {
+  margin-top: -16px;
+  border: 2px solid #729FCF;
+  background: #B8CFE7;
+  padding: 0px 10px 5px 10px;
+}
+
+.login-box-content .button-bar .button {
+  position: relative;
+}
+
+.login-box .formfieldline input {
   width: 99%;
 }
-#login-box form {
+.login-box form {
   margin: 0px;
   padding: 0px 0px 10px 0px;
 }
-#login-box h2 {
+.login-box h2 {
   font-size: 18px;
   text-align: center;
   margin: 0px;
   padding: 0px;
 }
-#lightbox #login-box h2 {
+#lightbox .login-box h2 {
   color: #000;
 }
-#login-box p {
+.login-box p {
   text-align: center;
   margin: 0px;
   padding: 0px;
 }
-#login-box #forgot-passwd {
+.login-box #forgot-passwd {
   padding-bottom: 6px;
 }
-#want-to-be-an-user {
+.want-to-be-an-user {
   font-size: 13px;
 }
+
+/*
+.login-box a.button, .login-box a.button:visited {
+  height: 22px;
+  color: #000;
+}
+*/
1	-<div id="login-box">	1	+<div class="login-box">
2		2
3	<h2><%= _('Login') %></h2>	3	<h2><%= _('Login') %></h2>
4		4
	@@ -15,15 +15,15 @@		@@ -15,15 +15,15 @@
15		15
16	<% end %>	16	<% end %>
17		17
18	-<p id="forgot-passwd">	18	+<p class="forgot-passwd">
19	<%= link_to _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>	19	<%= link_to _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>
20	</p>	20	</p>
21		21
22	-<p id="want-to-be-an-user"><strong>	22	+<p class="want-to-be-an-user"><strong>
23	<%= link_to _("I want to be an user!"), :controller => 'account', :action => 'signup' %>	23	<%= link_to _("I want to be an user!"), :controller => 'account', :action => 'signup' %>
24	</strong></p>	24	</strong></p>
25		25
26	-</div><!-- end id="login-box" -->	26	+</div><!-- end class="login-box" -->
27		27
28	<% if lightbox? %>	28	<% if lightbox? %>
29	<script type='text/javascript'>	29	<script type='text/javascript'>
	@@ -25,3 +25,20 @@ function focus_first_field() {		@@ -25,3 +25,20 @@ function focus_first_field() {
25	}	25	}
26	}	26	}
27		27
		28	+/* * * Template Box Size Help * * */
		29	+function resizePrincipalTemplateBox() {
		30	+ var box1 = $$( "div.box-1" )[0];
		31	+ var otherBoxSum = 0;
		32	+ var i = 2;
		33	+ var b = $$( "div.box-" + i++ )[0];
		34	+ while ( b.nodeName ) {
		35	+ otherBoxSum += b.clientWidth;
		36	+ b = $$( "div.box-" + i++ )[0] \|\| false;
		37	+ }
		38	+ box1.style.width = ( $("boxes").clientWidth - otherBoxSum ) +"px"
		39	+}
		40	+
		41	+if ( window.addEventListener ) {
		42	+ window.addEventListener( 'resize', resizePrincipalTemplateBox, false );
		43	+ window.addEventListener( 'load', resizePrincipalTemplateBox, false );
		44	+}