some misc design cleanup. album page toggle pending.

This commit is contained in:
danielvincent 2010-07-27 12:12:25 -07:00
parent 97daaf81c2
commit dbc8f0112e
9 changed files with 104 additions and 132 deletions

View file

@ -1,4 +1,4 @@
= 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"

View file

@ -1,12 +1,13 @@
%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

View file

@ -1,24 +1,23 @@
%h1.big_text
= link_to 'albums', albums_path
>>
.back
= link_to '⇧ albums', albums_path
= @album.name
.button.right{ :id => "add_photos_button" }
-if mine? @album
.button.right#add_photos_button
= link_to 'add photos', '#'
%h4= "last updated: #{how_long_ago(@album)}"
#add_photo_box.contextual_pane
= render "photos/new_photo", :photo => @photo, :album => @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)

View file

@ -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

View file

@ -5,7 +5,7 @@
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);
@ -14,13 +14,14 @@
$("#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
%p
= f.file_field :image, :multiple => 'multiple'
#progress_report{ :style => "display:none;" }
= image_tag "loader.gif"
#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%;" }

View file

@ -1,24 +1,22 @@
%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
.button.right
= link_to 'edit', '#'
%div{:id => @photo.id}
= link_to "full size", @photo.image.url
#show_photo
= linked_scaled_photo @photo, @album
#photo_pagination
%center
= link_to_prev @photo, @album
|
= linked_scaled_photo @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)

View file

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

View file

@ -237,7 +237,9 @@ ul.comment_set {
.request_buttons > li:first-child {
margin-right: 1em; }
#show_photo img {
#show_photo {
text-align: center; }
#show_photo img {
max-width: 100%; }
#debug_info {
@ -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;
h1.big_text {
border-top: 2px solid #666666;
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; }
text-align: center; }
.right {
float: right;
margin-top: 6px; }
.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; }

View file

@ -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
h1.big_text
:border
:top 2px solid #666
:bottom 1px solid #666
:text
:align center
.back
:position absolute
:left 0
:font
:size 12px
:line-height 100%
.sub_header
:font
:size 1em
:style italic
:color #999
:margin
:top -5px
:bottom 1em
: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
: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
:color #555
a
:display block
:color #444
.right
:float right
:margin
:top 6px
:align center