some misc design cleanup. album page toggle pending.

app/views/albums/_new_album.haml

-= form_for Album.new, :remote => true do |f|
+= form_for Album.new do |f|
   = f.error_messages
   %p
     = f.text_field :name, :value => "tell me something good"

app/views/albums/index.html.haml

 %h1.big_text
-  = friends_albums_link
-  \/ 
-  =your_albums_link
-
-  .button.right
-    = link_to 'new album', new_album_path
+  %ul.button_set
+    %li.selected= friends_albums_link
+    %li= your_albums_link
 
+  .button.right#add_album_button
+    = link_to 'new album', "#"
 
+  #add_album_box.contextual_pane
+    = render "albums/new_album"
 
 %ul#stream
   - for album in @albums

app/views/albums/show.html.haml

 %h1.big_text
-  = link_to 'albums', albums_path
-  >>
+  .back
+    = link_to '⇧ albums', albums_path
+
   = @album.name 
 
-  .button.right{ :id => "add_photos_button" }
-    = link_to 'add photos', '#'
+  -if mine? @album
+    .button.right#add_photos_button
+      = link_to 'add photos', '#'
+
+    #add_photo_box.contextual_pane
+      = render "photos/new_photo", :photo => @photo, :album => @album
 
-%h4= "last updated: #{how_long_ago(@album)}"
+.sub_header
+  ="last updated: #{how_long_ago(@album)}"
 
 -unless mine? @album
   %h4= 'by ' + @album.person.real_name
 
 
-
--if mine? @album
-  #add_photo_box{ :style => "display:none;" }
-    = render "photos/new_photo", :photo => @photo, :album => @album
-
-
-
 - for photo in @album_photos
   = link_to (image_tag photo.image.url(:thumb_medium)), object_path(photo)
 

app/views/layouts/application.html.haml

@@ -7,7 +7,7 @@
     %meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}/
     
     = stylesheet_link_tag "blueprint/screen", :media => 'screen'
-    = stylesheet_link_tag "application"
+    = stylesheet_link_tag "application", "ui"
     /= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
     = javascript_include_tag 'jquery142', 'rails', 'google'
     = javascript_include_tag 'tiny_mce/tiny_mce', 'jquery.infieldlabel'
@@ -52,9 +52,9 @@
 
     .container
       .span-24.last
-        .span-18.append-3.last
+        .span-19.append-1.last
           = yield
-        .span-3.last
+        .span-4.last
           = link_to(person_image_tag(current_user), root_path)
           = link_to "Edit your profile", edit_user_path(current_user)
           %br

app/views/photos/_new_photo.haml

@@ -5,22 +5,23 @@
       url: "/photos?album_id=#{album.id}",   
       sendBoundary: window.FormData || $.browser.mozilla,
       onStart: function(event, total) {
-        return confirm("You are trying to upload " + total + " files. Are you sure?");
+        return confirm("You are about to upload " + total + " photos. Are you sure?");
       },
       setName: function(text) {
-          $("#progress_report_name").text(text);
+        $("#progress_report_name").text(text);
       },
       setStatus: function(text) {
         $("#progress_report_status").text(text);
       },
       setProgress: function(val) {
-        $("#progress_report_bar").css('width', Math.ceil(val*100)+"%");
+        //$("#progress_report_bar").css('width', Math.ceil(val*100)+"%");
       },
       onFinishOne: function(event, response, name, number, total) {
         //alert(response);
       },
       onFinish: function(event, total){
         $("#progress_report").delay(600).slideUp(200);
+        $("#add_photo_box").delay(600).fadeOut(200);
       },
       onStart: function(event, total){
         $("#progress_report").slideDown(600);
@@ -30,25 +31,18 @@
   });
 
 :css
-  #progress_report_bar {
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
+  #progress_report, #progress_report_name, #progress_report_status{
+    font-size: 12px;
+    padding: 0;
+    line-height: auto;
   }
 
-
-
-
 = form_for photo, :html => {:multipart => true} do |f|
   = f.error_messages
-
   = f.hidden_field :album_id, :value => album.id
+  = f.file_field :image, :multiple => 'multiple'
 
-  %p
-    = f.file_field :image, :multiple => 'multiple'
-
-    #progress_report{ :style => "display:none;" }
-      #progress_report_name
-      #progress_report_status{ :style => "font-style: italic;" }
-      #progress_report_bar_container{ :style => "width: 90%; height: 15px;" }
-        #progress_report_bar{ :style => "background-color: #0A516D; width: 0; height: 100%;" }
+  #progress_report{ :style => "display:none;" }
+    = image_tag "loader.gif" 
+    #progress_report_name
+    #progress_report_status{ :style => "font-style: italic;" }

app/views/photos/show.html.haml

-%h3
-  viewing photos from album 
-  = link_to @album.name, album_path(@album)
+%h1.big_text
+  .back
+    = link_to "⇧ #{@album.name}", album_path(@album)
+  = @photo.image
 
-%div{:id => @photo.id}
+  .button.right
+    = link_to 'edit', '#'
 
