Commit 7ebb5c9a

mo k <m@mokhan.ca>
2011-12-02 07:34:07
clean up up new cration form.
1 parent 5698685
Changed files (5)
app/views/creations/_form.html.erb
@@ -11,30 +11,55 @@
   <% end %>
 
   <fieldset>
-    <p>
-    <%= f.label :name %><br />
-    <%= f.text_field :name, :class => "forms" %>
-    </p>
-    <p>
-    <%= f.label :image, "Upload Image" %><br />
-    <%= f.file_field :image, :class => "forms" %>
-    </p>
-    <p>
-    <%= f.label :remote_image_url, "Or Image URL" %><br />
-    <%= f.text_field :remote_image_url, :class => "forms" %>
-    </p>
-    <p>
-    <%= f.label :story %><br />
-    <%= f.text_area :story, :class => "forms"  %>
-    </p>
-    <% for category in Category.all %>
-      <div>
-        <label>
-          <%= check_box_tag "creation[category_ids][]", category.id, @creation.categories.include?(category) %>
-          <%= category.name %>
-        </label>
+    <legend>Share a new creation</legend>
+    <div class="clearfix">
+      <%= f.label :name %>
+      <div class="input">
+        <%= f.text_field :name, :class => "xlarge" %>
       </div>
-    <% end %>
-    <input type="submit" id="submit" name="submit" value="share" />
+    </div><!-- /clearfix -->
+    <div class="clearfix">
+      <%= f.label :image, "Upload Image" %>
+      <div class="input">
+        <%= f.file_field :image, :class => "input-file" %>
+      </div>
+    </div><!-- /clearfix -->
+    <div class="clearfix">
+      <%= f.label :remote_image_url, "Or Image URL" %><br />
+      <div class="input">
+        <%= f.text_field :remote_image_url, :class=>"xlarge" %>
+      </div>
+    </div><!-- /clearfix -->
+    <div class="clearfix">
+      <%= f.label :story %><br />
+      <div class="input">
+        <%= f.text_area :story, :class =>"xxlarge", :rows => "3" %>
+        <span class="help-block">
+          Block of help text to describe the field above if need be.
+        </span>
+      </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> Labels surround all the options for much larger click areas and a more usable form.
+        </span>
+      </div>
+    </div><!-- /clearfix -->
+
+    <div class="actions">
+      <input type="submit" class="btn primary" value="Save changes">&nbsp;<button type="reset" class="btn">Cancel</button>
+    </div>
   </fieldset>
 <% end %>
app/views/creations/new.html.erb
@@ -6,10 +6,19 @@
   <%= render "shared/my_profile_sidebar" %>
 <% end %>
 
-<div class="grid_9 alpha omega">
-  <h1>Share your creation with other Cake artists, enthusiasts, and eaters!</h1>
-  <p>We&apos;re delighted that you're going to share your latest creation with us.<p>
-  <h2>Share My Latest Creation</h2>
-  <%= render 'form' %>
-</div>
-<div class="clear" />
+<ul class="tabs">
+  <li> <%= link_to "Profile", profiles_mine_path %></li>
+  <li class="active"> <%= link_to "Share", new_creation_path %></li>
+  <li><a href="#">Messages</a></li>
+  <li> <%= link_to "Settings", edit_user_registration_path %> </li>
+  <li><a href="#">Contact</a></li>
+</ul>
+
+<%# <div class="hero-unit">%>
+<%#   <h1>Share your creation with other Cake artists, enthusiasts, and eaters!</h1>%>
+<%#   <p>We&apos;re delighted that you're going to share your latest creation with us.<p>%>
+<%#   <p><a class="btn primary large">Learn more &raquo;</a></p>%>
+<%# </div>%>
+
+<h2>Share My Latest Creation</h2>
+<%= render 'form' %>
app/views/profiles/mine.html.erb
@@ -8,5 +8,11 @@
   <%= render "shared/my_profile_sidebar" %>
 <% end %>
 
-<h1>My Creations</h1>
+<ul class="tabs">
+  <li class="active"> <%= link_to "Profile", profiles_mine_path %></li>
+  <li><a href="#">Messages</a></li>
+  <li> <%= link_to "Settings", edit_user_registration_path %> </li>
+  <li><a href="#">Contact</a></li>
+</ul>
+
 <%= render "shared/creation_thumbs" %>
