login page is more elegant

app/models/user.rb

@@ -25,7 +25,6 @@ class User
   before_validation :do_bad_things 
   
    def self.find_for_authentication(conditions={})
-     puts conditions
     if conditions[:username] =~ /^([\w\.%\+\-]+)@([\w\-]+\.)+([\w]{2,})$/i # email regex
       conditions[:email] = conditions.delete(:username)
     end

app/views/devise/sessions/new.html.haml

@@ -1,10 +1,17 @@
 = form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
-  %p
+
-    = f.label :username
+  #user
-    = f.text_field :username
+
-  %p
+    %p.username
-    = f.label :password
+      = f.label :username
-    = f.password_field :password
+      = f.text_field :username
+    %p.user_network
+      @tom.joindiaspora.com
+
+
+    %p
+      = f.label :password
+      = f.password_field :password
   /%p
   /- if devise_mapping.rememberable?
   /  = f.check_box :remember_me

app/views/layouts/session_wall.html.haml

@@ -23,29 +23,28 @@
 
   %body
 
-    .container
+    :plain
-      :plain
+      <!--[if lt IE 8]>
-        <!--[if lt IE 8]>
+      <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
-        <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
+        <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
-          <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
+        <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
-          <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
+          <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
-            <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
+          <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
-            <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
+            <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div>
-              <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div>
+            <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div>
-              <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div>
-            </div>
-            <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
-            <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
-            <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
-            <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
           </div>
+          <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
+          <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
+          <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
+          <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
         </div>
-        <![endif]-->
+      </div>
+      <![endif]-->
   
-      - flash.each do |name, msg|
+    - flash.each do |name, msg|
-        = content_tag :div, msg, :id => "flash_#{name}"
+      = content_tag :div, msg, :id => "flash_#{name}"
-      %div#huge_text
+    %div#huge_text
-        diaspora
+      diaspora
-      = yield
+    = yield
     
-      /= link_to "signup", "/signup"
+    /= link_to "signup", "/signup"

public/stylesheets/sass/sessions.sass

@@ -19,22 +19,14 @@ body
 input
   :font
     :size 30px
-  :text
+  :width 200px
-    :align center
-  :width 300px
   :margin
     :bottom 0
     :top 0
 
-.container
-  :top 30%
-  :text
-    :align center
-
 form p
   :position relative
   :padding 0
-  :margin-left 32.8%
 
 label
   :color #999
@@ -52,7 +44,7 @@ input[type='password']
     :size 14px
   :padding 0.3em
   :display block
-  :width 50%
+  :width 395px
   :box-shadow 0 2px 0px #fff
   :-webkit-box-shadow 0 2px 0px #fff
   :-moz-box-shadow 0 2px 0px #fff
@@ -61,3 +53,20 @@ input[type='password']
   :border-radius 3px
   :-moz-border-radius 3px
 
+#user
+  :display inline
+  :width 500px
+  .username
+    :width 200px
+    :display inline
+    
+    input
+      :display inline
+      :width 200px
+
+  .user_network
+    :width 200px
+    :display inline
+    :font
+      :size 18px
+

public/stylesheets/sessions.css

@@ -15,19 +15,13 @@ body {
 
 input {
   font-size: 30px;
-  text-align: center;
+  width: 200px;
-  width: 300px;
   margin-bottom: 0;
   margin-top: 0; }
 
-.container {
-  top: 30%;
-  text-align: center; }
-
 form p {
   position: relative;
-  padding: 0;
+  padding: 0; }
-  margin-left: 32.8%; }
 
 label {
   color: #999999;
@@ -43,7 +37,7 @@ input[type='password'] {
   font-size: 14px;
   padding: 0.3em;
   display: block;
-  width: 50%;
+  width: 395px;
   box-shadow: 0 2px 0px white;
   -webkit-box-shadow: 0 2px 0px white;
   -moz-box-shadow: 0 2px 0px white;
@@ -51,3 +45,17 @@ input[type='password'] {
   height: auto;
   border-radius: 3px;
   -moz-border-radius: 3px; }
+
+#user {
+  display: inline;
+  width: 500px; }
+  #user .username {
+    width: 200px;
+    display: inline; }
+    #user .username input {
+      display: inline;
+      width: 200px; }
+  #user .user_network {
+    width: 200px;
+    display: inline;
+    font-size: 18px; }