diff --git a/app/views/albums/index.html.haml b/app/views/albums/index.html.haml index ee4cd4c094d67558071e96a658771676e225c38e..bdafab4bada8850b4839740c7460bfd9eddd557f 100644 --- a/app/views/albums/index.html.haml +++ b/app/views/albums/index.html.haml @@ -2,7 +2,10 @@ = friends_albums_link \/ =your_albums_link - %span= link_to ' + ', new_album_path + + .button.right + = link_to 'new album', new_album_path + %ul#stream diff --git a/app/views/albums/show.html.haml b/app/views/albums/show.html.haml index 65a8a292c14447ebb73eea6ef0babc482f1ec69b..0d1f070f16da2c70a508d216ade4830dc1836401 100644 --- a/app/views/albums/show.html.haml +++ b/app/views/albums/show.html.haml @@ -2,11 +2,23 @@ = link_to 'albums', albums_path >> = @album.name - %h4= "last updated: #{how_long_ago(@album)}" + + .button.right{ :id => "add_photos_button" } + = link_to 'add photos', '#' + +%h4= "last updated: #{how_long_ago(@album)}" + -unless mine? @album %h4= 'by ' + @album.person.real_name + + + -if mine? @album - = render "photos/new_photo", :photo => @photo, :album => @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) diff --git a/public/javascripts/view.js b/public/javascripts/view.js index 7eddc731df8e6052e969cfb4cf23aaa10eda460f..21a71b9c5fa0b7826be89021a6398b029b9634f4 100644 --- a/public/javascripts/view.js +++ b/public/javascripts/view.js @@ -88,4 +88,9 @@ $(document).ready(function(){ speed: 3000 }); + + $("#add_photos_button").click(function(){ + $("#add_photo_box").fadeIn(300); + }); + });//end document ready diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 7e52893c882a9e0c61aa09b363c9fee7370530a1..c1a4ea7d15bcd469dc77eea1adb0892e62dbf364 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -343,3 +343,34 @@ ul#publisher_content_pickers li { .field_with_submit input[type='text'] { 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; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 41245e30477cd1e6b2c7587b68e9973349f0a8cb..018a55c8b9a57ab5335b70303b8a871f07a08187 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -421,3 +421,55 @@ ul#publisher_content_pickers li input[type='text'] :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 + :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 + + + + +