app/views/registrations/edit.html.erb
@@ -8,54 +8,52 @@
   <%= render "shared/my_profile_sidebar" %>
 <% end %>
 
-<div class="grid_9 alpha omega">
-  <div class="grid_6 alpha">
-
-    <h1>Update My Account</h1>
-    <p>
-    If you prefer not to change your password, then just leave it blank.
-    </p>
+<ul class="tabs">
+  <li> <%= link_to "Profile", profiles_mine_path %></li>
+  <li> <%= link_to "Share", new_creation_path %></li>
+  <li><a href="#">Messages</a></li>
+  <li class="active"> <%= link_to "Settings", edit_user_registration_path %> </li>
+  <li><a href="#">Contact</a></li>
+</ul>
+
+<div class="row">
+  <div class="span8">
+    <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| %>
       <%= devise_error_messages! %>
-
       <fieldset>
-        <p>
-        <%= f.label :name, :style => 'display:block;' %>
-        <%= f.text_field :name %>
-        </p>
-
-        <p>
-        <%= f.label :email, :style => 'display:block;' %>
-        <%= f.email_field :email %>
-        </p>
-
-        <p>
-        <%= f.label :password, :style => 'display:block;' %> 
-        <%= f.password_field :password %>
-        </p>
-
-        <p>
-        <%= f.label :password_confirmation, :style => 'display:block;' %>
-        <%= f.password_field :password_confirmation %>
-        </p>
-
-        <p>
-        <%= f.label :current_password, :style => 'display:block;' %>
-        <%= f.password_field :current_password %>
-        </p>
-
-        <input type="submit" value="update" />
+        <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>
       </fieldset>
     <% end %>
   </div>
-
-  <div class="grid_3 omega">
-    <div class="helpbox">
-      <h4>Cancel My Account</h4>
-      <p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), :confirm => "Are you sure?", :method => :delete %></p>
-    </div>
+  <div class="span4">&nbsp;</div>
+  <div class="span4">
+    <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>
+    <a href="http://en.gravatar.com/" target="_blank">Change My Photo</a>
   </div>
 </div>
