Commit 8f81b1e8

mo k <m@mokhan.ca>
2012-02-11 06:24:25
fix the form styles and add number of favorites to each creation thumbnail.
1 parent 5e6d371
app/views/creations/_form.html.erb
@@ -1,4 +1,4 @@
-<%= form_for(@creation, :html => {:multipart => true}) do |f| %>
+<%= form_for(@creation, :html => {:multipart => true, :class => "form-horizontal"}) do |f| %>
   <% if @creation.errors.any? %>
     <div id="error_explanation">
       <h2><%= pluralize(@creation.errors.count, "error") %> prohibited this creation from being saved:</h2>
@@ -12,56 +12,53 @@
 
   <fieldset>
     <legend>Share a new creation</legend>
-    <div class="clearfix">
-      <%= f.label :name %>
-      <div class="input">
-        <%= f.text_field :name, :class => "xlarge" %>
+    <div class="control-group">
+      <%= f.label :name, :class => "control-label" %>
+      <div class="controls">
+        <%= f.text_field :name, :class => "input-xlarge" %>
       </div>
-    </div><!-- /clearfix -->
-    <div class="clearfix">
+    </div><!-- /control-group -->
+    <div class="control-group">
       <%= f.label :image, "Upload Main Image" %>
-      <div class="input">
+      <div class="controls">
         <%= f.file_field :image, :class => "input-file" %>
       </div>
-    </div><!-- /clearfix -->
+    </div><!-- /control-group -->
     <!--
-    <div class="clearfix">
+    <div class="control-group">
       <%= f.label :remote_image_url, "Or Image URL" %><br />
-      <div class="input">
-        <%= f.text_field :remote_image_url, :class=>"xlarge" %>
+      <div class="controls">
+        <%= f.text_field :remote_image_url, :class=>"input-xlarge" %>
       </div>
     </div>
     -->
-    <div class="clearfix">
+    <div class="control-group">
       <%= f.label :story, "Description" %><br />
-      <div class="input">
-        <%= f.text_area :story, :class =>"xxlarge", :rows => "3" %>
-        <span class="help-block">
+      <div class="controls">
+        <%= f.text_area :story, :class =>"input-xlarge", :rows => "3" %>
+        <p class="help-block">
           Tell us the story or description of the creation.
-        </span>
+        </p>
       </div>
-    </div><!-- /clearfix -->
-    <div class="clearfix">
-      <label id="optionsCheckboxes">Categories</label>
-      <div class="input">
-        <ul class="inputs-list">
-          <% for category in Category.all %>
-            <li>
-            <label>
-              <%= check_box_tag "creation[category_ids][]", category.id, @creation.categories.include?(category) %>
-              <span><%= category.name %></span>
-            </label>
-            </li>
-          <% end %>
-        </ul>
-        <span class="help-block">
-          <strong>Note:</strong> Help us categorize your creation by checking off one or more from the above list.
-        </span>
+    </div><!-- /control-group -->
+    <div class="control-group">
+      <label class="control-label">Categories</label>
+      <div class="controls">
+        <% for category in Category.all %>
+          <label class="checkbox">
+            <%= check_box_tag "creation[category_ids][]", category.id, @creation.categories.include?(category) %>
+            <%= category.name %>
+          </label>
+        <% end %>
+        <p class="help-block">
+        <strong>Note:</strong> 
+        Help us categorize your creation by checking off one or more from the above list.
+        </p>
       </div>
-    </div><!-- /clearfix -->
-
-    <div class="actions">
-      <input type="submit" class="btn primary" value="Save changes">&nbsp;<button type="reset" class="btn">Cancel</button>
+    </div><!-- /control-group -->
+    <div class="form-actions">
+      <button type="submit" class="btn btn-primary">Save changes</button>
+      <button type="reset" class="btn">Cancel</button>
     </div>
   </fieldset>
 <% end %>
