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	3	<h2><%= _('Login') %></h2>
4	4
...	...	@@ -15,15 +15,15 @@
15	15
16	16	<% end %>
17	17
18		-<p id="forgot-passwd">
	18	+<p class="forgot-passwd">
19	19	<%= link_to _("I forgot my password!"), :controller => 'account', :action => 'forgot_password' %>
20	20	</p>
21	21
22		-<p id="want-to-be-an-user"><strong>
	22	+<p class="want-to-be-an-user"><strong>
23	23	<%= link_to _("I want to be an user!"), :controller => 'account', :action => 'signup' %>
24	24	</strong></p>
25	25
26		-</div><!-- end id="login-box" -->
	26	+</div><!-- end class="login-box" -->
27	27
28	28	<% if lightbox? %>
29	29	<script type='text/javascript'>
...	...
1		-<div id="login-box">
	1	+<div class="login-box">
2	2	<% unless logged_in? %>
3	3
4	4	<h2><%= _('Login') %></h2>
	5	+
	6	+ <div class="login-box-content">
5	7
6		- <% labelled_form_for :user, @user, :url => { :controller => 'account', :action => 'login' } do \|f\| %>
	8	+ <% labelled_form_for :user, @user,
	9	+ :url => { :controller => 'account', :action => 'login' } do \|f\| %>
	10	+
7	11	<%= display_form_field(_('Username'), text_field_tag(:login) ) %>
8	12	<%= display_form_field(_('Password'), password_field_tag(:password) ) %>
9		- <div>
	13	+
	14	+ <% button_bar do %>
10	15	<%= submit_button( 'login', _('Log in') )%>
11		- </div>
	16	+ <%= link_to content_tag( 'span', _('New user') ),
	17	+ { :controller => 'account', :action => 'signup' },
	18	+ :class => 'button with-text icon-add' %>
	19	+ <% end %>
	20	+
12	21	<% end %>
13	22
14		- <div>
15		- <%= link_to _("New user"), :controller => 'account', :action => 'signup' %>
	23	+ <div class="forgot-passwd">
	24	+ <%= link_to _("I forgot my password!"),
	25	+ :controller => 'account', :action => 'forgot_password' %>
16	26	</div>
	27	+
	28	+ </div>
	29	+
17	30	<% else %>
18	31	<h2><%= user.identifier %></h2>
19	32	<% end %>
...	...
...	...	@@ -26,6 +26,7 @@
26	26	<%= stylesheet_link_tag '/designs/icons/default/style.css' %>
27	27
28	28	<%= javascript_include_tag(:defaults) %>
	29	+ <%# javascript_include_tag 'animator' %>
29	30	<%= javascript_include_tag 'menu' %>
30	31	<%= javascript_include_tag 'auto-open-menu' %>
31	32	<%= include_lightbox_header %>
...	...	@@ -135,13 +136,27 @@
135	136
136	137	<div id="helpBox" style="display:none">
137	138	<div id="helpBoxBody">
138		- <div id="helpAvatar"></div>
	139	+ <div class="helpAvatar"></div>
139	140	<div id="helpBoxContent"></div>
140	141	</div>
141	142	</div>
142	143	<%= javascript_include_tag 'show-mouse-help' %>
	144	+ <div id="noticeAboutHelp" style="display:none">
	145	+ <div class="helpAvatar"></div>
	146	+ <%= _('Do you want to activate the automatic help mode?') %>
	147	+ <div class="bts">
	148	+ <a href="javascript:mouseHelpOn()" class="button with-text icon-ok">
	149	+ <span><%= _('Yes') %></span></a>
	150	+
	151	+ <a href="javascript:mouseHelpOff()" class="button with-text icon-cancel">
	152	+ <span><%= _('No') %></span></a>
	153	+ </div><!-- end class="bts" -->
	154	+ <p/>
	155	+ <%= _('If needed, you can activate or inactivate the automatic help mode by clicking the question mark symbol in the top-right corner') %>
	156	+ </div>
143	157	<%= javascript_include_tag 'noosfero-show-help' %>
144		- <%= 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 ]) %>
	158	+
	159	+ <%# 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 ]) %>
