rails: basic campaign page CSS

nycpublic_rails/app/assets/stylesheets/nycpublic.css.scss

@@ -1,6 +1,6 @@
 /* Basics */
 body {
-  font-family: verdana, arial, helvetica, sans-serif;
+  font-family: Arial, helvetica, sans-serif;
   font-size: 13px;
   line-height: 18px;
   background-color: #eee;
@@ -23,3 +23,30 @@ body {
 .navbar .brand, .navbar .nav > li > a {
   text-shadow: none;
 }
+
+/* Campaigns */
+.campaign h1, h2 {
+  font-weight: normal;
+}
+.campaign h1.name {
+  color: black;
+  font-size: 3em;
+}
+
+.campaign h2 {
+  color: #666;
+  font-size: 1.5em;
+}
+
+.campaign.box h2 {
+  background-color: #ddd;
+  padding-left: 1em;
+}
+
+div.campaign.photo {
+  width: 100%;
+  background-color: #ddd;
+  height: 200px;
+  text-align: center;
+}
+

nycpublic_rails/app/views/campaigns/show.html.erb

@@ -1,25 +1,45 @@
-<p id="notice"><%= notice %></p>
+<div class="campaign page row">
+  <div class="campaign frame span12">
+    <div class="campaign inner row">
+      <div class="campaign span9">
+        <h1 class="campaign name"><%= @campaign.name %></h1>
 
-<p>
-  <b>Name:</b>
-  <%= @campaign.name %>
-</p>
+        <div class="campaign dates">
+          <%= @campaign.start_date.to_s(:friendly) %> - <%= @campaign.start_date.to_s(:friendly) %>
+        </div>
 
-<p>
-  <b>Description:</b>
-  <%= @campaign.description %>
-</p>
+        <div class="campaign marquee">
+          <div class="campaign photo">
+            <!-- placeholder for now -->
+            PHOTO PLACEHOLDER
+          </div>
+          <div class="campaign buttons">
+          </div>
+        </div>
 
-<p>
-  <b>Start date:</b>
-  <%= @campaign.start_date %>
-</p>
+        <p id="notice"><%= notice %></p>
 
-<p>
-  <b>End date:</b>
-  <%= @campaign.end_date %>
-</p>
+        <div class="campaign description">
+          <h2>About Us</h2>
+          <%= @campaign.description %>
+        </div>
+        <hr />
 
+      </div>
+      <div class="campaign sidebar span3">
+        <div class="campaign box location">
+          <h2>Location</h2>
+        </div>
+        <div class="campaign box stats">
+          <h2>Stats</h2>
+        </div>
+        <div class="campaign box organizer">
+          <h2>Organizer</h2>
+        </div>
+      </div><!-- end sidebar -->
+    </div>
+  </div>
+</div>
 
-<%= link_to 'Edit', edit_campaign_path(@campaign) %> |
-<%= link_to 'Back', campaigns_path %>
+
+<%= link_to 'Edit', edit_campaign_path(@campaign) %>

nycpublic_rails/config/initializers/date_formats.rb

@@ -0,0 +1,3 @@
+Date::DATE_FORMATS.merge!({
+  :friendly => lambda {|date| date.strftime("%B #{date.day.ordinalize}, %Y")}
+})