New version of slim layout with grey background and centered, auto-adjusting page
authorAndy Allan <andy@gravitystorm.co.uk>
Wed, 16 Feb 2011 17:12:48 +0000 (17:12 +0000)
committerTom Hughes <tom@compton.nu>
Sun, 3 Apr 2011 12:46:17 +0000 (13:46 +0100)
app/views/layouts/slim.html.erb
public/stylesheets/common.css

index e738f4c9214be49a7329e90c3c76f80ad71be2d1..a97e526b1ef7f6012abd2628516eb02326107be8 100644 (file)
     <%= yield :head %>
     <title><%= t 'layouts.project_name.title' %><%= ' | '+ h(@title) if @title %></title>
   </head>
-  <body>
+  <body class="slim">
+    <div id="slim_container">
+      <div id="slim_container_content">
+        <div id="slim_content">
+          <% if flash[:error] %>
+            <div id="error"><%= flash[:error] %></div>
+          <% end %>
+          <% if flash[:warning] %>
+            <div id="warning"><%= flash[:warning] %></div>
+          <% end %>
+          <% if flash[:notice] %>
+            <div id="notice"><%= flash[:notice] %></div>
+          <% end %>
 
-    <div id="slim_content">
-      <% if flash[:error] %>
-        <div id="error"><%= flash[:error] %></div>
-      <% end %>
-      <% if flash[:warning] %>
-        <div id="warning"><%= flash[:warning] %></div>
-      <% end %>
-      <% if flash[:notice] %>
-        <div id="notice"><%= flash[:notice] %></div>
-      <% end %>
+          <%= yield %>
+        </div>
 
-      <%= yield %>
+        <div id="slim_header">
+          <h1><%= image_tag("osm_logo.png", :size => "60x60", :border => 0, :alt => t('layouts.logo.alt_text')) %><%= t 'layouts.project_name.h1' %></h1>
+        </div>
+      </div>
     </div>
 
-    <div id="slim_header">
-      <h1><%= image_tag("osm_logo.png", :size => "60x60", :border => 0, :alt => t('layouts.logo.alt_text')) %><%= t 'layouts.project_name.h1' %></h1>
-    </div>
-
-
 
   </body>
 </html>
index c3f1c274e8bb828e61f53ea4c4dd700d41ffc0f2..c89bbe5e4f3dd0cdc0a633fc745654a0526ef392 100644 (file)
@@ -10,6 +10,10 @@ body {
   padding: 0px;
 }
 
+body.slim {
+  background-color: #f0f0f0;
+}
+
 /* Rules for links */
 
 a {
@@ -547,6 +551,21 @@ hr {
   text-align: left;
 }
 
+#slim_container {
+  width: 100%;
+}
+
+#slim_container_content {
+  max-width: 50em;
+  height: 650px;
+  background-color: #FFFFFF;
+  margin: 10px auto;
+  padding: 3px;
+  border-radius: 25px;
+  -moz-border-radius: 25px;
+  border: 1px solid #e6e6e6;
+}
+
 #slim_content {
   margin: 10px;
   position: absolute;
@@ -556,7 +575,6 @@ hr {
 
 #slim_header {
   margin: 10px;
-  background: url('../images/tab_bottom.gif') repeat-x bottom;
 }
 
 #slim_header img {