145	160
146	161	<div id="better-browser-promotion" style="display:none">
147	162	<h3><%=
...	...
1	1
2	2	#boxes {
3		- position: relative;
	3	+ /* none */
4	4	}
5	5
6	6	.box-1 {
7		- margin-left: 285px;
8		- margin-right: 215px;
	7	+ /* the width of this element is seted by javascript for Firefox */
	8	+ float: left;
9	9	}
10	10
11	11	.box-2 {
...	...	@@ -25,10 +25,3 @@
25	25	float: none;
26	26	}
27	27
28		-.msie .box-2 .block,
29		-.msie .box-3 .block {
30		- /* IE SUX A LOT!!! */
31		- top: -65px;
32		- left: -2px;
33		-}
34		-
...	...
...	...	@@ -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	+}
...	...
...	...	@@ -8,7 +8,8 @@ function mouseHelpOnOff() {
8	8	$("btShowHelp").className = "icon-help32off";
9	9	}
10	10	var date = new Date();
11		- date.setTime( date.getTime() + ( 602460601000 ) );
	11	+ // open/close help on help button is remembed by 30 days:
	12	+ date.setTime( date.getTime() + ( 302460601000 ) );
12	13	var expires = "; expires=" + date.toGMTString();
13	14	document.cookie = "mouseHelpTurnOn="+ pageHelp.info.updateBox + expires +"; path=/";
14	15	}
...	...	@@ -20,7 +21,8 @@ function mouseHelpOn() {
20	21
21	22	function mouseHelpOff() {
22	23	var date = new Date();
23		- date.setTime( date.getTime() + ( 602460601000 ) );
	24	+ // cancel help on question box is remembed by 5 days:
	25	+ date.setTime( date.getTime() + ( 52460601000 ) );
24	26	var expires = "; expires=" + date.toGMTString();
25	27	document.cookie = "mouseHelpTurnOn=false" + expires +"; path=/";
26	28	new Effect.Fade( "noticeAboutHelp" );
...	...
...	...	@@ -26,8 +26,7 @@ input.button {
26	26	float: left;
27	27	}
28	28
29		-#content a.button, #content a.button:visited,
30		-#login-box a.button, #login-box a.button:visited {
	29	+#content a.button, #content a.button:visited {
31	30	height: 22px;
32	31	color: #000;
33	32	}
...	...
1	1
2		-#login-box {
	2	+.login-box {
3	3	padding: 3px 10% 8px 10%;
4	4	font-size: 10px;
5	5	}
6		-#lightbox #login-box {
	6	+#lightbox .login-box {
7	7	padding: 3px 25% 8px 25%;
8	8	}
9	9
10		-#login-box .formfieldline input {
	10	+.login-block .login-box {
	11	+}
	12	+
	13	+.login-box-content {
	14	+ margin-top: -16px;
	15	+ border: 2px solid #729FCF;
	16	+ background: #B8CFE7;
	17	+ padding: 0px 10px 5px 10px;
	18	+}
	19	+
	20	+.login-box-content .button-bar .button {
	21	+ position: relative;
	22	+}
	23	+
	24	+.login-box .formfieldline input {
11	25	width: 99%;
12	26	}
13	27
14		-#login-box form {
	28	+.login-box form {
15	29	margin: 0px;
16	30	padding: 0px 0px 10px 0px;
17	31	}
18	32
19		-#login-box h2 {
	33	+.login-box h2 {
20	34	font-size: 18px;
21	35	text-align: center;
22	36	margin: 0px;
23	37	padding: 0px;
24	38	}
25		-#lightbox #login-box h2 {
	39	+#lightbox .login-box h2 {
26	40	color: #000;
27	41	}
28	42
29		-#login-box p {
	43	+.login-box p {
30	44	text-align: center;
31	45	margin: 0px;
32	46	padding: 0px;
33	47	}
34	48
35		-#login-box #forgot-passwd {
	49	+.login-box #forgot-passwd {
36	50	padding-bottom: 6px;
37	51	}
38	52
39		-#want-to-be-an-user {
	53	+.want-to-be-an-user {
40	54	font-size: 13px;
41	55	}
	56	+
	57	+/*
	58	+.login-box a.button, .login-box a.button:visited {
	59	+ height: 22px;
	60	+ color: #000;
	61	+}
	62	+*/
...	...