-<div class="clear" />
-
-
app/views/shared/_form_sample.html.erb
@@ -0,0 +1,230 @@
+
+      <form>
+        <fieldset>
+          <legend>Example form legend</legend>
+          <div class="clearfix">
+            <label for="xlInput">X-Large input</label>
+            <div class="input">
+              <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
+            </div>
+          </div><!-- /clearfix -->
+
+          <div class="clearfix">
+            <label for="normalSelect">Select</label>
+            <div class="input">
+              <select name="normalSelect" id="normalSelect">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+
+                <option>4</option>
+                <option>5</option>
+              </select>
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label for="mediumSelect">Select</label>
+
+            <div class="input">
+              <select class="medium" name="mediumSelect" id="mediumSelect">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+
+              </select>
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label for="multiSelect">Multiple select</label>
+            <div class="input">
+              <select class="medium" size="5" multiple="multiple" name="multiSelect" id="multiSelect">
+                <option>1</option>
+
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+            </div>
+          </div><!-- /clearfix -->
+
+          <div class="clearfix">
+            <label>Uneditable input</label>
+            <div class="input">
+              <span class="uneditable-input">Some value here</span>
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label for="disabledInput">Disabled input</label>
+
+            <div class="input">
+              <input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label for="disabledInput">Disabled textarea</label>
+            <div class="input">
+              <textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea>
+
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix error">
+            <label for="errorInput">Input with error</label>
+            <div class="input">
+              <input class="xlarge error" id="errorInput" name="errorInput" size="30" type="text" />
+              <span class="help-inline">Small snippet of help text</span>
+            </div>
+
+          </div><!-- /clearfix -->
+          <div class="clearfix success">
+            <label for="successInput">Input with success</label>
+            <div class="input">
+              <input class="xlarge error" id="successInput" name="successInput" size="30" type="text" />
+              <span class="help-inline">Success!</span>
+            </div>
+          </div><!-- /clearfix -->
+
+          <div class="clearfix warning">
+            <label for="warningInput">Input with warning</label>
+            <div class="input">
+              <input class="xlarge error" id="warningInput" name="warningInput" size="30" type="text" />
+              <span class="help-inline">Ruh roh!</span>
+            </div>
+          </div><!-- /clearfix -->
+        </fieldset>
+
+        <fieldset>
+          <legend>Example form legend</legend>
+          <div class="clearfix">
+            <label for="prependedInput">Prepended text</label>
+            <div class="input">
+              <div class="input-prepend">
+                <span class="add-on">@</span>
+
+                <input class="medium" id="prependedInput" name="prependedInput" size="16" type="text" />
+              </div>
+              <span class="help-block">Here's some help text</span>
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label for="prependedInput2">Prepended checkbox</label>
+            <div class="input">
+
+              <div class="input-prepend">
+                <label class="add-on"><input type="checkbox" name="" id="" value="" /></label>
+                <input class="mini" id="prependedInput2" name="prependedInput2" size="16" type="text" />
+              </div>
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label for="appendedInput">Appended checkbox</label>
+
+            <div class="input">
+              <div class="input-append">
+                <input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" />
+                <label class="add-on active"><input type="checkbox" name="" id="" value="" checked="checked" /></label>
+              </div>
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label for="fileInput">File input</label>
+
+            <div class="input">
+              <input class="input-file" id="fileInput" name="fileInput" type="file" />
+            </div>
+          </div><!-- /clearfix -->
+        </fieldset>
+        <fieldset>
+          <legend>Example form legend</legend>
+          <div class="clearfix">
+
+            <label id="optionsCheckboxes">List of options</label>
+            <div class="input">
+              <ul class="inputs-list">
+                <li>
+                  <label>
+                    <input type="checkbox" name="optionsCheckboxes" value="option1" />
+                    <span>Option one is this and that&mdash;be sure to include why it’s great</span>
+
+                  </label>
+                </li>
+                <li>
+                  <label>
+                    <input type="checkbox" name="optionsCheckboxes" value="option2" />
+                    <span>Option two can also be checked and included in form results</span>
+                  </label>
+                </li>
+
+                <li>
+                  <label>
+                    <input type="checkbox" name="optionsCheckboxes" value="option2" />
+                    <span>Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results. Let's make it super long so that everyone can see how it wraps, too.</span>
+                  </label>
+                </li>
+                <li>
+
+                  <label class="disabled">
+                    <input type="checkbox" name="optionsCheckboxes" value="option2" disabled />
+                    <span>Option four cannot be checked as it is disabled.</span>
+                  </label>
+                </li>
+              </ul>
+              <span class="help-block">
+                <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
+              </span>
+
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label>Date range</label>
+            <div class="input">
+              <div class="inline-inputs">
+                <input class="small" type="text" value="May 1, 2011" />
+                <input class="mini" type="text" value="12:00am" />
+
+                to
+                <input class="small" type="text" value="May 8, 2011" />
+                <input class="mini" type="text" value="11:59pm" />
+                <span class="help-block">All times are shown as Pacific Standard Time (GMT -08:00).</span>
+              </div>
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label for="textarea">Textarea</label>
+
+            <div class="input">
+              <textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
+              <span class="help-block">
+                Block of help text to describe the field above if need be.
+              </span>
+            </div>
+          </div><!-- /clearfix -->
+          <div class="clearfix">
+            <label id="optionsRadio">List of options</label>
+
+            <div class="input">
+              <ul class="inputs-list">
+                <li>
+                  <label>
+                    <input type="radio" checked name="optionsRadios" value="option1" />
+                    <span>Option one is this and that&mdash;be sure to include why it’s great</span>
+                  </label>
+                </li>
+
+                <li>
+                  <label>
+                    <input type="radio" name="optionsRadios" value="option2" />
+                    <span>Option two can is something else and selecting it will deselect options 1</span>
+                  </label>
+                </li>
+              </ul>
+            </div>
+
+          </div><!-- /clearfix -->
+          <div class="actions">
+            <input type="submit" class="btn primary" value="Save changes">&nbsp;<button type="reset" class="btn">Cancel</button>
+          </div>
+        </fieldset>
+      </form>