+%div{:id => @photo.id}
   = link_to "full size", @photo.image.url
 
   #show_photo
+    = link_to_prev @photo, @album
     = linked_scaled_photo @photo, @album
-
-  #photo_pagination
-    %center
-      = link_to_prev @photo, @album
-      |
-      = link_to_next @photo, @album
+    = link_to_next @photo, @album
 
   -if mine?(@photo)
     %p
       = link_to "Destroy", @photo, :confirm => 'Are you sure?', :method => :delete
-
   %p
     = link_to "<< back to album", album_path(@album)
 

public/javascripts/view.js

@@ -88,9 +88,21 @@ $(document).ready(function(){
     speed: 3000
   });
 
+  //buttons//////
+  $("#add_photos_button").toggle(
+    function(){
+      $("#add_photo_box").fadeIn(300);
+    },function(){
+      $("#add_photo_box").fadeOut(200);
+    }
+  );
 
-  $("#add_photos_button").click(function(){
-    $("#add_photo_box").fadeIn(300);
-  });
+  $("#add_album_button").toggle(
+    function(){
+      $("#add_album_box").fadeIn(300);
+    },function(){
+      $("#add_album_box").fadeOut(200);
+    }
+  );
 
 });//end document ready

public/stylesheets/application.css

@@ -237,8 +237,10 @@ ul.comment_set {
     .request_buttons > li:first-child {
       margin-right: 1em; }
 
-#show_photo img {
-  max-width: 100%; }
+#show_photo {
+  text-align: center; }
+  #show_photo img {
+    max-width: 100%; }
 
 #debug_info {
   margin-top: 20px; }
@@ -344,33 +346,20 @@ ul#publisher_content_pickers li {
   width: 85%;
   display: inline; }
 
-.button {
-  font-size: 12px;
-  line-height: 100%;
-  text-shadow: 0 1px 0 white;
-  color: #666666;
-  background: -webkit-gradient(linear, 0% 29%, 0% 85%, from(#fafafa), to(#e0e0e0));
-  padding: 5px;
-  height: 14px;
-  display: inline;
-  border: 1px solid #cccccc;
-    border-bottom: 1px solid #666666;
-    border-left: 1px solid #999999;
-    border-right: 1px solid #999999;
-    border-radius: 3px;
-  box-shadow: 0 1px 1px #cccccc;
-  -webkit-box-shadow: 0 1px 1px #cccccc;
-  -moz-box-shadow: 0 1px 1px #cccccc;
-  cursor: pointer; }
-  .button:active {
-    box-shadow: 0 0px 2px black;
-    -webkit-box-shadow: 0 0px 2px black;
-    -moz-box-shadow: 0 0px 2px black;
-    color: #555555; }
-  .button a {
-    display: block;
-    color: #444444; }
-
-.right {
-  float: right;
-  margin-top: 6px; }
+h1.big_text {
+  border-top: 2px solid #666666;
+  border-bottom: 1px solid #666666;
+  text-align: center; }
+
+.back {
+  position: absolute;
+  left: 0;
+  font-size: 12px; }
+
+.sub_header {
+  font-size: 1em;
+  font-style: italic;
+  color: #999999;
+  margin-top: -5px;
+  margin-bottom: 1em;
+  text-align: center; }

public/stylesheets/sass/application.sass

@@ -285,11 +285,14 @@ ul.comment_set
       :margin-right 1em
 
 #show_photo
+  :text
+    :align center
   img
     :max-width 100%
 
 
 
+
 #debug_info
   :margin-top 20px
 
@@ -422,54 +425,30 @@ ul#publisher_content_pickers li
     :width 85%
     :display inline 
 
-.button
-  :font
-    :size 12px
-
-  :line-height 100%
-
-  :text
-    :shadow 0 1px 0 #fff
-
-  :color #666
-
-  :background -webkit-gradient(linear, 0% 29%, 0% 85%, from(#FAFAFA), to(#E0E0E0))
-
-  :padding 5px
-  :height 14px
 
-  :display inline
-
-  :border 1px solid #ccc
+h1.big_text
+  :border
+    :top 2px solid #666
     :bottom 1px solid #666
-    :left 1px solid #999
-    :right 1px solid #999
-    :radius 3px
-
-  :box-shadow 0 1px 1px #ccc
-  :-webkit-box-shadow 0 1px 1px #ccc
-  :-moz-box-shadow 0 1px 1px #ccc
-
-  :cursor pointer
-
-  &:active
-    :box-shadow 0 0px 2px #000
-    :-webkit-box-shadow 0 0px 2px #000
-    :-moz-box-shadow 0 0px 2px #000
+  :text
+    :align center
 
-    :color #555
 
-  a
-    :display block
-    :color #444
+.back
+  :position absolute
+  :left 0
+  :font
+    :size 12px
 
+.sub_header
+  :font
+    :size 1em
+    :style italic
+  :color #999
 
-.right
-  :float right
   :margin
-    :top 6px
-
-    
-
-
+    :top -5px
+    :bottom 1em
 
+  :text
+    :align center