From 053bed4737225ebe35987432c8f8561f437d6d8a Mon Sep 17 00:00:00 2001
From: AurelioAHeckert <AurelioAHeckert@3f533792-8f58-4932-b0fe-aaf55b0a4547>
Date: Thu, 28 Feb 2008 17:05:32 +0000
Subject: [PATCH] ActionItem183: better login interface and box template correction to cut out the css "clear:both" bug

---
 app/views/account/login.rhtml                          |  8 ++++----
 app/views/account/login_block.rhtml                    | 25 +++++++++++++++++++------
 app/views/layouts/application.rhtml                    | 19 +++++++++++++++++--
 public/designs/templates/default/stylesheets/style.css | 13 +++----------
 public/javascripts/application.js                      | 17 +++++++++++++++++
 public/javascripts/noosfero-show-help.js               |  6 ++++--
 public/stylesheets/button.css                          |  3 +--
 public/stylesheets/login-box.css                       | 39 ++++++++++++++++++++++++++++++---------
 8 files changed, 95 insertions(+), 35 deletions(-)

diff --git a/app/views/account/login.rhtml b/app/views/account/login.rhtml
index 9fd1ed9..a9cf6da 100644
--- a/app/views/account/login.rhtml
+++ b/app/views/account/login.rhtml
@@ -1,4 +1,4 @@
-<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'>
diff --git a/app/views/account/login_block.rhtml b/app/views/account/login_block.rhtml
index 4d9ed77..3ef5b6f 100644
--- a/app/views/account/login_block.rhtml
+++ b/app/views/account/login_block.rhtml
@@ -1,19 +1,32 @@
-<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 %>
diff --git a/app/views/layouts/application.rhtml b/app/views/layouts/application.rhtml
index 63ee913..55337a4 100644
--- a/app/views/layouts/application.rhtml
+++ b/app/views/layouts/application.rhtml
@@ -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><%=
diff --git a/public/designs/templates/default/stylesheets/style.css b/public/designs/templates/default/stylesheets/style.css
index fa9f9ac..73f1819 100644
--- a/public/designs/templates/default/stylesheets/style.css
+++ b/public/designs/templates/default/stylesheets/style.css
@@ -1,11 +1,11 @@
 
 #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;
-}
-
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 747fdc5..ada1dd9 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -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 );
+}
diff --git a/public/javascripts/noosfero-show-help.js b/public/javascripts/noosfero-show-help.js
index a1c9a8e..890007f 100644
--- a/public/javascripts/noosfero-show-help.js
+++ b/public/javascripts/noosfero-show-help.js
@@ -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" );
diff --git a/public/stylesheets/button.css b/public/stylesheets/button.css
index e9494a3..aa68d33 100644
--- a/public/stylesheets/button.css
+++ b/public/stylesheets/button.css
@@ -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;
 }
diff --git a/public/stylesheets/login-box.css b/public/stylesheets/login-box.css
index 9c6826d..e8587c4 100644
--- a/public/stylesheets/login-box.css
+++ b/public/stylesheets/login-box.css
@@ -1,41 +1,62 @@
 
-#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;
+}
+*/
--
libgit2 0.21.2