Permalink
Browse files

added blueprint CSS framework and formtastic, started formatting layo…

…ut for styling
  • Loading branch information...
stevenhaddox committed Oct 25, 2009
1 parent 75c4bcf commit c802abcafc8781a7892ed0136bd15f9ca4d6c6cb
Showing with 786 additions and 65 deletions.
  1. +1 −1 app/models/photo.rb
  2. +13 −0 app/views/layouts/_menu.rhtml
  3. +11 −0 app/views/layouts/_user_menu.rhtml
  4. +19 −24 app/views/layouts/application.rhtml
  5. +0 −2 app/views/photos/index.rhtml
  6. +6 −22 app/views/photos/new.rhtml
  7. +21 −12 app/views/users/edit.rhtml
  8. +1 −1 config/initializers/formtastic.rb
  9. +1 −1 config/routes.rb
  10. 0 public/stylesheets/{main.css → application.css}
  11. BIN public/stylesheets/blueprint/.DS_Store
  12. +35 −0 public/stylesheets/blueprint/ie.css
  13. BIN public/stylesheets/blueprint/plugins/buttons/icons/cross.png
  14. BIN public/stylesheets/blueprint/plugins/buttons/icons/key.png
  15. BIN public/stylesheets/blueprint/plugins/buttons/icons/tick.png
  16. +32 −0 public/stylesheets/blueprint/plugins/buttons/readme.txt
  17. +97 −0 public/stylesheets/blueprint/plugins/buttons/screen.css
  18. +14 −0 public/stylesheets/blueprint/plugins/fancy-type/readme.txt
  19. +71 −0 public/stylesheets/blueprint/plugins/fancy-type/screen.css
  20. BIN public/stylesheets/blueprint/plugins/link-icons/icons/doc.png
  21. BIN public/stylesheets/blueprint/plugins/link-icons/icons/email.png
  22. BIN public/stylesheets/blueprint/plugins/link-icons/icons/external.png
  23. BIN public/stylesheets/blueprint/plugins/link-icons/icons/feed.png
  24. BIN public/stylesheets/blueprint/plugins/link-icons/icons/im.png
  25. BIN public/stylesheets/blueprint/plugins/link-icons/icons/pdf.png
  26. BIN public/stylesheets/blueprint/plugins/link-icons/icons/visited.png
  27. BIN public/stylesheets/blueprint/plugins/link-icons/icons/xls.png
  28. +18 −0 public/stylesheets/blueprint/plugins/link-icons/readme.txt
  29. +40 −0 public/stylesheets/blueprint/plugins/link-icons/screen.css
  30. +10 −0 public/stylesheets/blueprint/plugins/rtl/readme.txt
  31. +110 −0 public/stylesheets/blueprint/plugins/rtl/screen.css
  32. +29 −0 public/stylesheets/blueprint/print.css
  33. +257 −0 public/stylesheets/blueprint/screen.css
  34. +0 −2 spec/models/user_spec.rb
