sr-rolando/contactorama
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fogbugz #64: Login-Form zentrieren und mit Flash-Messages darüber.

Browse source
This commit is contained in:
Roland 2011-06-08 21:25:30 +02:00
parent 472c6809bd
commit c81b56b421
3 changed files with 174 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

52
app/views/devise/sessions/new.html.erb
View file

@ -1,17 +1,41 @@
<h2>Sign in</h2>
<div class="row">
<div class="fourcol">&nbsp;</div>
<div class="fourcol">
<h2 class="login">Sign in</h2>
</div>
<div class="fourcol">&nbsp;</div>
</div>
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<p><%= f.label :email %><br />
<%= f.email_field :email %></p>
<p><%= f.label :password %><br />
<%= f.password_field :password %></p>
<% if devise_mapping.rememberable? -%>
<p><%= f.check_box :remember_me %> <%= f.label :remember_me %></p>
<% end -%>
<p><%= f.submit "Sign in" %></p>
<% unless flash.empty? %>
<div class="row">
<div class="fourcol">&nbsp;</div>
<div class="fourcol flash">
<%# examples: flash[:error] (:notice, ...), needs: respective css 'id' elements %>
<% flash.each do | key, msg | %>
<%= content_tag(:p, msg, :id => key) if flash[key] %>
<% end %>
</div>
<div class="fourcol">&nbsp;</div>
</div>
<% end %>
<%= render :partial => "devise/shared/links" %>
<div class="row">
<div class="fourcol">&nbsp;</div>
<div class="fourcol login">
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<p><%= f.label :email %><br />
<%= f.email_field :email %></p>
<p><%= f.label :password %><br />
<%= f.password_field :password %></p>
<% if devise_mapping.rememberable? -%>
<p><%= f.check_box :remember_me %> <%= f.label :remember_me %></p>
<% end -%>
<p><%= f.submit "Sign in" %></p>
<% end %>
<p id="login_links"><%= render :partial => "devise/shared/links" %></p>
</div>
<div class="fourcol">&nbsp;</div>
</div>

7
app/views/layouts/application.html.erb
View file

@ -15,12 +15,7 @@
</head>
<body>
<div class="container">
<%# examples: flash[:error] (:notice, ...), needs: respective css 'id' elements %>
<% flash.each do | key, msg | %>
<%= content_tag :div, msg, :id => key %>
<% end %>
<div class="container">
<%# The header. %>
<div class="row">
<div class="sevencol header_red"><span class="logo_white">Contact</span><span class="logo_black">-o-Rama</span> - we care about your contacts!</div>

142
public/stylesheets/layout.css
View file

@ -12,7 +12,7 @@ font-style: inherit;
body {
background-color: #ffffff;
line-height: 1.5;
font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana"; /* "Helvetica Neue", "Arial", "Liberation Sans", "FreeSans", sans-serif; */
font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana";
font-size: 0.75em; /* 16px * 0.75 = 12px */
line-height: 1.5em; /* 12px * 1.5 = 18px */
@ -27,6 +27,11 @@ h1 {
line-height: 1;
margin-bottom: 0.5em;
}
h2 {
font-size: 2em;
line-height: 1;
margin-bottom: 0em;
}
/* Header & Footer */
@ -96,6 +101,125 @@ text-align: left;
font-weight: 400;
}
/* flash messages */
#error {
background-color: red;
}
#alert {
background-color: #ffffe0;
}
#notice {
background-color: green;
}
#alert, #error, #notice {
border-bottom-color: #e6db55;
border-left-color: #e6db55;
border-right-color: #e6db55;
border-top-color: #e6db55;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
margin-bottom: 16px;
margin-left: 8px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
}
.flash {
line-height: 1.75em;
}
/* Login form */
.login {
margin-top: 10px;
}
#user_new {
background-attachment: scroll;
background-clip: border-box;
background-color: #ffffff;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: #e5e5e5;
border-bottom-left-radius: 11px;
border-bottom-right-radius: 11px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #e5e5e5;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #e5e5e5;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #e5e5e5;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: 0px 4px 18px;
font-weight: 400;
margin-left: 8px;
padding-bottom: 40px;
padding-left: 16px;
padding-right: 16px;
padding-top: 16px;
}
#user_email, #user_password {
background-attachment: scroll;
background-clip: border-box;
background-color: #fbfbfb;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: #e5e5e5;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #e5e5e5;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #e5e5e5;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #e5e5e5;
border-top-style: solid;
border-top-width: 1px;
font-size: 24px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
width: 97%;
}
#login_links {
margin-bottom: 0px;
margin-left: 8px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 16px;
}
/* contact list */
.contact-summary {
border-bottom-color: #999999;
@ -117,12 +241,16 @@ font-weight: 400;
}
.form_content label {
width: 5em;
float: left;
text-align: right;
padding-top: 0.2em;
padding-right: 0.1em;
display: block;
width: 5em;
float: left;
text-align: right;
padding-top: 0.2em;
padding-right: 0.1em;
display: block;
}
label {
color: #777777;
font-size: 13px;
}
.form_content select, .form_content textarea, .form_content input {