Style login page so that its interface is similar to admin pages.

insane-dreamer · Jan 23, 2009 · 9812496 · 9812496
1 parent 25118b6
commit 9812496
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 46 deletions.
diff --git a/app/views/admin/sessions/new.html.erb b/app/views/admin/sessions/new.html.erb
@@ -1,11 +1,10 @@
-<h1>Stop! Who are you?</h1>
+<h1><%=h config[:title] %></h1>
 <% if flash[:error] %><p><%= flash[:error] %></p><% end %>
 <% form_tag(admin_session_path) do -%>
-  <div>
-    <%= text_field_tag 'openid_url' %>
-    <% if allow_login_bypass? -%>
-      <p><label for="bypass_login">Bypass credentials check</label><%= check_box_tag 'bypass_login' %></p>
-    <% end -%>
-    <%= submit_tag("Login with OpenID") %>
-  </div>  
+  <h2>Stop! Who are you?</h2>
+  <p><%= text_field_tag 'openid_url' %></p>
+  <% if allow_login_bypass? -%>
+    <p><%= check_box_tag 'bypass_login' %> <label for="bypass_login">Bypass credentials check</label></p>
+  <% end -%>
+  <p><%= submit_tag("Login with OpenID") %></p>
 <% end -%>
diff --git a/app/views/layouts/login.html.erb b/app/views/layouts/login.html.erb
@@ -5,13 +5,22 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
-<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
-<title><%=h config[:title] %> - Admin Login</title>
-<%= stylesheet_link_tag 'login' %>
+  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
+
+  <title><%=h config[:title] %> - Admin Login</title>
+
+  <%= stylesheet_link_tag 'login' %>
 </head>
 <body>
-  <div id="page_container">
-    <%= yield %>
+  <div id="page">
+    <div id="content">
+      <%= yield %>
+    </div>
+    <div id="nav">
+      <ul>
+        <li><%= link_to("View Site", '/', :title => config[:title]) %></li>
+      </ul>
+    </div>
   </div>  
 </body>
 </html>
diff --git a/public/stylesheets/login.css b/public/stylesheets/login.css
@@ -1,41 +1,60 @@
-body 
-{ 
-  color: black;
-
-  font: normal 12px verdana, arial, helvetica, sans-serif;
-  line-height: 1.5;
-  padding: 0px;
-  margin: 0px;
-}
-
-#page_container 
-{
-  width: 70em; 
-  min-height: 400px;
-
-  border: solid 1px #aaaaaa;
-  margin-top: 5px;
-  margin-left: auto;
-  margin-right: auto;
-
-  position: relative;
-  text-align: center;
+body {
+  padding-top: 30px;
+  background-color: #dddddd;
+  font-family: Helvetica, Sans-serif;
+  font-size: 10pt;
+  margin: 10px;
+}
+
+#nav {
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  background-color: #222222;
+}
 
-  padding-top: 10em;
+#nav ul {
+  list-style-type: none;
+  margin: 10px;
+  padding: 0;
 }
 
-label, input 
-{
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 10px;
+#nav ul li {
+  display: inline;
+  margin-right: 10px;
 }
 
-input[type='text']
-{
-  font-size: 2em;
+#nav a {
+  color: #eeeeee;
+  text-decoration: none;
   font-weight: bold;
-  width: 20em;
+}
+#nav a.current {
+  border-bottom: solid 3px #eeeeee;
+}
+
+#content {
+  text-align: center;
+  color: #222222;
+}
+
+form {
+  margin: 10px auto;
+  background-color: #ececec;
+  padding: 0.2em 1em;
+  width: 34em;
+}
+
+input[type="checkbox"] {
+  vertical-align: bottom;
+}
+
+input[type="text"] {
+  padding: 0.2em;
+  font-size: 1.3em;
+  font-family: "lucida grande", "lucida sans unicode", "lucida", sans-serif;
+  width: 24em;
+  color: #222222;
   text-align: center;
 }