View
@@ -19,7 +19,7 @@ class Photo < ActiveRecord::Base
after_save :upload_to_flickr
after_save :update_flickr_description
- attr_accessor :image
+ attr_accessor :image, :message
def flickr_api
@flickr_api ||= Flickr.new(FLICKR.merge(:token => user.flickr_token))
@@ -0,0 +1,13 @@
+<ul id="menu">
+<!--
+ <li class='<%= 'active' if request.request_uri == "/" %>'>
+ <%= link_to 'Home', root_url %>
+ </li>
+-->
+ <li class='<%= 'active' if controller.action_name == "photos" %>'>
+ <%= link_to 'Photos', photos_url %>
+ </li>
+ <li class='<%= 'active' if controller.controller_name == "users" %>'>
+ <%= link_to "Users", users_url %>
+ </li>
+</ul>
@@ -0,0 +1,11 @@
+<%- if signed_in? -%>
+<ul id="user_menu">
+ <li class='<%= 'active' if request.request_uri == "/photos/new" %>'>
+ <%= link_to 'Upload Photo', new_photo_url %>
+ </li>
+ <li class='<%= 'active' if request.request_uri == "/users/#{current_user.twitter_username}" %>'>
+ <%= link_to 'Edit Profile', edit_user_url(current_user) %>
+ </li>
+ <li><%= link_to 'Logout', session_url, :method => :delete %></li>
+</ul>
+<%- end -%>
@@ -6,37 +6,32 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title><%= yield(:title) || 'Flickr4Twitter' %></title>
- <%= stylesheet_link_tag "main" %>
- <%= javascript_include_tag "jquery-1.3.2.min.js" %>
- <%= javascript_include_tag "jquery.untinyurl.js" %>
+
+ <%= stylesheet_link_tag "blueprint/screen.css", "application.css", :media => 'screen, projection' %>
+ <%= stylesheet_link_tag "blueprint/print.css", :media => 'print' %>
+ <%- if request.env['HTTP_USER_AGENT'] =~ /MSIE/ -%>
+ <!--[if lt IE 8]>
+ <%= stylesheet_link_tag "blueprint/ie.css", :media => 'screen,projection' %>
+ <![endif]-->
+ <%- end -%>
+
+ <%= javascript_include_tag "jquery-1.3.2.min.js" %>
+ <%#= javascript_include_tag "jquery.untinyurl.js" %>
</head>
<body>
<div id="header">
- <%- if signed_in? -%>
-<!--
- <ul id="nav">
- <li class="<%= 'active' if request.request_uri == '/' %>">
- <%#= link_to 'Home', root_url %></li>
- <li class="<%= 'active' if controller.action_name == 'mentions' %>">
- <%#= link_to 'Mentions', mentions_statuses_url %></li>
- <li class="<%= 'active' if controller.controller_name == 'direct_messages' %>">
- <%#= link_to "DM", direct_messages_url %></li>
- <li class="<%= 'active' if controller.action_name == 'favorites' %>">
- <%#= link_to 'Favs', favorites_statuses_url %></li>
- <li>
- <%#= link_to 'Logout', session_url, :method => :delete %></li>
- </ul>
--->
- <p><%= link_to 'Logout', session_url, :method => :delete %></p>
- <%- end -%>
+ <%= render :partial => 'layouts/menu' %>
+ <%= render :partial => 'layouts/user_menu' %>
</div>
- <%= render :partial => "shared/flashes" %>
+ <div class="container">
+ <%= render :partial => "shared/flashes" %>
- <div id="main_content">
- <%= yield %>
+ <div id="main_content">
+ <%= yield %>
+ </div>
</div>
-
+
</body>
</html>
@@ -1,5 +1,3 @@
-<p><%= link_to "New photo", new_photo_path %></p>
-
<%- unless @photos.blank? -%>
<%- for photo in @photos -%>
<% div_for photo do %>
View
@@ -1,24 +1,8 @@
-<%- form_for @photo, :html => { :multipart => true } do |f| -%>
- <%= f.error_messages %>
- <%- field_set_tag "Twitter" do -%>
- <div class="text field required">
- <%= label_tag :username, "Username" %>
- <%= text_field_tag :username %>
- </div>
- <div class="password field required">
- <%= label_tag :password, "Password" %>
- <%= password_field_tag :password %>
- </div>
- <%- end -%>
- <%- field_set_tag do -%>
- <div class="file field">
- <%= f.label :image, "Image file" %>
- <%= f.file_field :image %>
- </div>
- <%- end -%>
- <%- field_set_tag do -%>
- <div class="submit field">
- <%= f.submit "Save", :disable_with => "Saving..." %>
- </div>
+<%- semantic_form_for @photo, :html => { :multipart => true } do |form| -%>
+ <%= form.error_messages %>
+ <%- form.inputs :name => 'Upload Photo', :id => 'upload_photo' do -%>
+ <%= form.input :image, :as => :file, :label => 'Image', :required => true %>
+ <%= form.input :message, :as => :text, :label => 'Tweet', :required => false %>
+ <%= form.commit_button :button_html => { :value => 'Save' } %>
<%- end -%>
<%- end -%>
View
@@ -1,18 +1,27 @@
+<div class="flash info">
+ <p>Your current endpoint URL for your client is:<br /><%= "#{root_url}#{@user.get_endpoint_path}" %></p>
+</div>
+
<%- semantic_form_for @user do |form| -%>
+
<%= form.error_messages %>
- <%#= form.inputs %>
- <%- form.inputs :name => "Flickr", :id => "flickr" do -%>
+ <%- form.inputs :name => 'Flickr', :id => 'flickr' do -%>
<%= form.input :flickr_username %>
+ <%= form.input :flickr_user_id, :label => 'Flickr ID', :required => false, :input_html => { :disabled => true } %>
<%- end -%>
- <%- form.inputs :name => "Client", :id => "client" do -%>
- <p>
- <strong>NOTE:</strong> Changing this value will also require you to update your client's endpoint URL.<br />
- Creating a "Custom" Client Hash will allow you to link multiple Twitter accounts with the same end-point URL.<br />
- Just enter the same string for each of your Flickr4Twitter accounts.
- </p>
- <p>Your current endpoint URL for your client is:<br /><%= "#{root_url}#{@user.get_endpoint_path}" %></p>
+
+ <%- form.inputs :name => 'Client', :id => 'client' do -%>
+ <li>
+ <p>
+ You can use multiple Twitter accounts on the same Tweetie client by setting the custom client field.<br />
+ <strong>NOTE:</strong> Creating / deleting this field will require you to change the custom endpoint in Tweetie.
+ </p>
+ </li>
<%= form.input :custom_client_hash, :required => false %>
+ <%- end -%>
+
+ <%- form.buttons do -%>
+ <%= form.commit_button %>
<%- end -%>
-
- <%= form.buttons %>
-<%- end -%>
+
+<%- end -%>
@@ -1,5 +1,5 @@
# Set the default text field size when input is a string. Default is 50.
-# Formtastic::SemanticFormBuilder.default_text_field_size = 50
+Formtastic::SemanticFormBuilder.default_text_field_size = 25
# Should all fields be considered "required" by default?
# Defaults to true, see ValidationReflection notes below.
View
@@ -13,7 +13,7 @@
map.login '/login', :controller => :sessions, :action => :new
map.logout '/logout', :controller => :sessions, :action => :destroy
- map.tweetie_endpoint '/clients/:client/:client_hash.:format', :controller => :photos, :action => :create
+ map.client_endpoint '/clients/:client/:client_hash.:format', :controller => :photos, :action => :create
map.root :controller => :photos
File renamed without changes.
Binary file not shown.
@@ -0,0 +1,35 @@
+/* -----------------------------------------------------------------------
+
+
+ Blueprint CSS Framework 0.9
+ http://blueprintcss.org
+
+ * Copyright (c) 2007-Present. See LICENSE for more info.
+ * See README for instructions on how to use Blueprint.
+ * For credits and origins, see AUTHORS.
+ * This is a compressed file. See the sources in the 'src' directory.
+
+----------------------------------------------------------------------- */
+
+/* ie.css */
+body {text-align:center;}
+.container {text-align:left;}
+* html .column, * html div.span-1, * html div.span-2, * html div.span-3, * html div.span-4, * html div.span-5, * html div.span-6, * html div.span-7, * html div.span-8, * html div.span-9, * html div.span-10, * html div.span-11, * html div.span-12, * html div.span-13, * html div.span-14, * html div.span-15, * html div.span-16, * html div.span-17, * html div.span-18, * html div.span-19, * html div.span-20, * html div.span-21, * html div.span-22, * html div.span-23, * html div.span-24 {display:inline;overflow-x:hidden;}
+* html legend {margin:0px -8px 16px 0;padding:0;}
+sup {vertical-align:text-top;}
+sub {vertical-align:text-bottom;}
+html>body p code {*white-space:normal;}
+hr {margin:-8px auto 11px;}
+img {-ms-interpolation-mode:bicubic;}
+.clearfix, .container {display:inline-block;}
+* html .clearfix, * html .container {height:1%;}
+fieldset {padding-top:0;}
+textarea {overflow:auto;}
+input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
+input.text:focus, input.title:focus {border-color:#666;}
+input.text, input.title, textarea, select {margin:0.5em 0;}
+input.checkbox, input.radio {position:relative;top:.25em;}
+form.inline div, form.inline p {vertical-align:middle;}
+form.inline label {position:relative;top:-0.25em;}
+form.inline input.checkbox, form.inline input.radio, form.inline input.button, form.inline button {margin:0.5em 0;}
+button, input.button {position:relative;top:0.25em;}
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,32 @@
+Buttons
+
+* Gives you great looking CSS buttons, for both <a> and <button>.
+* Demo: particletree.com/features/rediscovering-the-button-element
+
+
+Credits
+----------------------------------------------------------------
+
+* Created by Kevin Hale [particletree.com]
+* Adapted for Blueprint by Olav Bjorkoy [bjorkoy.com]
+
+
+Usage
+----------------------------------------------------------------
+
+1) Add this plugin to lib/settings.yml.
+ See compress.rb for instructions.
+
+2) Use the following HTML code to place the buttons on your site:
+
+ <button type="submit" class="button positive">
+ <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
+ </button>
+
+ <a class="button" href="/password/reset/">
+ <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
+ </a>
+
+ <a href="#" class="button negative">
+ <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
+ </a>
@@ -0,0 +1,97 @@
+/* --------------------------------------------------------------
+
+ buttons.css
+ * Gives you some great CSS-only buttons.
+
+ Created by Kevin Hale [particletree.com]
+ * particletree.com/features/rediscovering-the-button-element
+
+ See Readme.txt in this folder for instructions.
+
+-------------------------------------------------------------- */
+
+a.button, button {
+ display:block;
+ float:left;
+ margin: 0.7em 0.5em 0.7em 0;
+ padding:5px 10px 5px 7px; /* Links */
+
+ border:1px solid #dedede;
+ border-top:1px solid #eee;
+ border-left:1px solid #eee;
+
+ background-color:#f5f5f5;
+ font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
+ font-size:100%;
+ line-height:130%;
+ text-decoration:none;
+ font-weight:bold;
+ color:#565656;
+ cursor:pointer;
+}
+button {
+ width:auto;
+ overflow:visible;
+ padding:4px 10px 3px 7px; /* IE6 */
+}
+button[type] {
+ padding:4px 10px 4px 7px; /* Firefox */
+ line-height:17px; /* Safari */
+}
+*:first-child+html button[type] {
+ padding:4px 10px 3px 7px; /* IE7 */
+}
+button img, a.button img{
+ margin:0 3px -3px 0 !important;
+ padding:0;
+ border:none;
+ width:16px;
+ height:16px;
+ float:none;
+}
+
+
+/* Button colors
+-------------------------------------------------------------- */
+
+/* Standard */
+button:hover, a.button:hover{
+ background-color:#dff4ff;
+ border:1px solid #c2e1ef;
+ color:#336699;
+}
+a.button:active{
+ background-color:#6299c5;
+ border:1px solid #6299c5;
+ color:#fff;
+}
+
+/* Positive */
+body .positive {
+ color:#529214;
+}
+a.positive:hover, button.positive:hover {
+ background-color:#E6EFC2;
+ border:1px solid #C6D880;
+ color:#529214;
+}
+a.positive:active {
+ background-color:#529214;
+ border:1px solid #529214;
+ color:#fff;
+}
+
+/* Negative */
+body .negative {
+ color:#d12f19;
+}
+a.negative:hover, button.negative:hover {
+ background-color:#fbe3e4;
+ border:1px solid #fbc2c4;
+ color:#d12f19;
+}
+a.negative:active {
+ background-color:#d12f19;
+ border:1px solid #d12f19;
+ color:#fff;
+}
@@ -0,0 +1,14 @@
+Fancy Type
+
+* Gives you classes to use if you'd like some
+ extra fancy typography.
+
+Credits and instructions are specified above each class
+in the fancy-type.css file in this directory.
+
+
+Usage
+----------------------------------------------------------------
+
+1) Add this plugin to lib/settings.yml.
+ See compress.rb for instructions.
Oops, something went wrong.

0 comments on commit c802abc

Please sign in to comment.