app/views/creations/crop.html.erb
@@ -8,16 +8,12 @@
   </style>
 <script type="text/javascript" charset="utf-8">
 $(function() {
-    try{
   $('#cropbox').Jcrop({
     onChange: update_crop,
     onSelect: update_crop,
-    setSelect: [50, 50, 210, 150],
+    setSelect: [100, 100, 210, 150],
     aspectRatio: 1.4
   });
-  }catch(e){
-  alert(e);
-  }
 });
 
 function update_crop(coords) {
@@ -50,11 +46,11 @@ function update_crop(coords) {
   </div>
 </div>
 <div class="row">
-    <div class="span12">
+    <div class="span9">
 	<h3>Do you want to crop the image as well?</h3>
       <%= image_tag @creation.image_url, :id => "cropbox" %>
     </div>
-    <div class="span4">
+    <div class="span3">
       <h3>Crop Preview</h3>
       <div class="preview">
           <%= image_tag @creation.image_url, :id => "preview" %>
@@ -62,15 +58,14 @@ function update_crop(coords) {
     </div>
 </div>
 <div class="row">
-  <div class="span16">
+  <div class="span12">
     <%= form_for @creation, :url => creations_crop_update_path(@creation) do |f| %>
         <% for attribute in [:crop_x, :crop_y, :crop_h, :crop_w] %>
             <%= f.hidden_field attribute, :id => attribute %>
         <% end %>
-        <div class="actions">
-          <%= f.submit "Crop and Publish", :class => "btn large primary" %>
-          <%# <a class="btn large primary" href="#">Publish</a>%>
-          <a class="btn large" href="<%= url_for creation_path(@creation) %>">Skip</a>
+        <div class="form-actions">
+          <%= f.submit "Crop and Publish", :class => "btn btn-large btn-primary" %>
+          <a class="btn btn-large" href="<%= url_for creation_path(@creation) %>">Skip</a>
         </div>
     <% end %>
   </div>
app/views/creations/edit.html.erb
@@ -3,20 +3,21 @@
 <% end %>
 
 <div class="row">
-  <div class="span16">
+  <div class="span12">
     <h1>Editing creation <em><%= @creation.name %></em></h1>
   </div>
 </div>
 <div class="row">
-  <div class="span4">
-    <div class="media-grid">
+  <div class="span3">
+    <ul class="thumbnails">
+      <li>
       <a href="<%= url_for creation_path(@creation) %>">
         <%= image_tag @creation.image_url.to_s, :class => "thumbnail", :style => "width:235px;" %>
       </a>
-    </div>
-
+      </li>
+    </ul>
     <% if @creation.photos.length < 3 %>
-		<h3>Add more photos</h3>
+      <h3>Add more photos</h3>
       <% unless @creation.new_record? %>
         <%= form_tag(creation_photos_path(@creation), :method => "post", :multipart => true) do |f| %>
           <%= fields_for Photo.new do |f| %>
@@ -26,19 +27,20 @@
         <% end %>
       <% end %>
     <% end %>
-
   </div>
-  <div class="span12">
+  <div class="span9">
     <%= render 'form' %>
+    <ul class="thumbnails">
+      <% @creation.photos.each do |photo| %>
+        <li>
+        <div class="thumbnail">
+          <%= image_tag photo.image_url(:thumb) %>
+          <div class="caption">
+            <p><%= link_to "Delete »", creation_photo_path(@creation, photo), :class => 'btn', :method => :delete, :confirm => "Are you sure?" %></p>
+          </div>
+        </div>
+        </li>
+      <% end %>
+    </ul>
   </div>
 </div>
-
-<div class="row">
-  <div class="span1">&nbsp;</div>
-  <% @creation.photos.each do |photo| %>
-    <div class="span5 media-grid">
-      <p><%= image_tag photo.image_url(:thumb) %></p>
-      <p><%= link_to "Delete »", creation_photo_path(@creation, photo), :class => 'btn', :method => :delete, :confirm => "Are you sure?" %></p>
-    </div>
-  <% end %>
-</div>
app/views/creations/new.html.erb
@@ -2,7 +2,7 @@
   Share my creation
 <% end %>
 
-<ul class="tabs">
+<ul class="nav nav-tabs">
   <li> <%= link_to "Profile", profiles_mine_path %></li>
   <li> <%= link_to "Favorites", profiles_favorites_path %></li>
   <li class="active"> <%= link_to "Share", new_creation_path %></li>
@@ -10,15 +10,15 @@
 </ul>
 
 <div class="row">
-  <div class="span12">
+  <div class="span9">
     <%= render 'form' %>
   </div>
-  <div class="span4">
-    <div class="media-grid">
-      <a href="<%= url_for profile_path(current_user) %>"><img src="<%= avatar_url current_user %>&amp;s=200" alt="<%= current_user.name %>" /></a>
-	</div>
-		<h3><%= current_user.name %></h3>
-	    <p>member since: <%= current_user.created_at.to_s :foomat %></p>
-	    <p>last signed in: <%= current_user.last_sign_in_at.to_s :foomat %></p>
+  <div class="span3">
+    <ul class="thumbnails">
+      <li><a href="<%= url_for profile_path(current_user) %>"><img src="<%= avatar_url current_user %>&amp;s=200" alt="<%= current_user.name %>" /></a></li>
+    </ul>
+    <h3><%= current_user.name %></h3>
+    <p>member since: <%= current_user.created_at.to_s :foomat %></p>
+    <p>last signed in: <%= current_user.last_sign_in_at.to_s :foomat %></p>
   </div>
 </div>
app/views/creations/show.html.erb
@@ -13,22 +13,51 @@
     </small> 
   </h1>
   <% @creation.categories.each do |category| %>
-    <span class="label notice"><a href="/categories/<%= category.slug %>"><%= category.name %></a></span>
+    <span class="label"><a href="/categories/<%= category.slug %>"><%= category.name %></a></span>
   <% end %> 
 </div>
 
 <div class="row">
-  <div class="span16">
+  <div class="span12">
+<ul class="thumbnails">
+        <li class="span8">
+          <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/360x268"></a>
+        </li>
+        <li class="span2">
+          <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/160x120"> </a>
+        </li>
+        <li class="span2">
+          <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/160x120"> </a>
+        </li>
+        <li class="span2">
+          <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/160x120"> </a>
+        </li>
+        <li class="span2">
+          <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/160x120"> </a>
+        </li>
+        <li class="span2">
+          <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/160x120"> </a>
+        </li>
+        <li class="span2">
+          <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/160x120"> </a>
+        </li>
+        <li class="span2">
+          <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/160x120"> </a>
+        </li>
+        <li class="span2">
+          <a class="thumbnail" href="#"> <img alt="" src="http://placehold.it/160x120"> </a>
+        </li>
+      </ul>
   </div>
 </div>
 
 <div class="row">
-  <div class="span12">
-    <div class="media-grid">
-      <a href="<%= url_for creation_path(@creation) %>"><img class="thumbnail" src="<%= @creation.image_url(:large).to_s%>" alt="<%= @creation.name %>"></a>
-    </div>
+  <div class="span9">
+    <ul class="thumbnails">
+      <li><a href="<%= url_for creation_path(@creation) %>"><img class="thumbnail" src="<%= @creation.image_url(:large).to_s %>" alt="<%= @creation.name %>"></a></li>
+    </ul>
     <div class="row">
-      <div class="span10">
+      <div class="span7">
         <p> 
         submitted on: <%= @creation.created_at.to_s :foomat %> |
         <%= link_to 'fanclub (' + pluralize(@creation.favorites.length, 'fan') + ')', creation_favorites_path(:creation_id => @creation.id)%> 
@@ -44,31 +73,25 @@
       </div>
     </div>
   </div>
-
-  <div class="span4">
-    <ul class="media-grid">
+  <div class="span3">
+    <ul class="thumbnails">
       <% @creation.photos.each do |photo| %>
-        <li> <a href=""><img class="thumbnail" src="<%= photo.image.thumb.url.to_s%>" alt="<%= @creation.name %>"></a> </li>
+        <li> <a href=""><img src="<%= photo.image.thumb.url.to_s%>" alt="<%= @creation.name %>"></a> </li>
       <% end %>
     </ul>
   </div>
 </div>
 
 <div class="row">
-  <div class="span16">
+  <div class="span12">
     <h3>Description</h3>
     <p><%= @creation.story %></p>
   </div>
 </div>
 <hr>
 <div class="row">
-  <div class="span16">
-    <h1>Other Creations by <small><%= @creation.user.name %></small></h1>
-  </div>
   <div class="span12">
+    <h1>Other Creations by <small><%= @creation.user.name %></small></h1>
     <%= render "shared/creation_image_gallery" %>
   </div>
-  <div class="span4 media-grid">
-  </div>
-
 </div>
app/views/layouts/application.html.erb
@@ -33,7 +33,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </a>
-          <a class="brand" href="<%= url_for home_index_path %>">Cake<em>Side</em></a>
+          <a class="brand" style="color:hotpink;" href="<%= url_for home_index_path %>">Cake<em>Side</em></a>
           <div class="nav-collapse">
             <ul class="nav">
               <li><a href="<%= url_for home_index_path %>">Home</a></li>
app/views/profiles/favorites.html.erb
@@ -1,8 +1,8 @@
 <% content_for :title do %>
-  My profile
+  My Favorites
 <% end %>
 
-<ul class="tabs">
+<ul class="nav nav-tabs">
   <li> <%= link_to "Profile", profiles_mine_path %></li>
   <li class="active"> <%= link_to "Favorites", profiles_favorites_path %></li>
   <li> <%= link_to "Share", new_creation_path %></li>
@@ -10,7 +10,7 @@
 </ul>
 
 <div class="row">
-  <div class="span4">
+  <div class="span3">
     <div class="media-grid">
       <a href="<%= url_for profile_path(current_user) %>"><img src="<%= avatar_url current_user %>&amp;s=200" alt="<%= current_user.name %>" /></a>
     </div>
@@ -19,9 +19,9 @@
     <p>last signed in: <%= current_user.last_sign_in_at.to_s :foomat %></p>
     <a href="http://en.gravatar.com/" target="_blank">Change My Photo</a>
   </div>
-  <div class="span12">
+  <div class="span9">
     <h2>My Favorites</h2>
-    <ul class="media-grid">
+    <ul class="thumbnails">
       <% @creations.each do |creation| %>
         <li><a href="<%= url_for creation %>"><img class="thumbnail" src="<%= creation.image.thumb.url %>" alt="<%= creation.name %>"></a></li>
       <% end %>
app/views/profiles/mine.html.erb
@@ -2,7 +2,7 @@
   My profile
 <% end %>
 
-<ul class="tabs">
+<ul class="nav nav-tabs">
   <li class="active"> <%= link_to "Profile", profiles_mine_path %></li>
   <li> <%= link_to "Favorites", profiles_favorites_path %></li>
   <li> <%= link_to "Share", new_creation_path %></li>
@@ -10,16 +10,16 @@
 </ul>
 
 <div class="row">
-  <div class="span4">
-    <div class="media-grid">
-      <a href="<%= url_for profile_path(current_user) %>"><img src="<%= avatar_url current_user %>&amp;s=200" alt="<%= current_user.name %>" /></a>
-    </div>
+  <div class="span3">
+    <ul class="thumbnails">
+      <li><a href="<%= url_for profile_path(current_user) %>"><img src="<%= avatar_url current_user %>&amp;s=200" alt="<%= current_user.name %>" /></a></li>
+    </ul>
     <h3><%= current_user.name %></h3>
     <p>member since: <%= current_user.created_at.to_s :foomat %></p>
     <p>last signed in: <%= current_user.last_sign_in_at.to_s :foomat %></p>
     <a href="http://en.gravatar.com/" target="_blank">Change My Photo</a>
   </div>
-  <div class="span12">
+  <div class="span9">
     <%= render "shared/creation_image_gallery" %>
   </div>
 </div>
app/views/registrations/edit.html.erb
@@ -1,55 +1,56 @@
 <% content_for :title do %>
   Update My Account
 <% end %>
-<ul class="tabs">
+<ul class="nav nav-tabs">
   <li> <%= link_to "Profile", profiles_mine_path %></li>
   <li> <%= link_to "Favorites", profiles_favorites_path %></li>
   <li> <%= link_to "Share", new_creation_path %></li>
   <li class="active"> <%= link_to "Settings", edit_user_registration_path %> </li>
 </ul>
 <div class="row">
-  <div class="span12">
+  <div class="span9">
     <h1>Settings</h1>
     <p> If you prefer not to change your password, then just leave it blank.  </p>
-    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
+    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, :class=> "form-horizontal" }) do |f| %>
       <%= devise_error_messages! %>
       <fieldset>
         <legend>Update your settings</legend>
-        <div class="clearfix">
-          <%= f.label :name  %>
-          <div class="input"> <%= f.text_field :name, :class => "xlarge" %> </div>
-        </div><!-- /clearfix -->
-        <div class="clearfix">
-          <%= f.label :email  %>
-          <div class="input"> <%= f.email_field :email, :class => "xlarge"  %> </div>
-        </div><!-- /clearfix -->
-        <div class="clearfix">
-          <%= f.label :password %> 
-          <div class="input"> <%= f.password_field :password, :class => "xlarge"  %> </div>
-        </div><!-- /clearfix -->
-        <div class="clearfix">
-          <%= f.label :password_confirmation %> 
-          <div class="input"> <%= f.password_field :password_confirmation, :class => "xlarge" %> </div>
-        </div><!-- /clearfix -->
-        <div class="clearfix">
-          <%= f.label :current_password %> 
-          <div class="input"> <%= f.password_field :current_password, :class => "xlarge" %> </div>
-        </div><!-- /clearfix -->
-        <div class="actions">
-          <input type="submit" class="btn primary" value="Save changes">&nbsp;<button type="reset" class="btn">Cancel</button>
+        <div class="control-group">
+          <%= f.label :name, :class => "control-label"  %>
+          <div class="controls"> <%= f.text_field :name, :class => "input-xlarge" %> </div>
+        </div><!-- /control-group -->
+        <div class="control-group">
+          <%= f.label :email, :class => "control-label"  %>
+          <div class="controls"> <%= f.email_field :email, :class => "input-xlarge"  %> </div>
+        </div><!-- /control-group -->
+        <div class="control-group">
+          <%= f.label :password, :class => "control-label" %> 
+          <div class="controls"> <%= f.password_field :password, :class => "input-xlarge"  %> </div>
+        </div><!-- /control-group -->
+        <div class="control-group">
+          <%= f.label :password_confirmation, :class => "control-label" %> 
+          <div class="controls"> <%= f.password_field :password_confirmation, :class => "input-xlarge" %> </div>
+        </div><!-- /control-group -->
+        <div class="control-group">
+          <%= f.label :current_password, :class => "control-label" %> 
+          <div class="controls"> <%= f.password_field :current_password, :class => "input-xlarge" %> </div>
+        </div><!-- /control-group -->
+        <div class="form-actions">
+          <input type="submit" class="btn btn-primary" value="Save changes" />
+          <button type="reset" class="btn">Cancel</button>
         </div>
       </fieldset>
     <% end %>
   </div>
-  <div class="span4">
-    <div class="media-grid">
-      <a href="<%= url_for profile_path(current_user) %>"><img src="<%= avatar_url current_user %>&amp;s=200" alt="<%= current_user.name %>" /></a>
-    </div>
+  <div class="span3">
+    <ul class="thumbnails">
+      <li><a href="<%= url_for profile_path(current_user) %>"><img src="<%= avatar_url current_user %>&amp;s=200" alt="<%= current_user.name %>" /></a></li>
+    </ul>
     <a href="http://en.gravatar.com/" target="_blank">Change My Photo</a>
     <p>member since: <%= current_user.created_at.to_s :foomat %></p>
     <p>last signed in: <%= current_user.last_sign_in_at.to_s :foomat %></p>
 
     <h4>Cancel My Account</h4>
-    <p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), :confirm => "Are you sure?", :method => :delete, :class => "btn danger" %></p>
+    <p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), :confirm => "Are you sure?", :method => :delete, :class => "btn btn-danger" %></p>
   </div>
 </div>
app/views/shared/_creation_image_gallery.html.erb
@@ -1,11 +1,17 @@
 <h2>Recent Creations</h2>
 <ul class="thumbnails">
   <% @creations.each do |creation| %>
-    <% if( creation.favorites.count > 0)  %>
-      <li><a href="<%= url_for creation %>"><img class="thumbnail" src="<%= creation.image.thumb.url %>" alt="<%= creation.name %>"><%= creation.favorites.count%></a></li>
-    <% else %>
-      <li><a href="<%= url_for creation %>"><img class="thumbnail" src="<%= creation.image.thumb.url %>" alt="<%= creation.name %>"></a></li>
-    <% end %>
+    <li class="span3">
+    <div class="thumbnail">
+      <div class="caption">
+        <h5><%= creation.name %></h5>
+        <a href="<%= url_for creation %>">
+          <img src="<%= creation.image.thumb.url %>" alt="<%= creation.name %>">
+        </a>
+        <p><%= link_to creation.favorites.count, creation_favorites_path(:creation_id => creation.id) %><i class="icon-heart"></i></p>
+      </div>
+    </div>
+    </li>
   <% end %>
 </ul>